下面我将介绍本网站的构建过程。
安装Hugo
假设开发电脑使用Linux操作系统，执行以下命令安装Hugo：
- 对于Debian操作系统运行：
sudo apt install hugo - 对于CentOS操作系统运行：
sudo dnf install hugo
其它操作系统安装方法参考官网文档。
创建网站项目
完成Hugo安装后，运行以下命令创建网站项目（此处假设项目名为XiaoGTechBlog）：
hugo new site XiaoGTechBlog
Hugo会生成项目目录XiaoGTechBlog。进入项目目录，克隆PaperMod主题到本地：
cd XiaoGTechBlog
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
编辑项目的hugo.toml配置文件，设置网站主题为PaperMod：
theme = 'PaperMod'
在修改项目的过程中，可以在项目目录下运行命令hugo server -D来对项目进行调试。
多语言支持
在项目根目录的hugo.toml中，有如下配置：
baseURL = 'https://xiaog.info/'
defaultContentLanguage = 'en'
defaultContentLanguage = 'en'设置网站默认语言是英语。但我还希望给网站添加中文的语言显示。
为了给网站添加多语言支持，同时方便配置管理，网站项目采用层级化的配置管理。首先在项目目录中创建配置目录：
mkdir -p config/_default
然后在config/_default中创建多语言配置文件languages.toml，作为多语言支持的配置文件。本网站的languages.toml配置如下：
[zh]
languageCode = 'zh'
languageName = '简体中文'
hasCJKLanguage = true
title = '筱霁技术博客'
weight = 1
[[zh.menu.main]]
url = '/'
name = '首页'
weight = 1
[[zh.menu.main]]
url = '/blog'
name = '文章'
weight = 2
[[zh.menu.main]]
identifier = "categories"
url = '/categories'
name = '类别'
weight = 3
[[zh.menu.main]]
identifier = "tags"
url = '/tags'
name = '标签'
weight = 4
[[zh.menu.main]]
url = '/archives'
name = '归档'
weight = 5
[[zh.menu.main]]
url = '/search'
name = '搜索'
weight = 6
[[zh.menu.main]]
url = '/about'
name = '关于'
weight = 7
[en]
languageCode = 'en'
languageName = 'English'
title = 'XiaoG Tech Blog'
hasCJKLanguage = true
weight = 2
[[en.menu.main]]
url = '/'
name = 'Home'
weight = 1
[[en.menu.main]]
url = '/blog'
name = 'Blog'
weight = 2
[[en.menu.main]]
identifier = "categories"
url = '/categories'
name = 'Category'
weight = 3
[[en.menu.main]]
identifier = "tags"
url = '/tags'
name = 'Tag'
weight = 4
[[en.menu.main]]
url = '/archives'
name = 'Archive'
weight = 5
[[en.menu.main]]
url = '/search'
name = 'Search'
weight = 6
[[en.menu.main]]
url = '/about'
name = 'About'
weight = 7
在languages.toml中我们配置网站支持英文和中文两种语言，菜单项有首页、博客、类别、标签、归档、搜索和关于。
博客的链接是/blog。我们在项目目录的content目录下创建blog目录，所有博客文章的MarkDown文件都将放在content/blog目录中。
根据Hugo的多语言支持规则，用户使用中文访问时看到的文章，MarkDown文件名末尾要添加.zh，英文文章文件名末尾添加.en。例如本文的中文版MarkDown文件名是technology-stack-about-this-website.zh.md，英文版文件名是technology-stack-about-this-website.en.md。
为了让PaperMod主题界面上的语言切换按钮显示名称是配置中的languageName而不是languageCode，还需要将displayFullLangName配置的值设置为true。我们将该配置写在网站配置文件hugo.toml中，在hugo.toml添加：
[params]
displayFullLangName = true
为了适应多语言显示，在content/blog目录下创建_index.zh.md文件，内容如下：
+++
title = '文章'
+++
其中文件名中的.zh对应语言配置中对应语言的languageCode值。
这样在用户使用中文访问网站时，文章列表页显示的标题就是文章，否则Hugo会自动推断标题是Blogs来显示。
分类
类别和标签页面是Hugo默认自动生成的分类页面。在页面的MarkDown文件中，可以通过Front Matter的categories和tags配置项设置文章的类别和标签。例如本文的categories和tags配置如下：
+++
categories = ['Hugo', 'Web开发']
tags = ['Hugo', 'Web开发']
+++
此时会发现/categories页面在英文和中文语言下显示的标题都是Categories，/tags页面在英文和中文语言下显示的标题都是Tags。但我希望在中文语言下/categories页面显示标题是类别，/tags页面显示标题是标签。
根据官网文档Taxonomies，要实现上述需求，需要在项目目录的content目录下创建categories和tags目录，并在两个目录中均创建文件_index.zh.md。
content/categories/_index.zh.md文件内容为：
+++
title = '类别'
+++
content/tags/_index.zh.md文件内容为：
+++
title = '标签'
+++
当用户使用中文访问网站，类别和标签页面就会显示其中文标题，而不是默认的英文标题。
归档
为了显示归档页，根据PaperMod主题的官方文档，我们在content目录下添加archives.en.md文件，内容如下：
---
title: "Archive"
layout: "archives"
url: "/archives/"
summary: archives
---
该文件对英语语言下的归档页面进行了配置。
同理，我们创建archives.zh.md文件，对中文语言下的归档页面进行配置，文件内容如下：
---
title: "归档"
layout: "archives"
summary: archives
---
搜索
PaperMod主题本身已经实现了基于fuse.js实现了客户端侧的网站全文搜索。
该搜索方法的优点是完全基于Hugo实现，服务侧不需要运行其它的搜索服务。缺点是用户搜索时需要下载索引文件，当网站页面较多时，索引文件较大可能会消耗大量服务器和用户的流量。
为了启用内置的搜索功能，首先在项目配置文件hugo.toml中修改输出格式配置：
[outputs]
home = ["HTML", "RSS", "JSON"]
其中HTML、RSS是Hugo默认会输出的文件格式，重点是添加JSON到输出文件中。
添加该配置后，Hugo会根据themes/PaperMod/layouts/_default/index.json，生成网站的索引文件index.json。
如果用户要修改输出的索引文件格式，可以在项目目录的layouts/_default目录中创建index.json文件，仿照PaperMod主题的index.json文件进行编写。编写完毕后需要删除themes/PaperMod/layouts/_default/index.json文件，否则Hugo会根据两个index.json文件生成最终的索引文件，导致网站页面可能被重复索引。
为了适应多语言支持，接下来在content目录下创建search.en.md和search.zh.md文件：
search.en.md内容如下：+++ title = 'Search' layout = 'search' +++search.zh.md内容如下：+++ title = '搜索' layout = 'search' placeholder = '搜素' +++
通过上述步骤，进入搜索页面即可使用PaperMod主题内置的搜索功能。
评论系统
本博客评论系统依托GitHub，使用giscus应用实现。接入步骤如下：
- GitHub上创建公开仓库，在仓库设置中启用
Discussions特征功能（在项目的Settings->General->Features下启用Discussions）。
- 访问giscus应用安装页面，点击安装按钮。安装完成后，在配置中选择我们创建的公开仓库。
- 访问giscus官网，在主页的Configuration小节中填选配置信息，参考配置如下：
repository中填写项目链接，格式是GitHub的用户名/项目名，例如本网站为XiaoGTech/XiaoGTechBlogComments。Page ↔️ Discussions Mapping中选择Discussion title contains page pathname。同时勾选下方的Use strict title matching选项，否则默认会使用模糊匹配，如果有页面的链接名包含在另一个页面的链接名中（例如blog/technology-stack-about-this-website/和/zh/blog/technology-stack-about-this-website/），可能会导致页面评论匹配错误。Discussion Category中选择Announcements。- 其它配置保持默认。
页面拉到Enable giscus小节，可以看到页面自动生成的giscus接入代码（一个<script>标签）。
我们在网站项目下创建目录layouts/partials，将文件themes/PaperMod/layouts/partials/comments.html拷贝到目录layouts/partials中，编辑拷贝后的文件，将giscus的接入代码复制到文件中（{{- /* Comments area start */ -}}到{{- /* Comments area end */ -}}中间）。
为了让评论系统显示的语言根据用户的语言变化，在comments.html中，我们需要对giscus生成的代码中data-lang一行进行修改。对于本网站，其修改结果如下：
{{ if eq .Lang "en" }}
data-lang="en"
{{ else if eq .Lang "zh" }}
data-lang="zh-CN"
{{else}}
data-lang="en"
{{ end }}
当用户访问英文页面（网站设置的语言代码是en），页面输出data-lang="en"。当用户访问简体中文页面（网站设置的语言代码是zh），页面输出data-lang="zh-CN"。
对于需要开启评论功能的文章，只需要在文章的front matter配置中添加comments = true即可以让页面加载评论功能模板。
部署网站
在更新网站完成后，在网站项目目录运行hugo命令，Hugo会把网站的所有静态页面生成在项目目录的public目录中。将public目录中的文件打包放到服务器上即可完成部署。