博客迁移-从hexo到hugo

前言

几年前还在读研的时候，有空折腾了一下 hexo ，在 github pages 上搭建了一个静态博客，刚开始还写了一些文章，后来新鲜劲过了就荒废了，最近看到好多人用 hugo ，又想拾起来写写博客，遂折腾之。

动机

想替换掉 hexo 的原因主要有二：

我不是前端开发者，折腾 hexo 的环境比较费劲，当初搭建的时候就遇到各种坑，更换一台电脑之后想重新再搭建一套又得耗费不少精力；而 hugo 发布的是二进制程序，更换机器后直接下载二进制安装即可，省时省力。
性能方面， hexo 随着文章数量增加，生成的时间会越来越多；而 hugo 基本不存在主要的问题，能够做到实时预览。

过程

得益于我之前部署过 hexo + github pages 的方案，整个迁移的过程还是比较顺利的，主要参考了pseudoyu 大佬的这篇文章： Hugo + GitHub Action，搭建你的博客自动发布系统

主题

首先要做的便是选择一个称心的主题了，官方主题都在这： Hugo Themes

我的选择方式是随心，第一眼看中哪个就用哪个，一眼望去 hugo-theme-stack 主题跟我之前用的 hexo 主题比较像，符合我的眼缘，嗯，就是它了！

侧栏自定义

我之前的 hexo 博客侧栏放了两部分内容

一部分是博客的功能按钮，比如 主页 & 归档 等，点击后跳转到博客内链
二部分是外链按钮，比如 Github & Love Story ，点击后打开新标签页，跳转到对应链接

第一部分的自定义，需要在 content/page/ 下建立对应的文件夹，放入 index.md ，写好 front matter 即可，几个关键点：

1
2
3
4
5
6
comments: false # 是否开启评论
menu:
    main: 
        weight: -40 # 权重，越小位置越靠上
        params:
            icon: user # svg图，可以放在 assets/icons/ 下

而第二部分的自定义，则是直接修改 config.yaml 文件，在 menu -> main 下直接添加需要的 url ，比如我的侧栏 Love Story 按钮配置如下：

1
2
3
4
5
6
7
8
menu:
    main:
        - identifier: love
          name: Love Story
          url: /love # 这里也可以是完整的外链
          params:
              icon: heart
              newtab: true # 是否新标签页打开

图片的运用

我用的主题针对图片的显示有一些 feature，比如题图、分类图等，使用好了自然更加美观。

比如文章题图，在首页显示时，会占据卡片式的上半部分；再比如分类图，在点击侧栏的 归档 和 分类 按钮时，可以看到效果。

顺带一提，我建议尽量使用矢量图，既能适配多分辨率，又能节省空间

文章迁移

虽然之前的博客没有多少文章，但也是自己的回忆和记录，当然是要全数保留下来的。

因为都是 markdown 方式的文章，内容方面并没有什么障碍，迁移中的问题主要集中在文章永久链接的转换和文章存放上面。

好在 hugo 解决这两个问题比较方便，分别做下介绍。

永久链接

之前的博客没有考虑太多，直接使用了 md 文件的文件名作为永久链接，这样会有两个问题

中文文件名会造成中文链接，实际解析时会被转换为一堆字符，不美观，也不便于传播记忆
目录结构、文件名一旦有变化，链接就会变化，其他人访问原链接就是 404 了

而在 hugo 中，可以设置每篇文章的 slug 作为永久链接，这样只需要文章的 slug 全英文，并且保持唯一即可。

目录结构

相应地， hugo 中其实不存在目录结构的问题，不管在任意文件夹放置 md 文件，随意命名都可以，只要保证 slug 唯一就行了，这样大大方便了文章的组织问题。

在文章数量少的时期可以按年存放文章，文章数量多起来可以按月、按日，随心所欲。

自动化部署

这部分直接参考其他教程文章，利用 github action 实现自动化的发布网页到自己的 xxx/xxx.github.io 仓库里，我抄的是 Hugo + GitHub Action，搭建你的博客自动发布系统里的配置。

后记

这一圈折腾下来，感觉不坚持写一段时间都对不起自己的折腾之心，哈哈，且行且看。