使用Hexo引擎配置静态博客

hexo 博客搭建

今年新年愿望之一，督促自己每周写博客。作为一个新的开始，打扫屋子清爽一番是我的一贯风格。加上感觉jeklly 引擎不怎么好使，就想换个新的引擎 hexo。去年注意到越来越多的博客开始用这个引擎，于是关注了下，感觉的确不错（主题，模式等等），说干就干。想着作为科班出身，看别人教程多low，于是直接看官方文档开搞，当然了，坑是不可避免的，下面来聊一下。

作者：木鸟杂记 https://www.qtmuniao.com, 转载请注明出处

时间线

前一天，花了一个小时左右过了下hexo官方文档：https://hexo.io/zh-cn/
另起炉灶，新申请了个github账号，对hexo实验一番
在原来github账号上将以前的寥寥几篇笔记迁过去

看文档

hexo文档写的挺清楚的，又有中文，大致溜了一下。先讲讲主要可能用到的是一些基本命令和常规配置，然后大概谈谈我理解的hexo的原理。

基本命令

按用到的顺序大致捋一遍，我用的 hexo 版本：hexo: 3.8.0，hexo-cli: 1.1.0

安装 nodejs，参见文档概述一节。主要是 npm 命令，就是个 js 包管理工具，静态网页，自然离不了大量的js依赖。
安装 hexo 命令行: npm install -g hexo-cli
初始化 hexo： hexo init
新建文章： hexo new [layout] <filename>
发布静态网页： hexo d (hexo deploy简写)

常规配置

主要针对 github pages：

总配置文件即 hexo/_config.yml ：基本设定如 title, subtitle 等按下不表，需要注意的是 deploy 和 theme

针对git，如果有自己的博客域名，注意在 hexo/source 里面加上CNAME（里面写上自己的域名）文件，这时候，就算你输入 qtmuniao.github.io ，也会自动跳转到 www.qtmuniao.com。

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published

hexo deploy -g 是常用的文章发布命令，其中 deploy 的意思是将博客网站呈现所需的文件（去掉了hexo引擎本身的一些杂七杂八文件）push 到指定 repo 的某个 branch 中去，然后将github pages 指向该 repo 的该分支就行了。 -g 是指在 push 到上述分支钱，将生成的静态文件放到 public 文件夹中。

对于主题，知乎有篇文章对流行的 hexo 主题进行了下统计，我这里选的人气最高的 next，并根据其文档安装了一番，我用的版本是 Version 6.0.6。

针对 next 主题配置 thems/next/_config.yml，主要是选了个 Scheme：Gemini，加了点谷歌统计的信息，以便对网站的访问情况进行跟踪。

大概原理

简要说说我对 hexo 的理解：

hexo 大致可以理解为一个写静态博客的引擎。

说先说静态，意思就是没有服务器后台交互，可以粗理解为没有数据库去存烂七八糟的用户信息，博客信息以及其他元信息。由于近年来前端的进一步发展，js 可以做的事情越来越多，仅仅依靠 html + js + css 就可以满足日常码字以及炫酷主题的需求，并且不需要部署服务，租空间，再加上github pages的免费，安全，快速，因此静态博客日趋流行。

那么什是引擎呢，我理解就是将所有与写作无关的事情给你通过 简单命令+默认配置 的方式给你管好，你只需要安心码字就行。当然由于个性化的需要，主题和插件被解耦出来，并且可以定制，可以发布，可以交流，由此极大丰富了可玩性。

hexo 通过模板，主题，插件等模块化解耦，使得写博客这件事变得易上手，可钻研。

新账号

第一念头就是直接在原仓库里改，思考片刻，强行按下这不靠谱的想法。于是新申请一个github账号，问题随之而来：

1. 不同的github账号不能添加同一个ssh key

Google 一番，找到一个方案。

a. 重新生成一个 ssh pair（生成的时候注意位置选择，我觉得最好还放在 ~/.ssh目录下吧，当然着看个人口味，然后起一个规整名字）

b. 编辑 ssh 配置文件， ~/.ssh/config，指定两个 host 条目，设置使其用不同的 ssh key。

Host host1
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_rsa

Host qtmuniao
    HostName github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/qtmuniao_id_rsa

然后可以用 ssh -T git@qtmuniao 测试下配置结果

c. 修改 git clone repo.git 中路径：

1 2	改前： git@github.com:qtmuniao/qtmuniao.github.io.git 改后： git@qtmuniao:qtmuniao/qtmuniao.github.io.git

就是把 @ 后 : 的 hostname 改为配置的 hostname。

hexo实验

然后就开始按照以前想法，直接建了一个 qtmuniao.github.io 的仓库，然后在 hexo deploy 的时候遇到第二个问题：

2. qtmuniao.github.io 仓库的 Settings 中 GitHub Pages 项的 source 只能设置为 master

a. 先详细交代下问题由来

hexo 的设定是，写博客以及所需要的 hexo 依赖，维护在一个 branch 中（比如说 master branch），然后针对 git 方式 deploy 的时候将所有有用的文件给 push (-- force) 到一个新分支（比如说 publish branch）上去，然后在 github 中将该分支设为 github pages 的指向分支。

b. 但是 hexo 给的指向方案不好使啊，即：

1
2

https://hexo.io/zh-cn/docs/deployment:
登入 Github/BitBucket/Gitlab，请在库设置（Repository Settings）中将默认分支设置为_config.yml配置中的分支名称。稍等片刻，您的站点就会显示在您的Github Pages中。

我将 qtmuniao.github.io 的默认分支改为 publish 后，打开 https://qtmuniao.github.io/ ，发现仍然指向 master 分支。

c. 于是就有了该问题：qtmuniao.github.io 仓库的 Settings 中 GitHub Pages 项的 source 只能设置为 master，因为它是灰的。

Stack Overflow 一番，大概弄明白了，您的 github 所有仓库都可以将其根目录，或者根目录下 docs 文件夹设为待发布的 github pages。但是当 username.github.io 仓库存在的时候呢，就默认将 username.github.io master分支设置为待发布的 github pages，还不能更改。

d. 既然这样，那我就新建了个 blog 的仓库，然后每次利用 hexo 将博客代码发布到 gh-pages 分支，并在 blog 仓库的 Settings 中，将Github Pages 项的 Source 设置为 gh-pages 就可以了。美中不足的是，访问路径就带了 blog ，主页就变成了： https://qtmuniao.github.io/blog/ ，这个稍后估计能修改配置解决。

e. 后来弄了下路径问题，发现在 hexo/_config.yml 里面有以下提示： If your site is put in a subdirectory, set url as ‘http://yoursite.com/child‘ and root as ‘/child/‘ ；如实加上后，果然没有了blog的子路径；但是如果我用自己的域名进行指向后，就发现各种资源文件（js+css）获取不到了，而将上面配置改回 url: http://yoursite.com and roots as ‘/‘ 就好了。

笔记迁移

参考 hexo 文档 https://hexo.io/zh-cn/docs/migration#Jekyll 没遇到什么问题。

评论区

为了增加互动性，结识更多同好，我想增加个评论区。感觉由于用的 Next 版本比较高级，其默认支持常见评论插件：gitment，gitalk

我这里选用的是 gitalk，由于其是基于 Github Issue 和 Preact 开发的评论插件。因此需要先注册一个 github application，https://github.com/settings/applications/new 。需要注意的是 Homepage URL 和 Authorization callback URL 填一致的就行，如果有配置域名指向的填域名就行。

注册成功后获取 client Id 和 secret，在 hexo/themes/next/_config.yml 中打开下面配置就行：

gitalk:
  enable: true
  github_id:   # Github repo owner
  repo:   # Repository name to store issues.
  client_id:  # Github Application Client ID
  client_secret:  # Github Application Client Se
  admin_user:   # GitHub repo owner and collaborators, only these guys can in
  distraction_free_mode: true # Facebook-like distraction free mode

需要注意的 repo 一项仅需要填 git repo 的名字，而非地址。

然后 hexo clean && hexo deploy 重新部署就行。

可能会出现 登录出现 404 错误 ，点下登陆 github 就行。

最后祝大家玩得愉快。

我是青藤木鸟，一个喜欢摄影、专注大规模数据系统的程序员，欢迎关注我的公众号：“木鸟杂记”，有更多的分布式系统、存储和数据库相关的文章，欢迎关注。关注公众号后，回复“资料”可以获取我总结一份分布式数据库学习资料。回复“优惠券”可以获取我的大规模数据系统付费专栏《系统日知录》的八折优惠券。

我们还有相关的分布式系统和数据库的群，可以添加我的微信号：qtmuniao，我拉你入群。加我时记得备注：“分布式系统群”。另外，如果你不想加群，还有一个分布式系统和数据库的论坛（点这里），欢迎来玩耍。