迁移到Hugo

由于VuePress的种种问题,还是决定将博客再次迁移到Hugo。简单记录一下相关过程

# 前言:为什么又迁移了

参考踩坑:VuePress与Cloudflare Pages的奇妙冲突。之前用VuePress搭建到CloudFlare Pages之后没法使用Giscus。虽然理论上可以用转发规则之类的修,但我也懒得修复了。

第二个问题是我在使用VuePress之后的感受。VuePress虽然界面不错,但更倾向于搭建一个文档系统,而不是一个日常更新的博客。还是Hexo或者Hugo这种系统比较适合用于记录日常。Hexo之前已经用过了,并且是几年前的技术了,所以这次换Hugo。

# 配置Hugo

参考官方文档,去github release 页面下载最新的release版本。由于Hugo还在高速发展中,出新版本速度非常快。不建议使用Linux系统源中的版本,版本太老了,很多特性不支持。

注意:很多比较好看的Hugo主题需要使用extended版本的高级特性,且我们这里使用Ubuntu系统演示。因此我们下载hugo_extended_0.xxx.x_linux-amd64.deb 的版本(xxx自己根据情况选择,尽量选择新版本的)

然后在本地使用命令安装

1
sudo dpkg -i hugo_extended_0.xxx.x_linux-amd64.deb

# 检查

安装完成后,就可以使用命令检查

1
hugo version

我安装的0.125.6版本,显示

1
hugo v0.125.6-69ede10edcd539380914bbee58d4d32953dd8b43+extended linux/amd64 BuildDate=2024-05-05T10:52:52Z VendorInfo=gohugoio

# 创建站点

使用命令,在文件夹xxxx中创建hugo项目

1
hugo new site xxxx

# 迁移旧文档

由于都是基于markdown格式的,迁移也没有难度。直接将旧的posts文件夹放入Hugo项目的content文件夹中,就可以直接映射了

# 配置主题

我使用的主题是hugo-theme-stack,参考(https://github.com/CaiJimmy/hugo-theme-stack)。可以使用作者提供的starter直接创建项目,但我这里要迁移旧文件,选择自己手动配置

可以在项目文件夹中使用git submodule命令将主题作为子项目添加

1
git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

如果不会用git submodule的话,将https://github.com/CaiJimmy/hugo-theme-stack中的master分支整个clone到hugo项目中的themes文件夹中也可以

最后需要使主题生效,需要将themes\hugo-theme-stack\config.yaml这个例子文件复制到项目根目录,并参考[官方配置文档] (https://stack.jimmycai.com/config/)进行配置。配置都比较清晰简单,这里就不写了。

需要注意,archives和search命令需要自己在content文件夹中创建对应的archives.mdsearch.md。否则没有对应页面

# 部署

还是部署到CloudFlare Page。部署流程还是差不多的

部署流程:

  1. 代码同步到github仓库
  2. 确保代码master分支中项目结构正确
  3. 登陆cloudflare dashboard
  4. 选择Page页面
  5. 创建项目,连接Github,选择对应仓库,授权
  6. 配置
    • 框架:hugo
    • 构建命令:hugo
    • 构建输出目录:/public
    • 根目录:/
  7. 保存并部署
  8. 在自定义域名界面将自己需要使用的域名映射到这个CloudFlare Page上
  9. 完成
  10. 打开浏览器检验

注意踩坑:CloudFlare Page默认的Hugo版本太低,我们需要强制指定为高版本。在Page页面的设置->环境变量中添加环境变量,内容为HUGO_VERSION,值为我们正在使用的0.125.6

# 总结

原本最近想写几个新的博客之前想先把博客系统整整,结果到处踩坑换系统,倒腾了小半个月,结果正文一个字没写。这都属于瞎忙活,还是应该专注于主体内容。(下次在写)

Licensed under CC BY-NC-SA 4.0
使用 Hugo 构建
主题 StackJimmy 设计