从 Typecho 到 Hugo 的选择与迁移

本站最近从 Typecho 迁移到 Hugo，写这篇文章分析一下 Typecho 和 Hugo 各自的优缺点，给读者在这两者之间选择提供参考。最后记录一下我的迁移过程供后来者参考：Typecho 在服务器已经挂掉的情况下如何恢复所有的文章，然后保存为 Hugo 的文件组织方式

Hugo 与 Typecho 比较

Hugo

优点：

静态博客生成器：生成静态 HTML，性能好，部署方便，很多 serverless 服务商支持一键部署 Hugo
使用模板语法和 shortcodes 实现灵活的内容组装
使用 Hugo pipeline 自动化处理资源文件：SCSS 生成 CSS、minify js、压缩或生成不同尺寸的图片
提供一系列现代化功能：输出 JSON 或 AMP 页面、拓展的 Markdown 语法、接入 Google Analytics、i18n 等
文档完善，社区活跃

缺点：

DIY 门槛比较高，学习曲线比较陡峭
主题数量比较少，大多都是英文主题，并且主题提供的功能或可以自定义的选项比较少
很难实现一些拓展功能，比如博主开发的几款 Typecho 插件就很难在 Hugo 上实现类似的功能
没有评论系统。虽然支持集成 disqus，但是由于众所周知的原因 disqus 在中国不能访问

Typecho

优点：

主题丰富：有很多漂亮的中文主题，并且提供很多 DIY 选项
插件丰富：有第三方插件市场，提供丰富的拓展功能
新手友好：中文社区中教程很多，出问题也有很多大佬可以请教
提供管理后台，支持注册用户、发布文章等

缺点：

早已停止功能更新，只进行维护
Typecho 是基于 php 的动态博客系统，性能不如静态博客
部署比较麻烦，需要部署 web server、php、database，很难使用 serverless 的方式部署

Typecho 与 Hugo 选择我之见

博主从 Typecho 迁移到 Hugo 的主要动力是之前白嫖的服务器到期了。。。相比于 Typecho 用的 php 我对 Hugo 的 go 语言更熟悉一些，而且 Hugo 完善的文档更是极大程度上方便于我的 DIY 大业。

Hugo 作为一个静态博客系统最主要的缺点( 优点 )是没有( ~~不需要~~ )后端，但是这可以通过各家云厂商的函数计算来弥补。函数计算+云上托管的数据库就可以实现一切你想实现的插件功能，本文评论系统的 api 就使用了 Vercel 提供的 function 服务。当然，以上构想需要你具备一定的编程知识，这恐怕不是简单的照猫画虎可以快速掌握的。

博主这里给出一些 Hugo 和 Typecho 的选择建议供读者参考：

如果你对静态博客生成器有强需求，那我估计你也不会读到这 qwq
如果你有编程背景，熟悉云服务，崇尚 GitOps，那么选择 Hugo
如果你想 DIY 并且原意折腾，反复调试各种错误并乐此不疲，那么选择 Hugo
如果你追求极值的访问速度/没有也不想有自己的服务器/有多语言等依赖于 Hugo 特性的需求，那么选择 Hugo
如果你是小白或有一定的 DIY 需求但是并不想折腾，那么选择 Typecho
如果你想有一个在线写作/方便的更新文章的平台，那么选择 Typecho
如果你想一劳永逸的部署/有一个用户&评论系统/有收费等特殊的插件需求，那么选择 Typecho

从 Typecho 到 Hugo

网上有一些 Typecho 迁移插件可以将 Typecho 的文章和附件导出为 Hugo 的文件组织方式，但是我的服务器已经挂掉了没法用这些插件，只能进行手动迁移

迁移文章

直接从数据库的 typecho_contents 表中提取文章标题和内容等信息，这里给出一个示例 sql 语句：

SELECT * FROM blog.typecho_contents where type="post";

可以写一个脚本来将所有文章输出到以各自文章名命名的文件中

迁移图片等附件

我的博客使用了又拍云的对象储存来保存图片等附件，所以只需要把他们下载下来就好。比较麻烦的是修改这些图片在文章中的链接，如果要手动一个个改太耗时间。推荐在 Hugo 的 static 文件夹中新建一个和之前的图片目录结构一样的文件夹，这样就不用修改链接了

Hugo 目录结构

我的 Hugo 文件夹结构如图所示：

tree content/post
.
├── solutions-to-certificate-invalidation-after-android-7
│   ├── cal-hash.jpg
│   ├── index.md
│   ├── install-ca-certificate.jpg
│   └── ssl-handshake-failed.jpg
└── web-font-optimization
    ├── blog_title.jpg
    ├── font_type.jpg
    ├── index.md
    ├── sign.jpg
    └── woff2_support.jpg

每个文章新建一个以文章的 slug 命名的文件夹，将文章用到的图片包括文章头图都放在这个文件夹下。在主题中可以用 .Context.Resources.GetMatch 得到图片的 resource 对象，这样既便于管理，也能将图像交给 Hugo 进行处理。比如 ssl-handshake-failed.jpg 这张图片就会生成以下几个版本：

ls resources/_gen/images/post/solutions-to-certificate-invalidation-after-android-7
...
ssl-handshake-failed.2a74b1a908dba312f29b1f3f15095116_hu9d2358b8f64836a3db846b7dbcdad0ac_92801_250x150_fill_q75_box_smart1.jpg
ssl-handshake-failed_hu9d2358b8f64836a3db846b7dbcdad0ac_92801_1024x0_resize_q75_box.jpg
ssl-handshake-failed_hu9d2358b8f64836a3db846b7dbcdad0ac_92801_480x0_resize_q75_box.jpg