一:准备工作
1、下载Node.js,并进行安装(详见注意事项)
1.双击打开安装包
2.疯狂点击下一步进行安装
2、下载Git,并进行安装
依旧按照上述步骤进行安装
二、启用Github Pages
申请github账号
这里xxx填写你的github账户名称。如图:
创建一个新的仓库
命名为【你的用户名】.github.io
三、安装Hexo
- 打开
Node.js
下的command prompt
面板,分别输入以下命令(检测软件配置是否安装成功)
输出了版本号,那么证明配置成功
如果没有版本号,请重新安装node.js,检查是否勾选Add to Path,或者手动为node.js添加环境变量
node -v
npm -v
- 安装hexo和hexo服务器模块
npm install hexo-cli -g
npm install hexo-server --save
- 生成博客文件夹
直接在自己心仪的路径上右键生成文件夹,名称随意
例如: D:\hexo
-
切换command prompt的目录到新建的hexo文件路径,命令如下
cd D:\hexo
-
执行
hexo init
命令,进行博客初始化 -
测试hexo是否安装成功:
hexo new test
hexo clean
hexo s
hexo g
hexo d
其中hexo new test表示新建一篇名为test的博文,hexo g表示生成,是hexo generate的简写,hexo s在本地运行hexo服务器,是hexo server的简写。
成功后会有如下提示,进入 http://localhost:4000 即可看到刚刚生成的网页
以下为配置完成后的样子,可能和你生成的页面不同,如果想配置和我一样的hexo可以继续阅读我的其他post。
三、配置到Github Pages
之前的操作只是在本地实现了我们的博客,如何推送到github pages呢?
-
首先,打开博客目录下的 _config.yml 文件
-
使用 ctrl+f 搜索deploy,并添加以下代码。注意!把xxx改为之前在github配置的名字即可。
deploy:
- type: git
repo: https://github.com/xxx/xxx.github.io.git
branch: master
-
接下来,安装
hexo-deployer-git
插件
npm install hexo-deployer-git --save
-
最后就可以推送我们的网页到github啦!
hexo g
hexo d
四、完善
访问网页
如果之前的步骤都是正确的话,那么恭喜你!你已经可以访问你的网页了!
比如我的网页: zigetech.github.io
把zigetech改成你的github用户名即可
绑定你自己的域名(可选)
由于我的域名使用的是Cloudflare,接下来我会演示如何绑定你的github pages到Cloudflare,其他域名商操作应该也是雷同的。
-
登录你的Cloudflare后台,点击
DNS
.添加一条CNAME记录,如图:
-
其中CNAME的值就填写你的github page的值(也就是上文你注册过的仓库的名字),
![DNS解析](https://pic2.zhimg.com/80/v2-214e0d6b077b908c1dd9adc044996505_720w.jpg “DNS解析”) -
最后一步,在你本地 /source 文件夹下添加一个名为CNAME的文件(注意,此文件没有后缀),在文件中里面写上你的域名即可。
-
再次执行deploy
hexo g
hexo d
- 稍等几分钟,你就可以用自己的域名访问你的网站啦!
最后的最后
本文介绍了基本的hexo + github page的部署及实现,如果有任何问题,欢迎留言!