1. 前言

更新时间 更新内容
2020-12-01 初稿
2021-10-06 又换成 jekyll 了 hh

本博客之前是使用Jekyll搭建的, 前两天想给博客增加一个加密文章的功能, 但是搜索一番发现Jekyll下没有比较优雅的实现方式, 而且又看了一些Jekyllhexo对比的文章, 得知Jekyll在文章比较多的时候速度会慢很多. 于是就计划将博客迁移到hexo上.

Jekyllhexo相比也是有优点的. github pages原生对Jekyll的支持让使用Jekyll建站变得非常简单. 使用hexo的话就需要进行更多的配置操作.

本文中会记录配置过程中的一些操作步骤以及一些踩的坑.

2. 正文

2.1. 架构设计

上文中也说了, hexo相比Jekyll而言没有github pages的原生支持, 所以配置使用都相对比较麻烦. 以一个常用的发布新博客的操作为例, 在Jekyll中写好一个markdown文件之后直接push到github.io仓库即可. github会自己将markdown文件渲染成站点文件并发布. 而用hexo的话, 用户就需要自己在本地使用hexo generate命令生成站点文件然后将生成的站点文件push到github.io仓库中.

对比之下hexo有两个缺点:

  1. 操作更加繁琐.
  2. markdown源文件没有备份到github中不够安全.

不过我们可以通过使用github的私有仓库和github actions来克服这两个缺点. 整体 workflow 见下图:

  ┌────────────┐
  │ local pc   │
  │ write posts│
  └────┬───────┘
push to│private repo
       │                
  ┌────▼───────┐
  │ priv repo  │
  │ run action │
  └────┬───────┘
       │
push to│public repo
       │
  ┌────▼─────────┐
  │ public repo. │
  │ bind to      │
  │ github pages │
  └──────────────┘

具体实现时参考了[1].

首先新建一个私有仓库blog_source用于存储站点的各种源文件. 源文件中包含了很多token或者key啥的私密文件, 因此建议使用私有仓库来保存. 之前看到一些博客使用github.io仓库新建一个分支来保存站点源码我直呼好家伙.

然后给私有仓库配置一个Github Action. 其大致有以下两个功能

  1. 将源文件渲染成静态站点文件
  2. 将渲染的站点文件push到github.io仓库

为了实现这两个功能需要配置两个地方. 一个就是Github Action的配置文件 deploy.yml. 这个参考[1]中的模板就好了. 需要注意的是现在github的默认分支名从master改成main了. 所以deploy.yml中的触发条件也需要做相应的修改

on:
  push:
    branches:
      - main

为了使得私有仓库的Action有权限往github.io仓库进行push操作. 我们需要生成一个公私钥对并分别绑定到两个仓库上. 具体过程参考[1].

具体push过程是通过一个插件[2]实现的. 因此需要将该插件添加到 pacakge.json中

{
  ...
  "dependencies": {
    ...
    "hexo-deployer-git": "^2.0.0"
    ...
  }
  ...
}

使用该插件需要进行一些配置. 在 _config.yml中进行配置即可. 因为我们是使用公私钥进行操作的, 所以repo字段需要填写ssh对应的url. 如果使用了错误的url再执行Github Actions时会报错(因为没有权限往github.io仓库进行push操作), 报错信息如下.

...
remote: Permission to pullp/pullp.github.io.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/pullp/pullp.github.io/': The requested URL returned error: 403
FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (/home/runner/work/blog-source/blog-source/node_modules/hexo-deployer-git/node_modules/hexo-util/lib/spawn.js:51:21)
      at ChildProcess.emit (events.js:314:20)
      at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html
...
deploy:
  type: git
  repo: git@github.com:pullp/pullp.github.io.git
  branch: hexo-deploy

2.2. 文章加密功能

使用了一个插件[2]. 使用方法很简单. 首先将其加到pacakge.json中

{
  ...
  "dependencies": {
    ...
    "hexo-blog-encrypt": "^3.0.0"
    ...
  }
  ...
}

然后对想要加密的文章在markdown文件头部添加password字段即可

---
...
password: 1234
---
...

至于一些站点配置和主题配置就不再赘述, 参考官方文档按照自己喜好来即可.[4][5]

首页显示缩写而不是整篇文章

Next主题默认主页是显示整篇文章, 不太喜欢这样, 希望是显示每篇文章的缩写.

设置方法有两种:

  1. 在文章中添加 <!-- more --> tag
  2. 在文章开头添加 experct: 属性, 同时在theme.config里设置excerpt_description: true

详细方法参考官方文档[6]

3. 结语

经过上面的配置之后可以实现Jekyll相同的易用性了. 写完markdown文件后push一下即可. 而且各种源文件还都备份在私有仓库中. 舒服了.

最近因为各种考试和比赛, 一直没有更新. 从这篇开始继续坚持每周更新一篇吧.

4. 参考

  1. 利用 Github Actions 自动部署 Hexo 博客
  2. hexo-deployer-git
  3. hexo-blog-encrypt
  4. hexo
  5. Next
  6. Next 主题 post 设置