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; |
---|