Hexo + GitHub Paging 快速搭建个人博客

Posted on | In

近段时间觉得应该把自己学习到的东西进行个总结，同时也方便自己以后回顾，所以心血来潮想搭建一个博客，顺势就把搭建的过程记录一下，作为自己的第一篇博客吧，希望以后能坚持下去。

系统环境说明

1
2
3
4
MacOS: 10.13.5
Nodejs: 10.6.0
npm: 6.1.0
git: 2.13.6

Hexo依赖于Nodejs和npm，所以在开始之前先安装好Nodejs和npm

安装Hexo

1
npm install hexo-cli -g

安装完毕之后，先初始化一个blog文件夹，作为后续项目的目录（我看到有些文档是让先git clone下来git上的repo，再在这个文件夹里hexo init，这样hexo会报错提示该文件夹不为空，所以这里我选择先init一个文件夹，而且，可以使用hexo的自动部署到github paging上，省去clone 远端库的过程）

1
2
3
4
5
hexo init blog
cd blog
npm install
hexo g # 或者hexo generate
hexo s # 或者hexo server

完成上述步骤后，我们就可以在http://localhost:4000/上查看到一个hello world的样本文章。

以下是我安装hexo的本地环境，通过hexo -v查看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hexo-cli: 1.1.0
os: Darwin 17.6.0 darwin x64
http_parser: 2.8.0
node: 10.6.0
v8: 6.7.288.46-node.13
uv: 1.21.0
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.32.0
napi: 3
openssl: 1.1.0h
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

主题设置

这里我得吐槽一下了，github paging会找不到hexo主题生成的一些css/js文件。最后我选择了next主题，可能是因为该主题特别火，所以该主题最新版可以很好的适配GitHub paging，省去了添加..nojekyll文件或是修改source/vendors为source/lib。如果使用了最新的next主题，仍然出现样式没有加载的情况，可以去网上找找以上方法去解决。

这里我们先去GitHub上下载next主题

1
2
cd themes
git clone https://github.com/iissnan/hexo-theme-next.git

然后修改上层目录里的_config.yml文件中theme字段

1
2
cd ..
vim _config.yml

修改为下面这样，注意名字要与你下载的主题名称一致

1
theme: hexo-theme-next

然后通过

1
2
hexo g
hexo s

就可以在本地查看主题是否更改了。

接下来就是配置GitHub paging了。

GitHub Paging设置

首先你得有一个GitHub账号，并且配置好public key，然后你再新建一个repo，这里建议把Repository name设置成下面这样的样式

1
fangchichen.github.io. # 重点是后面的github.io

避免hexo主题一些css/js文件找不到的问题

建完repo后，我们就可以把文章部署在GitHub上了

这里有两种方式，接下来分别介绍

文章部署

第一种方式，就是用hexo的deploy命令去部署，要是用这种方式，首先得下载一个扩展

1
npm install hexo-deployer-git --save

然后再来修改上面提到的_config.yml文件deploy字段如下

1
2
3
4
deploy:
   type: git
   repo: https://github.com/fangchichen/fangchichen.github.io.git  # 这里就填上面你自己建立的repo的地址
   branch: master

这样你就可以用下面的命令将文章部署到GitHub上

1
hexo d

现在就通过https://fangchichen.github.io/这样的链接访问到你的文章了，有没有很激动（如果出现样式没加载出来的问题，请参考上面主题设置部分）。

当然，如果你想换别的hexo主题，记得用下面的命令先清理掉之前的publish文件夹，然后重新生成一个并部署上去。

1
2
3
hexo clean
hexo g
hexo d

第二种部署方式就跟git提交差不多了，先创建一个.deploy隐藏文件夹，再把远端的repo下载到本地

1
2
madir .deploy
git clone https://github.com/fangchichen/fangchichen.github.io.git

然后把hexo生成的public里面的内容全复制到下载下来的repo本地文件夹里面

1
2
3
4
5
cp -R public/* .deploy/fangchichen.github.io
cd .deploy/fangchichen.github.io
git add .
git commit -m “update”
git push origin master

如果觉得麻烦，可以写个脚本来执行上面的操作，省去每次更新文章都得再来一遍。

到这里搭建个人博客就基本上完成了，生下来就介绍一些hexo常用命令

Hexo常用命令

创建一个新的文章

1
$ hexo new "My New Post"

More info: Writing

未完待续！

谢谢支持