Reader

把博客引擎从Jekyll换到了Hexo

| 一个球的博客 | 博客

初入 Github Pages 这个大坑的时候，官方推荐的博客引擎就是 Jekyll，我也一直用到了现在，当中不乏一些（很多）折腾，总体用下来其实没啥大毛病，直到上一次我更新了 macOS Monterey 导致 Gem 和 Bundler 全炸 (jekyll/issues/8784)，而我对于其报错信息只有两眼一抹黑，这给了我极大的不安全感，而 Hexo 完全基于 Nodejs，对于做前端的我而言，从开发到部署的学习成本应该都会小很多，于是萌生了切换博客引擎的想法，目前感受还不错，分享一下经验。

数据迁移

根据官网文档来看，数据迁移其实很容易搞，只需要把之前 Jekyll _post文件夹下所有文件复制到 Hexo source/_posts文件夹，然后在_config.yml中将new_post_name改成:year-:month-:day-:title.md，这样博客数据的迁移就完成了。

模版

之前用 Jekyll 的时候就是纯手写的模版和样式，哪怕到了 Hexo 我的打算也一样，并且还要在原有基础上再次精简代码。不过，过程并不是我想象中的那样一帆风顺：

  • 需要熟悉一下EJS
  • 很多变量名都要靠自己摸索（后面发现是自己粗心，完全忽略了 Hexo → helpers那一章节的文档）

EJS 不说了，之前有用过模版引擎的朋友们应该都能很快上手，遇到问题比较多的方面是 Hexo 的一些全局变量。

<div class="table-wrap">

Jekyll Hexo
<div style="width: 140px;"></div>获取 Post 列表 site.posts page.posts
获取博客主标题 site.title config.title
获取 Post 日期及格式化 <code>article.published_at | date: "%Y-%m-%d"</code> moment(page.date).format('YYYY-MM-DD')
插入公共代码 include footer.html partial('partial/footer')

</div>

搞脑子的部分解决之后，剩下的就只有舒适了，模版内的语法完全就是我们熟悉的 JavaScript，写起来如鱼得水。

目前我的博客与之前相比

  1. 文件结构比 Jekyll 清爽很多

    ├── scaffolds
├── source
|  ├── _data
|  └── _posts
├── themes
|  └── jw1dev
└── _config.yml

  2. 用上了 Github Actions，之前 Jekyll 一直有些 bug，所以一直都是手动部署。虽然自动部署很爽，但是刚上线还是遇到一个坑，那就是时区，部署上去发现有些文章时间会相差一天，很快意识到这可能是 Github Actions 的虚拟机使用了 UTC 时间，不过也好解决，workflow 配置文件加几行就可以：

     jobs:
   build:
     runs-on: ubuntu-latest

     strategy:
       matrix:
         node-version: [14.x]

     steps:
+    - uses: szenius/[email protected]
+      with:
+        timezoneLinux: "Asia/Shanghai"

  3. 删除了大量的无用代码

    • CSS 代码从 2000+行减少到了 800+行
    • 现在的首页零 JS 代码
    • 文章页甚至去除了 logo 和 slogan，更纯粹的阅读体验

  4. 优化了侧栏的设计，现在移动到了 slogan 下方，提升了可访问性

<br>

好了，就说这些。拜拜！