记录一次折腾

发表于 更新于

更好的部署方式

经历了hexo原始项目文件丢失又找回的惊吓之后，我决定改用github active管理我的blog。因为这种方案需要将全部原始文件上传至github，可以用作备份和版本管理，而以前的一键部署方案依赖hexo在本地生成静态页面再上传，远程git仓库没有原始文件。需要另开分支或仓库存储这些文件。如果没有存，那就要小心文件丢失的风险。

好在，我并不是从零开始构建工程。这里就简单记录一下大概流程：

  • 安装node.js。我安装的是22.19.0版本。这是一个lts版本。在安装过程中，node.js会询问你是否自动安装所需的工具。如果你已经配置好自己电脑的开发环境，千万不要选择这一项，容易把自己的开发环境搞乱。
  • 安装hexo。运行npm install -g hexo-cli。
  • 新建文件夹，在命令行进入新建的文件夹，运行hexo init，待运行完成后，运行npm install。
  • 运行hexo new post/page新建推文或页面。
  • 将完成编辑的工程push到git的指定仓库。要将仓库设置为github active模式。

使用github active主要需要注意的一点，首先要注意不要将/public文件夹上传，其次要知道如何编写任务脚本。这里，参考hexo官方的编写方法，方便省心。

如果一切设置妥当，当新版本的工程被push到git上时，构建将会自动开始，可以在仓库的active页面看到构建进度和log。待构建完成，即可在指定的url看到。

插入图片

按照官方文档，开启post_asset_folder: true并且打开：

1
2
3
marked:
  prependRoot: true
  postAsset: true

就应该实现，在新建post时，自动生成一个同名资源文件夹；将要插入的图片放入资源文件夹，并在md文件中引用即可实现插入。

但实际情况是，这种插入方法在使用markdown编辑器编辑时无法预览，且在真实网页上也看不到插入的图片。经过检查，插入的图片经过渲染后并没有被正常替换为public下的路径。

最后通过安装hexo-asset-img和htmlparser2，并在插入图片路径前添加post名实现在编辑时和真实网页都能看到图片。另外要注意图片的文件名，经过hexo转换后，图片的文件名可能发生改变。

插入LaTex

例如：

通过安装hexo-filter-mathjax，并在md文件的属性部分添加mathjax: true达成。