使用hexo搭建博客

一、背景

本来在自己的vps上自己写了一个博客,但是很多地方需要自己不断维护,自己写的前端也不太满意所以决定用框架搭一个静态博客部署在github page上,这样也省了在vps上到处迁移。

我选择了人气比较高的Hexo,记录一下自己搭建的过程,作为官方文档的整理和补充。

二、安装

首先确认电脑里有git和npm (安装node.js即可)的支持,以下为macOS上使用homebrew安装,其他安装方式参考搜索引擎。

1
2
3
4
# 安装git
$ brew install git
# 安装node.js
$ brew install node

安装Hexo

1
$ npm install -g hexo-cli

安装后可以使用hexo命令行,官方的命令文档:文档

新建项目

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后,指定文件夹的目录如下:

1
2
3
4
5
6
7
8
.
├── _config.yml //项目配置文件
├── package.json //应用程序的信息
├── scaffolds //模版文件夹
├── source //存放用户资源和md文件的地方
| ├── _drafts
| └── _posts
└── themes //主题文件夹

修改_config.yml为自己的信息,参考配置文档:文档

安装主题

建立项目后,第一件事可能是找一个喜欢的主题,在主题市场找到自己满意的主题进行接下来的安装,当然也可以自己写一个主题。

找到选好的主题的github项目,将其clone到你新建的项目的themes目录下,这里的默认的一个主题是landscape。修改项目根目录下的_config.yml(项目配置文件,一般主题目录下也有一个_config.yml,请勿混淆),theme的值改为刚才clone的主题名称。到这里就可以将主题应用到项目上,其他配置参考每个主题的文档。

三、部署

根据github的规定,仓库名为<your github name>.github.io时默认该仓库的master分支为github page部署分支,此时首页的url为https://<your github name>.github.io/。而其他命名的仓库可以指定一个分支,如gh-pages作为部署分支,此时页面的url为https://<your github name>.github.io/repositorie-name/

由于这种差异,可以有两种部署方式。一是将hexo项目在本地渲染静态页面,然后push到远程;二是将项目代码同步到github仓库,使用CI将远程渲染后的结果发布到gh-pages分支。

GitHub已经可以免费使用GitHub Action做CI了,写完博客直接push就可以部署,参加我的另一篇博客Github Pages 博客优化

本地渲染

由于是部署到github page,所以使用git发布到远程。按照文档,可以使用SFTP等方式发布到自己的服务器上,也可以设置多个发布地址,按顺序发布。

安装hexo-deployer-git:

1
$ npm install hexo-deployer-git --save

修改_config.yml的参数:

1
2
3
4
5
deploy:
type: git
repo: <repository url> #git@github.com:xxxx/xxxx.github.io.git
branch: [branch]
message: [message]

需要提前将本地ssh pubkey添加到github的SSH keys里,作为push命令的身份认证。然后只需一条命令就能将网站部署到服务器上:

1
$ hexo clean && hexo deploy

远程渲染

参考官方文档:github-pages