初入 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 的一些全局变量。
Jekyll | Hexo | |
获取 Post 列表 |
site.posts
|
page.posts
|
获取博客主标题 |
site.title
|
config.title
|
获取 Post 日期及格式化 |
article.published_at | date: "%Y-%m-%d"
|
moment(page.date).format('YYYY-MM-DD')
|
插入公共代码 |
include footer.html
|
partial('partial/footer')
|
搞脑子的部分解决之后,剩下的就只有舒适了,模版内的语法完全就是我们熟悉的 JavaScript,写起来如鱼得水。
目前我的博客与之前相比
-
文件结构比 Jekyll 清爽很多
├── scaffolds ├── source | ├── _data | └── _posts ├── themes | └── jw1dev └── _config.yml
-
用上了 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"
-
删除了大量的无用代码
- CSS 代码从 2000 + 行减少到了 800 + 行
- 现在的首页零 JS 代码
- 文章页甚至去除了 logo 和 slogan,更纯粹的阅读体验
-
优化了侧栏的设计,现在移动到了 slogan 下方,提升了可访问性
好了,就说这些。拜拜!