前言

大家好呀，又是一个小长假~

趁着前面考试差不多都考完了，这次51劳动节对陈旧的 Typecho 框架进行了一次刷新。整个博客由原来的 PHP + MySQL 的动态博客，变成基于 Hugo 的静态博客啦！

想到要更换框架的原因有如下几点：

  1. Typecho 更新几乎停摆
  2. 服务器资源有限，动态博客性能较低
  3. 我现在更加懒惰商务风了
  4. 平时不怎么维护，无暇关注安全问题

在今年年初，我就有了要切换框架的想法。但由于懒虫属性大爆发，迟迟没有开动。本次选择了一个较为流行的静态网页生成器 Hugo，和风格简约的主题 PaperMod。（感觉挺优雅一个主题捏）

下面简单聊聊这次迁移做了哪些改动&操作吧！

过程

文章本体数据 & metadata 迁移

虽然原先的 Typecho 系统中，文章本身就是使用 Markdown 编写的，但是由于 Typecho 本身将源文本和各种元数据都存在 MySQL 中，需要将其导出和调整，以适应 Hugo 的纯 Markdown 文件。

  • Markdown 文件导出 这次文章和元数据导出，使用了 Typecho-Plugin-Tp2MD 这个插件。尽管其上次更新已是6年前，但并不妨碍正常使用。倒不如说 Typecho 本身也差不多了

  • metadata 适配 导出的 Markdown 文件，顶部的 metadata 形式并不符合我使用的 Hugo 主题 PaperMod 的形式（例如日期时间格式上，Hugo 需要遵循 ISO 8601 格式），需要进行批处理修改。好在 AI 工具对简单的批处理脚本编写能力甚佳，还得感谢 Claude 老师的辛勤协助ψ(｀∇´)ψ
    下面放张改动前后的对比图吧！左 Hugo，右 Typecho。 metadata变更

  • 换行样式 Typecho 可以对硬换行符自动识别并换行，而 Hugo 使用 Markdown 的换行形式，一般需要在段落末尾加上两个空格，或者使用<br>的 HTML 标签进行换行。批处理操作同样由 Claude 老师协力。

  • 永久链接转移 原 Typecho 使用的永久链接形式为https://blog.welain.com/archives/<cid>，但显然 Hugo 这边没有 cid 这一说法。考虑到之前的 cid 管理混乱，我在此也进行了一些修改，为每个文章手动编写了一个 slug，随后利用批处理脚本，识别原来文章 Markdown 头 metadata 中的 cid，并以如下形式批量添加到新 Markdown 文件中，从而保证原先的永久链接形式不失效，访问原来的链接不会出现 404。

    1
2

    aliases:
- /archives/<cid>

评论支持 & 数据转移

Typecho 作为动态博客系统，本身是自带评论系统的，其数据存在于对应数据库中，我原先使用的是 MySQL。然而静态博客受限于自身形式，需要引入第三方评论系统。这里我选用了 Waline 作为评论系统支持。

参阅 Waline 的数据迁移助手后，留意到可以直接使用 Export2Valine 插件将 Typecho 评论数据导出。但使用后发现在 Waline 后台进行的导入操作失败了，且原永久链接也有变更。由于本站的 Waline 采用了独立部署而非依赖 LeanCloud，可能也与官方的指引存在操作上的差异，遂放弃该办法。

最终采取的办法是直接对 Typecho 和 Waline 两者的后端数据库进行操作。参考 Waline Server API，对 Typecho 与 Waline 数据库表中相同含义的列进行内容迁移。例如，Typecho 数据库中 url字段对应评论者的个人网站链接，而在 Waline 数据库中，相同含义列为link。将数据一一对应即可。

除此之外，Waline 数据库中还新增了 parentId 和 rootId，代表当前评论的父评论和根评论。但 Typecho 数据库中并没有体现 parentId，只有一个 parent 字段，指向根评论（Typecho 有可能是根据评论 cid 大小进行的父评论识别？），于是同样地，使用 SQL 语句，对同根评论的评论进行 cid 大小比对，自动为 parentId 字段填入对应父评论 ID，最终实现了评论数据的转移。

依据类似的思路，将两者数据库中其他差异部分进行处理，最终将评论数据完整迁移完成了。

其他样式调整

对 Hugo & PaperMod 本身的可调整选项就不过多阐述了。只记录一些需要手动变更的东西吧！

  • Waline 评论深色样式 参考 Waline 客户端属性，只需在客户端初始化时添加如下字样，即可适配 PaperMod 主题的深色浅色切换。

    1

    dark: 'body[class="dark"]',

  • 图片的点击放大 鉴于 PaperMod 并没有内置相关功能，此处引入了一个简单的外部脚本medium-zoom，用于实现图片资源的点击缩放。对于移动端，博客界面是可以直接双指缩放的，因此有没有也无所谓啦。

访问速度优化

未经改动的 PaperMod 在网页性能测试(PageSpeed Insights)上基本是满分的。但在加入了 Waline 之后，可能会导致其 stylesheet 卡网页加载。

改动如下：

1

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" media="print" onload="this.media='all'; this.onload=null;">

加入 media="print" onload="this.media='all'; this.onload=null; 就能以非阻塞形式引入这个 css。

注意资源类型，无法使用非阻塞加载的资源请勿盲目加 async 等。

部署方式调整

静态博客没有独立的管理后台，写作完全是直接使用 Markdown 文件编辑，然后使用页面生成器生成 html 页面。指令生成完再手动上传到托管仓库显然过于繁琐。此处我使用了 Git 进行版本控制，然后用 Git Hooks 进行自动化部署的配置。

具体实现其实很简单，就是在编写完成 Markdown 文件并执行 Git 推送到远程仓库命令后，用预制脚本执行原先需要手动执行的一些命令，生成静态页面，随后将生成的文件推送到网页目录（此处我使用了 rclone），即可自动化部署。这省去了手动打开终端执行命令的一些步骤，非常方便。

↑ 超级预制菜工厂.jpg

结尾

经过一些些简单的调整和分类，博客的整体迁移到这里就完工啦🎉