从 hexo 迁移到 hugo 问题记录

hugo 安装这里不再赘述,主题选择 hugo-theme-stack

1. FrontMatter 处理

因为 hexo 的 FrontMatter 要求比较松散,而 hugo 要求严格,所以存在一些兼容性问题,github 找了一个脚本处理转换一下就可以了。

2. 文章永久链接处理

之前 hexo 使用的是 /categories/slug.html 这个格式,而 Hugo 不支持 categories 这种格式。找到一个折衷的方法使用 aliases

1

aliases: /2010/01/01/even-earlier-url.html

这样的话使用 /2010/01/01/even-earlier-url.html 这个连接也能跳转到 /post/slug/ 这个链接

3. 本地图片的处理

hugo 支持两种方式引用本地图片:

图片放入 statics 文件夹,然后在文章中引用:

1

[1.png](/images/1.png)

文章和图片位于同一个目录,文章中直接引用

1

[1.png](1.png)

由于 1 方式和之前 hexo 的目录结构较为接近,所以选用第一种方式。

4. 评论数据的处理

使用 waline 评论,由于 leancloud 数据库中记录的 url 是原文章 /categories/slug 这个格式。而现在的文章链接有变,所以需要手动处理 leancloud 中的评论数据,修改 url 字段为 /post/slug 这种格式。

5. 使用 vercel 托管

之前的 hexo 托管在 giuhub pages,访问速度不太理想,正好借此机会迁移到 vercel。

vercel 创建项目,模板选择 hugo,然后本地 clone 新建的 repo,把 hugo站点文件推送到这个仓库。 Vercel 就会自动渲染并发布,也支持绑定自定义域名,自动申请 ssl 等服务。

由于vercel 自带的 hugo 版本较老,需要指定 hugo 版本 Vercel -> Project-> Settings -> Environment Variables HUGO_VERSION 0.88.1

6. 主题修改

修改引用代码块颜色

默认引用背景和代码块的颜色比较接近,不好区分,修改为 vue 风格的配色。

1 2 3 4 5 6 7 8 9 10 11

编辑 hugo-theme-stack/assets/scss/variables.scss 文件

:root {
--blockquote-border-size: 4px;

  • --blockquote-background-color: rgb(248 248 248);
  • --blockquote-background-color: rgb(236 248 242);

……

  • --pre-background-color: #272822;
  • --pre-background-color: #282C34;
    --pre-text-color: #f8f8f2;