网站生成方式迁移：从 hexo 到 hugo

背景

原来的博客有段时间没有维护，趁这次整理的时候，顺便将博客生成框架从 hexo 迁移到 hugo，主要原因有：

自从入职以后开始写 golang，hugo 是用 golang 写的，可以作为学习代码的激励；
hugo 的生成速度更快（虽然在目前看，并不太重要）；
hugo 的整体目录更简单，可以摆脱“黑洞般的” node_modules 了（笑）；

迁移记录

hugo 基础设置

hugo 安装

从发布页面 Releases · gohugoio/hugo 下载对应二进制，并设置环境变量即可；

$ wget https://github.com/gohugoio/hugo/releases/download/v0.118.2/hugo_extended_0.118.2_linux-amd64.tar.gz

$ tar -zxvf hugo_extended_0.118.2_linux-amd64.tar.gz

$ mkdir -p /opt/hugo

$ mv hugo_extended_0.118.2_linux-amd64/hugo /opt/hugo/

新建网站

$ hugo new site /path/to/site

Makefile

为了简化网站发布的操作步骤，用 makefile 对命令做一些编排

user = user
host = destination-host
dest = /var/www/html/

build:
        @hugo

clean:
        @rm -rf public
        @echo "Clean public dir"

deploy: clean build
        @scp -r public/* $(user)@$(host):$(dest)

需要提前做的：

建议使用公钥登录的方式：ssh-copy-id user@host

用户需要有对目标目录的读写权限，目前实现方式是：sudo chown -R user:user /var/www/html

修改主题

之前用过 hyde 主题很不错，但是该主题在 hugo 的官方网站中消失了，因此考虑使用新的主题，最终选择了 JuiceBar。

下载主题

$ cd /path/to/site
$ git clone https://github.com/hotjuicew/hugo-JuiceBar.git themes/JuiceBar

# 复制 config 文件
$ cp themes/JuiceBar/config.toml ./

修改配置文件，简单记录配置文件内容如下：

baseURL = 'http://shadowc.ltd/'
languageCode = 'zh-CN'
theme = "JuiceBar"
title = "非稳态遍历"

[params]
author = "ShadowC"
description = "不要温和地走入那个良夜"
authorImage = "/images/profile.jpg"
paginate = 5

Title = "非稳态遍历"
content = "--- === >>>"
imageUrl = "/images/avatar.jpg"
# To add a new social icon (More social icons can be found in JuiceBar\layouts\partials\svg.html.)
[[params.social]]
name = "Github"
url = "https://github.com/chengshusss"
[[params.social]]
name = "email"
url = "mailto:imjiaying@outlook.com"

[taxonomies]
category = "categories"

# To add a new navigation link
[[menu.main]]
name = "About"
url = "/about"
[[menu.main]]
name = "Blog"
url = "/post"
[[menu.main]]
name = "Categories"
url = "/categories"

[params.giscus]
repo = "chengshusss/blog-comment"
repoID = "MDEwOlJlcG9zaXRvcnkzNzg3ODg1MTM="
category = "Announcements"
categoryID = "DIC_kwDOFpPaoc4CasBm"
mapping = "og:title"
reactionsEnabled = "1"
emitMetadata = "0"
inputPosition = "bottom"
lang = "en"
loading = "lazy"

# Used for outputting the documentation (required).
[outputs]
home = ["HTML", "RSS", "JSON"]

新建 about 页面，主要是文件头的信息需要特殊指定：

---
title: "About Me"
date: 2023-11-05T01:06:40+08:00
author: chengshusss
heroimage: /images/author.jpg
layout: about
---

按照主题 README 中的推荐，复制 archetypes/default.md 到日志的根目录下。
修改首页的列表展示

1. 将主题中的 layouts/_default/summary.html 文件复制到网站对应目录下； 2. 修改其中的 {{ .Summary }} 为 {{ .Description }}。
- 注：hugo 中，网站目录下的文件会覆盖主题对应目录下的文件。

开启评论

参考自：Giscus | 评论插件

创建一个公开仓库，并开启评论区，以作为评论存放的地点

安装 Giscus Appopen in new window，使其有权限访问对应仓库。

在完成以上步骤后，前往 Giscus 页面open in new window 获得你的设置。

你只需要填写仓库和 Discussion 分类，之后滚动到页面下部的 “启用 giscus” 部分，获取 data-repo, data-repo-id, data-category 和 data-category-id 这四个属性。

将 3 中的四个字段填入 config.toml中对应字段即可。

常用操作

新建文章

hugo new content post/first-page.md
编辑这个文档

临时查看

hugo server

生成

hugo

注：上述命令并不会清空原本的文件，建议生成前手动删除

Update

2023-11-5

hugo 的字数统计默认跳过中文
- Fix: config.toml 中增加： hasCJKLanguage = true
- ref: 为 Hugo 博客添加字数统计 – Mogeko’s Blog