使用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