本系列文章总结了Hexo搭建个人博客的流程以及对搭建过程中遇到的问题进行汇总。
环境搭建
使用Hexo搭建个人Blog需要首先安装Node.js、Git以及注册Github。
Node.js和Git
Github
- 新建仓库
如果没有Github账号,请先注册,注册完成后,新建一个与你的用户名相对应的仓库『your_user_name.github.io』,以本人博客为例,『xuyuri.github.io』
- 设置SSH公钥
可以直接参考官方教程进行设置。
[1] 检测是否存在SSH公钥
1 | $ ls -al ~/.ssh |
如果存在id_rsa.pub文件:
1 | $ ls -al ~/.ssh |
则可以直接跳至第三步,将id_rsa.pub文件内容添加到Github中;
[2] 生成新SSH公钥
1 | ssh-keygen -t rsa -b 4096 -C "[email protected]" |
此后步骤一直按回车键即可,最后显示:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15Your public key has been saved in /c/Users/Eliot/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX [email protected]126.com
The key's randomart image is:
+---[RSA 4096]----+
|.+.o... .o |
| + ..o.=.+ o |
| . o ooB.* . |
| . oBo=o |
| E=.+o.+ |
| . oO. = ..|
| o.oo o o|
| .. + ..|
| +oo .|
+----[SHA256]-----+
表示新的SSH Key已经生成成功;
[3] 添加至Github
Github中选择Personal settings -> SSH keys -> Add SSH key;Title可以随便填写,将生成的id_rsa.pub文件内容填写至Key文本框中;
[4] 测试连接1
$ ssh -T [email protected]
如果提示:1
2$ ssh -T [email protected]
Hi xuyuri! You've successfully authenticated, but GitHub does not provide shell access.
表明设置成功!
博客安装
Hexo依赖的环境配置完成后就可以进行博客的安装、初始化以及生成静态页面。
Hexo安装
1 | npm install -g hexo |
Hexo初始化
随意在一个目录下新建文件夹『your_user_name.github.io』,以本人博客为例,『xuyuri.github.io』,然后在该目录下执行如下命令:1
2hexo init
npm install
生成静态页面
1 | hexo generate |
启动本地服务
1 | hexo server |
如果以上安装配置正确,可以得到如下结果:1
2$ hexo s
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
打开浏览器,输入:http://localhost:4000/就可以看到Hexo默认的主题页面。
部署至Github
如果想要通过你创建的仓库名称访问博客,例如:xuyuri.github.io,则需要将本地代码部署到Github上。
- 修改配置文件
在博客根目录下找到配置文件_config.yml,找到最底部的Deployment配置1
2
3
4deploy:
type: git
repo: [email protected]:xuyuri/xuyuri.github.io.git
branch: master
将其中的xuyuri换成自己的Github名称即可。
注:repo是仓库的地址,此处要使用仓库的SSH地址链接,不要使用HTTPS地址链接。
- 部署代码
执行以下命令安装hexo-deployer-git:1
npm install hexo-deployer-git --save
备注:许多教程提供的命令是 hexo d,但是我经常得到错误提示:ERROR Deployer not found: git,所以使用:npm install hexo-deployer-git –save
部署代码:1
hexo deploy
此时通过访问仓库名称即可访问到博客。
写在后面
现在Hexo提供了常用命令的简写形式:1
2
3
4hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
此外,在开启本地服务时修改博客内容,Hexo可以自动编译,不需要每次进行hexo g操作。
关于Hexo配置文件各配置项的含义,我将会在下一节Hexo搭建个人博客(二)介绍。