通过Hugo搭建静态网站
静态网站简介
不同的博客框架都有各自的优缺点，其中Hugo号称全世界最快的静态网站构建框架，背后使用Go作为处理语言，适合用于生成拥有大量复杂页面的静态网站，本文基于Hugo以及Hinode主题为例，解析如何编写属于自己的静态网站，最后通过Netlify云服务提供商免费将自己的静态网站发布到互联网上。
Hugo前置概念
虚拟文件系统
执行命令 hugo new site my-site时，你将获得以下文件目录
my-site/
├── archetypes/
│ └── default.md
├── assets/
├── config/
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
└── hugo.toml
- archetypes: 该文件夹包含新文章(Markdonw)的模板, 我们定好新文章的模板，通过hugo命令直接创建文章骨架，例如帮我们自动生成时间。
- assets: 该文件夹包含全局资源，例如图片、视频和自定义样式文件(如果你想魔改主题的话)等。
- config: 该文件夹包含网站配置。
- data：该文件夹包含文章、布局模板或短代码所用到的一些数据，常见例如包含表格数据的Json文件。
- i18n: 该文件夹包含不同语言的短语翻译，用于构建多语言的国际化网站。
- layouts：该文件夹包含用于渲染Markdown文章的Html模板。
- static: 该文件夹用于存放最终需要拷贝到网站目录的文件，例如有些网络服务提供商或TLS证书颁发机构需要验证你自己域名的归属权，会要求你的网站目录下包含一些验证文件。
- themes：该文件夹包含Hugo主题文件，一般使用Hugo的Module系统引入主题，该文件夹可忽略。
- hugo.toml：该文件包含Hugo构建时的一些基础参数，例如引入的模块、网站的基地址等。
何为虚拟文件系统？虚拟文件系统是Hugo构建时所使用的一个目录结构，它可以根据不同的语言配置去挂载不同的文件目录到虚拟文件系统上，从而实现极高的灵活性。
官方有一个例子，我的 my-site/content文件夹拥有一些文章，而我的 shared-content/也拥有一些文章，我想合并 shared-content/的内容，同时不用移动这些文件。
my-site/
├── content/
│ ├── books/
│ │ ├── _index.md
│ │ ├── book-1.md
│ │ └── book-2.md
│ └── _index.md
├── themes/
│ └── my-theme/
└── hugo.toml
shared-content/
└── films/
├── _index.md
├── film-1.md
└── film-2.md
我们可以在 my-site/hugo.toml中设置以下参数，将 shared-content/挂载到 content/上，若文件发生重名，以第一次挂载的那个文件为准。
[module]
[[module.mounts]]
source = 'content'
target = 'content'
[[module.mounts]]
source = '/home/user/shared-content'
target = 'content'
内容管理
受hierarchical mental model of the web的启发，Hugo将内容划分为这样一个树状结构。在Hugo中只有 list和 single两种类型的页面，list负责集中展示下级页面，而 single则是最小的不可分页面。在 list页面里又可以划分为 taxonomy和 term两种类型，这是Hugo用于实现分类功能时添加进来的类型，例如常见的文档标签功能。
list还是 single，都可以有其 Markdown文件和 template文件用于渲染成最终的网页。content目录下的第一级 list页面我们一般叫做 section，section是Hugo中比较重要的概念，他通常用于决定页面所使用那些模板进行渲染。Hugo是以树状结构管理内容的，那Hugo是如何把内容与URL联系起来的呢？答案是Hugo以 content文件夹为相对路径，将文章映射到对应的URL路径上：
└── content
└── about
| └── index.md // <- https://example.org/about/
├── posts
| ├── firstpost.md // <- https://example.org/posts/firstpost/
| ├── happy
| | └── ness.md // <- https://example.org/posts/happy/ness/
| └── secondpost.md // <- https://example.org/posts/secondpost/
└── quote
| ├── first.md // <- https://example.org/quote/first/
| └── second.md // <- https://example.org/quote/second/
| └── index.md // <- https://example.org/about/
└── _index.md // <- https://example.org
你可能注意到了 _index.md和 index.md这两个文件，在Hugo中 _index.md用于书写 list页面的内容，而 index.md是用来干嘛的呢？Hugo引入了一个叫 page bundles的概念，将界面所需的静态资源维护进一个文件夹下，整个文件夹是一个 single页面。示例里 index.md用于提供 about页面的内容，可以在文件夹内维护一些类似图片之类的数据。
Hugo模板
Hugo真正强大的地方在于其模板技术。所谓模板其实是用于渲染Markdown文章的通用HTML代码片段。
└── layout
└── _default
| ├── baseof.html
| ├── list.html
| ├── single.html
| ├── taxonomy.html
| └── terms.html
├── partials
| ├── xxx.html
| └── xxx.html
├── shortcodes
| ├── xxx.html
| └── xxx.html
├── posts
| ├── list.html
| └── single.html
└── _index.html
_defult文件夹下用于设计网站最基础的骨架，一般是所有页面都会去共用的那部分代码。posts文件夹下包含用于设计 posts section的HTML代码，若一个 section希望更换另一个布局，可以在section的 _index.md文件中指定对应布局的名称。_index.html用于设计homepage的布局。
为了实现代码的重用，许多主题会把需要重复使用的模板定义在 partials文件夹下。此外主题开发者通常会提供一些个性化的短代码指令存储在 shortcodes文件夹下，在markdown文件下可以调用这些指令实现一些特殊效果。例如以下的 card-group短代码指令：
{{< card-group padding="3" gutter="3" >}}
{{< card title="Bootstrap framework" icon="fab bootstrap" >}}
Build fast, responsive sites with Bootstrap 5. Easily customize your site with the
source Sass files.
{{< /card >}}
{{< card title="Full text search" icon="fas magnifying-glass" >}}
Search your site with FlexSearch, a full-text search library with zero dependencies.
{{< /card >}}
{{< card title="Development tools" icon="fas code" >}}
Use Node Package Manager to automate the build process and to keep track of
dependencies.
{{< /card >}}
{{< /card-group >}}
Hugo主题
通过上面的介绍，你应该知道一个Hugo主题在干什么事情了，它主要的工作是提供用于呈现Markdown文件的HTML模板。我们需要手动将Hugo主题的模板文件复制到 layout文件夹下吗？你可以这么做，但我不建议你这么做，我们可以通过Hugo的模块系统直接导入主题的布局文件。以 hinode这个主题为例，它在 go.mod文件下引入了主题相关的模块。
module github.com/gethinode/template
go 1.20
require (
github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
github.com/gethinode/hinode v0.24.5 // indirect
github.com/gethinode/mod-bootstrap v1.3.0 // indirect
github.com/gethinode/mod-flexsearch v1.12.0 // indirect
github.com/gethinode/mod-fontawesome v1.9.0 // indirect
github.com/gethinode/mod-katex v1.1.0 // indirect
github.com/gethinode/mod-leaflet v1.1.0 // indirect
github.com/gethinode/mod-lottie v1.5.4 // indirect
github.com/gethinode/mod-utils/v2 v2.3.8 // indirect
github.com/gethugothemes/hugo-modules/videos v0.0.0-20240602022531-889cbf5dcf58 // indirect
github.com/nextapps-de/flexsearch v0.0.0-20240501124520-961c3ae84a87 // indirect
github.com/twbs/bootstrap v5.3.3+incompatible // indirect
)
那如果我想修改主题的模板文件怎么办？Hugo提供了 override功能，你可以在 layouts文件夹下创建一个与主题模板文件同名的文件，Hugo会优先使用你创建的模板文件。
网站参数配置
Hugo主题通常都会提供一些默认的配置，我们可以根据自己的情况进行适当的更改。一个主题通常会包含一下几个配置文件：
config/_default/menus：用于配置博客顶部菜单，通常都会支持到下拉菜单功能。config/_default/languages.toml：用于配置多国语言，主题一般都由国外人编写，一般不会带中文，可以在配置中添加中文的配置。config/_default/params.toml：该配置文件包含由主题开发者提供的可调节的所有参数。config/_default/hugo.toml: 该配置文件包含了Hugo构建时所需要的参数。
config/_default/下的*.toml文件，为了方便管理，我们一般将一些相似的配置配置到指定文件里。对于网站参数，我们先了解一个大概，特别解释一个在Hugo中比较重要的参数—–baseURL，这个参数用于指定Hugo最终生成的静态资源的前缀地址，千万要在正式发布构建之前修改这个参数为你的地址。
baseURL = "https://rubitcat.cn"
languageCode = "zh-CN"
defaultContentLanguage = "zh"
defaultContentLanguageInSubdir = false
disableLanguages = ["en"]
创建静态网站
前面讲述的内容学废了？没关系，我们可以先迈开建站第一步，往后再进行详细的了解Hugo种种特性。接下来我们将使用Hugo以及Hinode主题，从0到1创建一个网站！
环境准备
为了编写Hugo网站，我们需要以下必要工具，可以跟着步骤一步步安装：
- Git：用于博客网站的版本控制以及下载Hugo主题。
- Visual Studio Code：用于进行博客网站的编写。
- Hugo：用于预览博客网站以及生成静态网站文件。
- Nodejs：用于管理主题所需的前端模块以及流程自动化。
克隆主题模板
若你已完成基础环境的准备，接下来就可以开始创建你的网站了。首先，我们需要克隆Hinode主题的模板文件。 Windows用户你可以使用以下命令进行克隆：
$SITE_NAME="网站文件夹名称"
git clone https://github.com/gethinode/template.git $SITE_NAME
Linux用户你可以使用以下命令进行克隆：
SITE_NAME = "网站文件夹名称"
git clone https://github.com/gethinode/template.git $SITE_NAME
当完成模板克隆，你将获得以下目录：
template/
├── archetypes
├── assets
├── config
├── content
├── data
├── go.mod
├── go.sum
├── hugo_stats.json
├── i18n
├── layouts
├── LICENSE
├── netlify.toml
├── package.json
├── package-lock.json
├── README.md
└── static
修改网站参数
👉修改网站语言设置：
[zh-cn]
languageName = "中文"
contentDir = "content/"
weight = 1
[zh.params.head]
tagline = ""
[zh.params.social]
title = "RubitCat"
caption = "每个优秀的人，都有一段沉默的时光。那段时光，是付出了很多努力，却得不到结果的日子，我们把它叫做扎根。"
[zh.params.sections.blog]
reference = "更多文章"
[zh.params.sections.projects]
reference = "更多项目"
为了主题进行能够对短语进行翻译，我们还需要创建一个翻译文件在i8n目录下, 请在该文件夹下创建一个叫zh.yaml的文件并复制以下翻译内容进来：
👉修改Hugo配置：
title = "RubitCat" # 设置网站标题
copyright = "Copyright © 2022 - 2100 RubitCat All Rights Reserved." # 设置网站版权信息
baseURL = "https://rubitcat.cn" # 设置网站基地址
defaultContentLanguage = "zh" # 设置网站语言，值为`config/_default/languages.toml`中设置的语言代号
defaultContentLanguageInSubdir = false # 设置默认语言的内容的URL是否添加语言前缀，我们使用单语言设置，此处设置为false
预览并构建网站
windows在Powershell中，Linux在Bash中执行以下命令启动Hugo预览服务器：
npm install
npm run upgrade
npm run start
当命令执行完毕，打开你的浏览器输入http://localhost:1313迎接你的第一个网页吧！
当我们想构建正式环境的静态文件，我们可以执行以下命令，静态资源文件将保存在public文件夹中：
npm run build
编写第一篇博客
在content/blog文件夹下创建一个first-post.md文件，并输入以下内容：
---
title: "Hello, Hugo!"
date: 2022-07-02T21:10:36+08:00
draft: false
tags: ["Hugo", "RubitCat"]
categories: ["Hugo"]
---
重新打开http://localhost:1313，你将看到你刚刚编写的第一篇博客：
发布静态网站
当我们成功构建网站后，下一步就是将网站这些静态文件发布到服务器上去，我们可以选择将网站发布到静态网站服务提供商供互联网访问，也可以发布到自建Nginx服务器上供内网用户使用。
发布到静态网站提供商
当下有很多静态网站提供商，由于国内内容监管的缘故，这些静态网站提供商大多属于海外公司。经过笔者的实验，Netlify提供的服务在中国大陆的访问速度还行，免费计划每个月有100GB的流量，完全满足一个个人博客网站的流量需求。
结尾
在互联网基础设施高度完善的今天，每个人都可以轻松的搭建一个属于自己的网站，成为互联网无数节点中的一员。在互联网中，我们可以发布公开信息，亦或分享收获心得，在畅所欲言之际我们也需要注意信息安全问题，关乎国家或个人的敏感信息不要通过网络进行传播。
最后进行一下全文总结。静态网站是一类无需配置复杂业务逻辑的网站，将静态网站的资源文件发布到服务器即可进行访问。Hugo是一类静态网站生成器，文章从Hugo的内容目录结构、模板引擎和配置文件三个角度介绍了Hugo的一些重要概念和配置。最后是以Hinode这个主题为例，进行网站创建实操以及网站发布。希望这篇文章能帮助到大家。