新博客，新起点：Hugo + Stack

从 2018 年创建至今，这个博客已经陪伴了我 8 个年头，在这里我记录了不少折腾的过程和点滴感悟。随着时间的推移，当初选择的 Hexo 和 Material 主题已经渐渐显得过时了。于是，我想着能否换个新的模板和生成器，顺便调整一下网站部署，给这个博客寻找个新的起点。

选择 Stack 主题和 Hugo

正如前面所提到的，hexo 和 hexo-theme-material 已经渐渐过时：

hexo-theme-material 的最后一个发行版 1.5.6 发布于在 2018 年，彼时 Google 的 Material 还能让人眼前一亮，到了今天就已经略显陈旧了
Hexo 本身版本演进速度十分缓慢，构建速度和扩展性也不尽人意，更何况 material 主题把 hexo 锁到了一个较早的版本上

但是，找一个或者造一个美观好用的模板也不是那么容易的。打开各大生成器的主题列表，一眼望去全是些个人自用的、略显简陋的主题，大多缺乏活跃的用户群体和维护支持。我不是前端专家，对现代前端技术一窍不通，让我自己糊一个主题实在是强人所难。在经过一番筛选和对比后，我最终找到了 Jimmy Cai 为 Hugo 编写的 Stack 主题，这个主题的设计风格非常对我的胃口，简洁而又现代，功能上也能满足我的大多数要求，就它了。

值得一提的是，Stack 主题对图片的支持非常强大，具备自动生成缩略图、响应式图片、懒加载等功能，还集成了 PhotoSwipe 插件，相比之前方便了不少。

至于 Hugo，说实话我对网站生成器倒没有那么在意，是选择 Stack 导向了选择 Hugo。不过 Hugo 一直在积极开发中，速度快、功能强，也确实非常令人满意。

适配和改造 Stack

选定主题和生成器之后，就该把文章迁移过来了，还需要对 Stack 进行一些适配和改造。我是从 Stack 官方提供的 Starter 模板开始的，下面都是基于此的改造。

文章目录迁移

Hugo 和 Hexo 的目录结构有一些差异，需要手动做一些处理。

之前的 hexo 采用以下的格式：

1
2
3
4
5
6
7
├── source
│   └── _posts
│       ├── 2018
│       │   ├── The-Way-to-Go
│       │   │   │── bg.jpg
│       │   │   └── pic.png
│       │   ├── The-Way-to-Go.md

文章存放在 source/_posts/ 文件夹内，并且按年份分目录存放文章，如 source/_posts/2018/
每个文章 article.md 都有一个同名的 article/ 文件夹，用来存放文章引用的图片等资源

讲道理，hexo 资源文件夹挺抽象的。在 Markdown 文件中引用图片时，要使用相对于资源文件夹的路径，而不是相对于 Markdown 文件的路径，这让人和 VSCode 都很难受。

Hugo 和 Stack 采用以下的格式：

1
2
3
4
5
6
7
├── content
│   └── post
│       ├── 2018
│       │   ├── The-Way-to-Go
│       │   │   ├── bg.jpg
│       │   │   ├── pic.png
│       │   │   └── index.md

文章存放在 content/post/ 文件夹内，可以按年份分目录存放文章，如 content/post/2018/
使用页面包（Page Bundles）格式，将文章内容 index.md 和资源放在同一个文件夹内

Hugo 的目录结构似乎很自由，顶层节（Top-level Sections）和页面包之间的目录似乎可以随意田间，于是我直接沿用了之前按年份分组文章的结构。

文章元数据迁移

Hugo 和 Hexo 的 Markdown 元数据格式是非常相似的，无非都是些 title、tag、categories、date之类的，只有个别需要稍微调整一下格式即可。

需要特别调整的主要是 Material 和 Stack 支持的文章头图功能，Material 用 thumbnail，Stack 用 image，而且相对路径格式略有不同，需要手动调整一下。另外，Stack 还支持一个 description 字段，用来给文章加上副标题/描述。

配置站点和主题

在 Stack Starter 模板的基础上调整一些 Hugo 的配置，以便适应使用习惯。Stack Starter 模板的配置用 TOML 格式编写，都放置在 config/_default/ 文件夹下。

首先要调整的是文章永久链接的格式，需要想办法和原博客保持一致。在 permalinks.toml文件（即 [permalinks]）中设置如下的配置项。其中，post 指顶层节，:slugorcontentbasename 是元数据中的 slug 和 basename（文章所在文件夹的名字）二选一。

1
post = "/:year/:month/:slugorcontentbasename/"

另外，Hugo 默认会把所有 URL 调整为小写，然而老博客中有不少文章是大小写混写的。在 params.toml 文件（即 [params]）中设置如下的配置项，关闭自动小写的功能。

1
DisablePathToLower = true

之前博客的评论使用的是 Gitalk，用 Github Issue 来充当评论区。这次切换到了 gitcus，改用 Github Disscussion 来充当评论区。通过 gitcus 的交互式工具获取参数，然后将参数填到对应的配置项即可。

以及，调整一下语言、CJK 支持等配置，修改一下网站标题、头像、版权等信息，在页脚加入备案号等等。这些都相对比较简单，就不在赘述了。

有一说一，TOML 格式真有点不是太习惯呢，各种嵌套关系让人眼花缭乱。Hugo 本身是支持 YAML、TOML、JSON 的，回头可能还是改回 YAML 吧。

更换前端 CDN 资源

Stack 使用的外部 CDN 资源大多来自 JSDelivr，然而这玩意儿在国内的访问性实在是不怎么好，十分有必要换个靠谱的 CDN。

我参考了这篇文章，添加了 data/external.yaml文件，通过 Hugo 的主题文件覆盖功能来修改调用的 CDN 资源。完整文件如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Vibrant:
    - src: https://cdnjs.cloudflare.com/ajax/libs/node-vibrant/3.1.6/vibrant.min.js
      integrity: sha256-awcR2jno4kI5X0zL8ex0vi2z+KMkF24hUW8WePSA9HM=
      type: script

PhotoSwipe:
    - src: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js
      integrity: sha256-ePwmChbbvXbsO02lbM3HoHbSHTHFAeChekF1xKJdleo=
      type: script
      defer: true

    - src: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js
      integrity: sha256-UKkzOn/w1mBxRmLLGrSeyB4e1xbrp4xylgAWb3M42pU=
      type: script
      defer: true

    - src: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css
      type: style

    - src: https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css
      type: style

KaTeX:
    - src: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css
      integrity: sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV
      type: style

    - src: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js
      integrity: sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8
      type: script
      defer: true

    - src: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js
      integrity: sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05
      type: script
      defer: true

Cactus:
    - src: https://latest.cactus.chat/cactus.js
      integrity:
      type: script
    - src: https://latest.cactus.chat/style.css
      integrity:
      type: style

现阶段，国内几乎没有靠谱的公共前端 CDN 库了，要么是因为被灰产滥用而被迫关闭，要么是之前出现过供应链投毒的事件。参考文章用的是 baomitu，然而它的主页已经被关闭很久了，看起来也不是很稳定。在多方考虑后，我最终选择了 cdnjs，由大慈善家 Cloudflare 托管，速度和可靠性都让人放心。

此外，我并没有按照参考文章去掉用于校验文件完整性的 integrity 字段。毕竟，供应链投毒是真发生过，而且 cdnjs 也支持这个特性。

调整页面样式

说是调整页面样式，实际上我只调整了一下背景颜色。Stack 原始的背景色是 #f5f5fa，灰偏蓝，看起来有一些粉，我调整成了正灰色 #f5f5f5。在文件 assets/scss/custom.scss 中添加

1
2
3
:root {
    --body-background: #f5f5f5;
}

部署到腾讯云 EdgeOne Pages

因为我的网站已经做了备案，加上需要考虑国内访问的可用性，那就必须得考虑使用国内的云服务了。

我的网站最初是用国内代码托管网站 Coding.net 提供的 Pages 服务，体验与 Github Pages 相差不大。但后来 Coding.net 被腾讯云收购，Pages 服务也经过几轮调整，最终被自动迁移到了腾讯云的 OSS 对象存储 + CDN 内容分发网络。

一开始，腾讯云 OSS + CDN 的整体还是挺好的，代码推送到 coding.net 能自动部署到 OSS，一个月也就几毛钱的费用。后来某一天自动部署消失了，更新博客得手动上传 OSS。去年还出现了一个山西 PCDN 狂刷下载的事情，一个月给干掉了一百多块钱，CDN 本身没啥靠谱的拦截机制。这些麻烦事儿还是让人很是不爽。

腾讯云推出了下一代内容分发网络 EdgeOne，功能上与 Cloudflare 十分相似。除了更好的 CDN 加速和更好的 DDoS 防护外，EdgeOne 还提供了一个 Pages 的功能。EdgeOne 有免费版，不限时间、不限流量，但需要通过兑换码才行。我当时是买 50 块钱的海外服务器就可以领 EdgeOne 免费版兑换券，现在似乎改成了每周抽选。总之，经过一番试用，我决定将博客部署到 EdgeOne Pages 上。

现在博客的源码放在了 GitHub 的私有仓库里，用 GitHub Action 进行构建，构建结果推送到 gh-pages 分支。EdgeOne Pages 可以授权访问 GitHub 的仓库，并在 gh-pages 分支变化时自动部署。

其实 EdgeOne Pages 是自带构建功能的，但我不是很想在腾讯云上折腾 Hugo 依赖的安装，于是就在 GitHub 上直接构建了。

新的写作计划与展望

有了新的博客，自然也要多写点东西。写作这件事，往往是越写越顺，越不写就越难下笔。接下来还是争取每个月至少写一篇文章，锻炼一下自己的写作能力。目前我已经有两篇准备写的文章了，加油吧）