前言
最近才得知 Cloudflare 推出了 Pages 服务，不仅支持 GitHub 私有仓库部署，响应速度也远超 GitHub Pages。另一方面，Hexo 并不友善的定制体验让我再次反思自己是否应该换一个性能更高、体验更好的框架。在看到 Dvel 君的博客后，我更坚定了这一想法。
免费版的 Cloudflare Pages 支持每月 500 次提交，每个项目最多 10 个自定义域名、最多 20000 个文件，单个文件最大 25 MiB。其他的基本没有限制，这对个人站点来说绰绰有余。
安装
Hugo 的安装可谓优雅至极，在官方网站下载好安装包后，几乎可以无脑下一步。MacOS 用户则一行指令 choco install hugo-extended 即可；实际上，Windows 也可以使用 Scoop 做到类似效果：scoop install hugo-extended 。
下载完成后检查是否安装成功，在终端输入 hugo version，若出现版本信息则表明安装成功。
建站与配置
创建站点
输入 hugo new site blog ，将在选定目录下新建 blog 子文件夹作为站点目录。进入子文件夹，通过 git init 初始化 git 。
blog:.
│ .gitmodules # Git 子模块
│ config.toml # Hugo 配置文件，建议转换成 Yaml 格式
├───archetypes # 模板，类似于 Hexo 的 scaffolds
│ default.md # 默认模板
├───content # 内容路径，文章和页面的 Markdown 文件都放这里
├───data # 储存供模板调用的数据文件？暂时用不上不管它
├───layouts # 布局目录
├───static # 静态文件目录(构建时全部拷贝到 /public 里，相当于网站资源的根目录)
└───themes # 主题目录
获取主题
Hugo主题网站 中列出了各种主题，本站选择了 PaperMod 主题。在博客文件夹的 themes 目录下打开终端，输入：git clone https://github.com/adityatelange/hugo-PaperMod.git 。在配置文件中设定主题。
Config.yml
由于 yaml 的可读性远远优于 toml ，建议使用 config.yml 代替原有的 config.toml 或 hugo.toml，具体配置的可以参考：
创建文章
在终端输入 hugo new 文章名称.md，即可在 content 文件夹下创建 markdown 文件。
Front Matter
title: "Hugo初探" #标题
date: {{ .Date }} #创建时间
lastmod: {{ .Date }} #更新时间
author: ["Suoerix"] #作者
categories:
- 分类1
- 分类2
tags:
- 标签1
- 标签2
description: "描述" #描述
weight: # 输入1可以置顶文章，用来给文章展示排序，不填就默认按时间排序
draft: false # 是否为草稿
comments: true #是否展示评论
showToc: true # 显示目录
TocOpen: true # 自动展开目录
hidemeta: false # 是否隐藏文章的元信息，如发布日期、作者等
disableShare: true # 底部不显示分享栏
showbreadcrumbs: true #顶部显示当前路径
cover:
image: "" #图片路径：posts/tech/文章1/picture.png
caption: "" #图片底部描述
alt: ""
relative: false
本地预览
在终端输入 hugo server 启动本地预览，本地预览网址为 localhost:1313 。
部署
推荐部署至 Cloudflare Pages。也可考虑部署至 GitHub Pages 或其他服务。
采用 hugo 命令的方式渲染只会向 public 文件夹里添加内容，但是不会删除之前出现的文件， 建议使用 hugo -F --cleanDestinationDir 命令，以保证每次生成的 public 文件夹都是全新的。
主题美化
以下内容适用于 PaperMod 主题。修改效果可参考本站。
修改字体
使用 Google Fonts ，将 HTML 插入到 layouts/partials/extend_head.html 中，将 CSS 插入到 assets/css/extended/blank.css。
本站正文使用的中文字体为 霞鹜文楷屏幕阅读版。
代码高亮
PaperMod 最近的 PR 改用 Hugo 内置的 Chroma，CSS 文件位置更改为 assets/css/includes/chroma-styles.css。对应配置文件 config.yml 内容更改为：
markup:
markup.highlight:
noclasses: false
codeFences: true
文章更新时间
以下的内容参考：
修改post_meta
在 PaperMod 主题目录下的 \layouts\partials\post_meta.html 中加上三行：
<!-- 更新时间 -->
{{- if gt .Lastmod .Date -}}
{{- $scratch.Add "meta" (slice (printf "<span title='%s'>%s%s</span>" (.Lastmod) (i18n "updated") (.Lastmod | time.Format (default "January 2, 2006" site.Params.DateFormat)))) }}
{{- end }}
因为我的博客采用中英双语，因此考虑了多语言本地化。
在 \i18n\zh.yaml 中加入：
- id: updated
translation: "更新："
若无需本地化，可考虑直接在 post_media 中写入输出文本。
用法
Hugo 支持通过 Git 自动获取文章更新时间。在 config.yml 中设定为：
enableGitInfo: true
如果不设置自动获取，可以采用每篇文章 Front Matter 中手动设定更新日期：
date: 2023-07-30 #发布日期
lastmod: 2024-07-24 #更新日期
浏览量统计
本站使用了 Vercount 的服务。在主题文件夹的 layouts/partials/extend_head.html 中插入：
<script defer src="https://vercount.one/js"></script>
也可以考虑使用 杜老师的服务 ：
<script async src="https://npm.elemecdn.com/penndu@1.0.0/bsz.js"></script>
在 \layouts\_default\single.html 的 <div class="post-meta"></div> 之间加入：
<!-- 浏览统计 -->
{{ if .Site.Params.ViewCount -}}
·
<span id='busuanzi_value_page_pv'></span> {{- printf "%s" (i18n "page_view" ) }}
{{- end }}
同样的，这里考虑了本地化。在 \i18n\zh.yaml 中：
- id: updated
translation: "更新"