终于初步完成了从Typecho到Hugo的网站迁移

整体历程

2011年2月2日，本站启用并使用WordPress；

2021年7月29日，从WordPress迁移至Typecho；

2025年10月16日，终于正式把域名指向到了Hugo生成的静态页面。

主要过程

因为涉及到html转markdown，使用自动化的转换工具带了一些排版混乱、不合理的转义等等，本来想仿照有些博主，写个脚本自动优化，但随后又转念一想，还是都过一遍吧，于是在工作中见缝插针，以及下班后沉浸到半夜，持续两天枯燥的html转markdown的过程。

虽然当时WordPress转Typecho时已进行了一些格式上的适配，但这次回过头看，问题特别多。

因此还是启用了21年转Typecho时wordpress的备份，好在迁移到Typecho，并没有写过几篇文章，迁移到Typecho以后的文章手动添加就好了。

静态博客生成工具的确定

决定采用静态博客的目的，还是想学习现在的博客主流模式，让更多的注意力在写作本身上面，摆脱臃肿的博客程序，虽说typecho已经非常轻量了，但可能是使用主题的问题，总会有遇到各种各样的使用问题，自身也没有精力去学着去写一个精简的主题，另外静态博客可以很方便的托管到一些GitHub等这样的一些开源平台上，不用再受制于服务器等这些问题。

目前，整个的服务器都已迁移到家庭的nas里，通过购买阿里云的轻量云服务器仅用来内网穿透+反向代理使用，整体成本很低。

除了个人博客这个站点以外的其他网站应用或服务应用还得依托于家里的服务器。

经过浏览了多个业内大佬的网站之后，发现Hugo的覆盖率还挺高，另外Hugo官网的一些主题也都是偏简洁的风格，在B站看了Hugo的实现原理及教程，也很容易上手，因此确定了Hugo作为生成工具。

Hugo模板的确定

最终在官网上对比了几个比较主流的模板之后，最终目光还是集中在了一个比较简洁的一个主题： Hugo blog awesome 。

决定开始使用这个主题是在10月11日，截至写这篇文章已经调试使用了5天时间，目前整体使用起来没有大的问题，但还是有一些自己不满意且比较棘手的问题。不知道后续会不会再换模板，目前先这样用着。

字体

在原有模板的基础上应用了思源宋体，并通过 cn-font-split 实现了字体切割，实现网页字体的快速加载。

分页功能

另外想通过hugo自带的分页功能实现文章列表的分页，但尝试很多种方法，并借助deepseek都没有办法实现。因此最终通过了JavaScript脚本实现了分页功能，这个看后续有没有更好的解决办法。

全文搜索

静态博客如果想实现全文搜索，方法也比较多，我采用了比较成熟的工具： Pagefind 。

代码高亮的自动转换

默认hugo自带的代码高亮功能，一般只能设置一个样式，固定下来之后，不管主题是白色还是黑色，都是统一的一个代码高亮样式，为了实现白色/黑色主题切换时代码高亮主题也自动进行更换，通过脚本实现不同主题下不同的代码高亮方案。

识别外部链接自动启用新窗口打开

通过在layouts/_default/_markup/目录下创建render-link.html文件，并写入代码：

{{ $url := urls.Parse .Destination }}
{{ $isExternal := eq $url.Scheme "http" "https" }}

<a href="{{ .Destination | safeURL }}"
   {{ if $isExternal }}target="_blank" rel="noopener noreferrer"{{ end }}
   {{ with .Title }}title="{{ . }}"{{ end }}>
   {{ .Text | safeHTML }}
</a>

实现自动识别非本站链接采用新窗口打开的功能。

加入关联文章

加入了“猜你喜欢”功能，通过hugo.toml设置了关联的方式，如下：

[related]
  threshold = 80
  includeNewer = true
  toLower = false
  [[related.indices]]
    name = "tags"
    weight = 100
  [[related.indices]]
    name = "categories"
    weight = 80

并在文章的模板文件中，如下方式进行调用数据结果：

{{ if in .File.Path "posts" }}
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3 class="related-articles">猜你喜欢</h3>
<ul class="related-articles">
	{{ range . }}
	<li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
	{{ end }}
</ul>
{{ end }}
{{ end }}

博客文章的迁移

因为Hugo是基于markdown的文件去生成，除了需要正文的内容转为markdown语法以外，还需要通过frontmatter明确文章本身的元数据，目前对于我而言，主要需要确定的元数据如下：

---
title: "标题"
date: "2012-11-14T00:10:04+08:00"  # 创建时间，ISO 8601格式
lastmod: "2012-11-14T00:10:04+08:00"  # 修改时间
author: "ltax"  # 作者
categories: 	# 分类
  - "xx"
tags:		# 标签
  - "xx"
  - "xx"
  - "xx"
coverImage: "images/xx.jpg" 	# 封面图片
# id: 1491  这个id为转移过来的文章自带，目前没用使用
slug: "xx-xx"  	# 文章的英文缩写，用于生成文章路径
toc: false		# 是否开启toc目录
tocOpen: false	# toc目录是否自动展开
isStarred: true	# 是否在文章列表加星标
math: true		# 是否开启数学公式支持
---

整体的文章内容的格式转换，包括部分元数据（标题、创建时间、作者、分类、标签、封面图片、id、slug等）和文章正文内容主要借助于 wordpress-export-to-markdown 工具，最后的修改时间是通过MySQL数据库导出csv文件，对csv文件处理后拿到时间戳，再通过网上的在线时间转换工具获取ISO 8601格式的时间。

另外元数据toc的值主要依据文章的结构，本来是想通过一个判断有二级标题的文章自动用脚本设置toc: true这个标签，但后面既然决定一篇篇文章去看，那就直接靠人工判断了。

文章的存放结构是这样的：

posts/
	2025/
		10/
			slug/
				images/
					xxx.jpg
				index.md

这样的话文章内部的图片通过相对路径的方式存放，就不容易出现路径失效等问题。

这次迁移过程中文章内部的转换，还借助了deepseek辅助进行排版美化，提高了部分格式混乱文章的易读性。

本次迁移累计处理博客文章共374篇，其中19篇草稿。

评论系统确定及数据迁移

静态博客还有一个问题就是没有办法实现评论，因此必须借助第三方评论平台，我采用的是twikoo，是搭建在了自己的nas服务器上。

评论的数据使用了Typecho里面的数据，同样借助了一个开源工具： twikoo-import-tools-typecho ，通过访问MySQL数据库，自动生成可以导入twikoo评论系统的json文件，此外在导出前可以通过config.yml文件自定义关联的文章及页面链接，可以实现评论的关联。

例如，我就通过这个配置文件，设置了如下链接格式：

postPermalink: /posts/{year}/{month}/{slug}/
pagePermalink: /pages/{slug}/

使得其与生成的静态页面进行无缝关联，评论数据实现一键迁移。

本次迁移累计处理评论1919条。

遗留问题

因为从决定迁移，截至本文发布，过去不足一周时间，还遗留了很多问题。

Hugo博客的文章撰写方面不如传统博客那么直观、便捷，因此也简单检索了一些目前主流的编写方式，有借助于Decap或着TinaCMS类似的内容管理系统，在依托于代码托管工具，实现文章的发布及自动更新，目前这一块还有待学习。
~~目前文章的分类比较乱（categories），有英文也有中文，没有进行统一。~~
~~代码高亮的样式还是有缺陷，特别是针对白色主题，部分代码高亮问题比较突出，看后期时更换样式，还是直接修改现有的样式文件。~~
博客内部的图片目前没有放大浏览功能，后期考虑加入灯箱功能。
目前博客没有启用CDN加速功能，后期考虑访问速度，可能会通过render-image hook来实现图片的CDN浏览。
~~友链页面还没有恢复。~~

本文已于 2025年10月19日更新