如何使用 Hugo 构建一个超快的静态站点

Hugo 是一个用 Go（又名 Golang）编写的静态站点生成器（SSG），Go 是一种高性能编译编程语言，通常用于开发后端应用程序和服务。

今天，Hugo 能够在几秒钟内生成大多数网站（每页<1 ms）。 这就解释了为什么 Hugo 将自己标榜为“世界上最快的网站构建框架”。

在本文中，我们将了解 Hugo 的历史，是什么让它如此之快，以及如何开始构建自己的 Hugo 静态站点。

什么是雨果？ 为什么它很受欢迎？

Steve Francia 最初于 2013 年开发了 Hugo 静态站点生成器，Bjrn Erik Pedersen 于 2015 年接任该项目的首席开发人员。Hugo 是一个开源项目，这意味着任何人都可以查看和改进其代码。

作为一个静态站点生成器，Hugo 获取 Markdown 内容文件，通过主题模板运行它们，并生成您可以轻松在线部署的 HTML 文件——而且它完成所有这一切的速度非常快。

2021 年，即使不是数百台，也有数十台静态发生器。 每个静态站点生成器都有其吸引力。 Jekyll 在 Ruby 开发人员中很受欢迎，虽然它没有其他选项那么快，但它是第一个被广泛采用的静态站点生成器之一。 Gatsby 是另一种流行的 SSG，它非常适合开发具有动态功能的静态可部署站点。

那么，有这么多 SSG，是什么让 Hugo 脱颖而出？

雨果很快

就原始性能而言，Hugo 是世界上最好的静态站点生成器。 与 Jekyll 相比，Forestry 显示 Hugo 的速度要快 35 倍。 类似地，Hugo 可以在 10 秒内渲染一个 10,000 页的网站，这项任务需要 Gatsby 半个多小时才能完成。 Hugo 不仅在构建时间方面是最快的 SSG，而且安装速度也很快。

Hugo 作为一个独立的可执行文件发布，这与 Jekyll、Gatsby 和其他需要使用包管理器安装依赖项的 SSG 不同。 这意味着您可以立即下载和使用 Hugo，而不必担心软件依赖性。

在 Hugo 中模板很容易

在 SSG 术语中，“模板化”是指为 HTML 页面中的动态内容插入添加占位符的过程。 要访问页面的标题，您可以使用{{ .Title }}变量。 因此，在 Hugo HTML 模板中，通常会看到{{ .Title }}包裹在 H1 标签中，如下所示：

 <h1>{{ .Title }}</h1>

在构建时，Hugo 会自动抓取内容文件中的标题，并在两个<h1>标签之间插入标题。 Hugo 有多种内置的模板变量，您甚至可以编写自定义函数来在构建时处理数据。 对于模板，Hugo 使用 Go 内置的html/template和text/template库。 这有助于减少应用程序膨胀，因为 Hugo 不需要为模板安装第三方库。

这是一个来自流行的 Ananke 主题的index.html主页模板的示例。 如您所见，它类似于带有一些附加模板代码的标准 HTML 文件：

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

如何安装雨果

Hugo 以编译后的可执行文件形式发布，这意味着您无需下载和管理许多依赖项即可开始使用。 它适用于 macOS、Windows 和 Linux。

如何在 macOS 和 Linux 上安装 Hugo

macOS 和 Linux 的推荐安装方法需要 Homebrew，这是一个用于安装和更新应用程序的包管理器。 如果您还没有安装 Homebrew，您可以通过在终端中运行以下命令来安装它：

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装 Homebrew 后，运行以下命令安装 Hugo：

 brew install hugo

如何在 Windows 上安装 Hugo

对于 Windows 用户，可以使用 Chocolatey 或 Scoop 包管理器安装 Hugo。 由于安装 Chocolatey 和 Scoop 的说明比 Homebrew 复杂一些，我们建议在此处和此处参考他们的官方文档页面。

安装 Chocolatey 或 Scoop 后，您可以使用以下命令之一安装 Hugo（取决于您的包管理器）：

 choco install hugo-extended -confirm

 scoop install hugo-extended

如何验证 Hugo 是否安装正确

要验证 Hugo 是否已正确安装，请运行以下命令：

 hugo version

此终端命令应输出有关当前安装的 Hugo 版本的信息，如下所示：

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Hugo 命令和配置

在我们深入使用 Hugo 创建静态站点之前，让我们熟悉一下它的各种 CLI 命令和配置文件参数。

Hugo CLI 命令

• hugo check – 运行各种验证检查
• hugo config – 显示 Hugo 站点的配置
• hugo convert – 将内容转换为不同的格式
• hugo deploy – 将您的站点部署到云提供商
• hugo env – 显示 Hugo 版本和环境信息
• hugo gen – 提供对各种生成器的访问
• hugo help – 显示有关命令的信息
• hugo import – 让您从其他位置导入站点
• hugo list – 显示各种内容类型的列表
• hugo mod – 提供对各种模块助手的访问
• hugo new – 让您为您的网站创建新内容
• hugo server – 启动本地开发服务器
• hugo version – 显示当前的 Hugo 版本

Hugo CLI 也有各种标志来指定一些命令的附加选项。 要查看 Hugo 标志的完整列表（有很多），我们建议使用hugo help命令显示所有可用标志的列表。

Hugo 配置文件

Hugo 的配置文件支持三种格式：YAML、TOML、JSON。 同样，Hugo 配置文件是config.yml 、 config.toml或config.json ，您可以在 Hugo 项目的根目录中找到它。

下面是一个典型的 YAML 格式的 Hugo 配置文件的样子：

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

如果您以前使用过 WordPress 或其他 CMS，则某些配置选项可能对您来说很熟悉。 例如， kinsta-static-site是网站主题的名称， Kinsta Static Site是 SEO 元标题， paginate （每页的帖子数）是5 。

Hugo 有几十个配置选项，您可以在 Hugo 官方文档中探索所有这些选项。 如果您在开发 Hugo 站点时需要进行任何全局配置更改，您可能需要编辑此配置文件。

如何创建雨果网站

现在我们已经了解了如何安装和使用 Hugo CLI 以及 Hugo 配置文件的基础知识，让我们创建一个新的 Hugo 站点。

要创建 Hugo 站点，请使用以下命令（如果您愿意，可以将my-hugo-site更改为其他内容）：

 hugo new site my-hugo-site

接下来，导航到站点文件夹，您应该会看到以下文件和文件夹： config.toml文件、 archetypes文件夹、内容文件夹、布局文件夹、主题文件夹、数据文件夹和静态文件夹。 让我们快速回顾一下这些文件和文件夹是什么。

Hugo 的 config.toml 文件

正如我们上面强调的，Hugo 的主要配置文件包含您站点的全局设置。

雨果的原型文件夹

archetypes文件夹是您存储 Markdown 格式的内容模板的地方。 如果您的网站具有多种内容格式，则原型特别有用。 使用 Hugo 原型，您可以为网站上的每种内容类型创建一个模板。 这使您可以使用所有必要的配置设置预先填充生成的 Markdown 文件。

例如，如果你有一个播客内容类型来显示你的播客片段，你可以在archetypes/podcast.md中创建一个新的原型，其内容如下：

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

使用此播客原型，您可以使用以下命令创建新帖子：

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

现在，如果您打开新创建的帖子，您应该会看到：

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

如果没有原型，您将不得不为您创建的每个新帖子手动指定前端参数。 虽然原型起初可能看起来很复杂且不必要，但从长远来看，它们最终可以为您节省大量时间。

雨果的内容文件夹

内容文件夹是您的实际帖子内容所在的位置。 Hugo 同时支持 Markdown 和 HTML 格式，Markdown 因其易用性而成为更受欢迎的选项。 除了作为帖子的一般存储空间之外，您还可以使用内容文件夹来进一步组织帖子内容。

Hugo 将content文件夹中的每个顶级目录视为一个内容部分。 Hugo 中的内容部分类似于 WordPress 中的自定义帖子类型。 例如，如果您的站点有帖子、页面和播客，那么您的内容文件夹将包含帖子、页面和播客目录，这些不同帖子类型的内容文件将存放在这些目录中。

Hugo 的布局文件夹

layouts文件夹包含定义站点结构的 HTML 文件。 在某些情况下，您可能会看到没有layouts文件夹的 Hugo 站点，因为它不必位于项目的根目录中，而是可以位于主题文件夹中。

与使用 PHP 进行模板化的 WordPress 主题类似，Hugo 模板由基本 HTML 和由 Golang 内置的html/template和text/template库提供支持的附加动态模板组成。 生成站点的 HTML 标记所需的各种 HTML 模板文件位于layouts文件夹中。

雨果的主题文件夹

对于喜欢以更独立的方式存储模板文件和资产的站点，Hugo 支持主题文件夹。 Hugo 主题与 WordPress 主题相似，因为它们存储在主题目录中，并包含主题运行所需的所有模板。

虽然一些 Hugo 用户更喜欢将主题相关的文件保存在项目的根目录中，但将这些文件存储在主题文件夹中可以更轻松地管理和共享。

雨果数据文件夹

Hugo 的数据文件夹是您可以存储生成站点页面所需的补充数据（JSON、YAML 或 TOML 格式）的地方。 数据文件有利于直接存储在内容或模板文件中的较大数据集。

例如，如果您想创建一个从 1960 年到 2020 年的美元通胀率列表，则需要大约 80 行来表示数据（每年一行）。 您可以在数据文件夹中创建它并用必要的信息填充它，而不是将这些数据直接放在内容或模板文件中。

Hugo 静态文件夹

Hugo 的静态文件夹是您存储不需要任何额外处理的静态资产的地方。 静态文件夹通常是 Hugo 用户存储图像、字体、DNS 验证文件等的地方。 当一个 Hugo 站点生成并保存到一个文件夹以便于部署时，静态文件夹中的所有文件都按原样复制。

如果您想知道为什么我们没有提到 JavaScript 或 CSS 文件，那是因为它们通常在站点开发期间通过管道动态处理。 在 Hugo 中，JavaScript 和 CSS 文件通常存储在主题文件夹中，因为它们需要额外的处理。

如何将主题添加到 Hugo 网站

下载和安装预制主题是开始使用 Hugo 的好方法。 Hugo 主题有各种形状和大小，其中许多都可以在官方 Hugo 主题存储库中免费获得。 让我们继续在我们的 Hugo 网站上安装流行的 Hyde 主题。

首先，导航到终端中项目的主题文件夹：

 cd <hugo-project-directory>/themes/

接下来，使用 Git 将 Hyde 主题克隆到项目的主题目录中。

 git clone https://github.com/spf13/hyde.git

接下来，将以下行添加到您的config.toml文件以激活 Hyde 主题：

 theme = "hyde"

至此，Hyde 主题安装并配置完毕。 下一步是启动 Hugo 的内置开发网络服务器，以在您的网络浏览器中查看该站点。

如何预览 Hugo 网站

Hugo 附带了一个用于开发目的的集成网络服务器，这意味着您无需安装第三方网络服务器（如 Nginx 或 Apache）就可以在本地查看您的站点。

要启动 Hugo 的网络服务器，请在项目的根目录中运行以下命令：

 hugo server -D

然后，Hugo 将构建您网站的页面并在http://localhost:1313/上提供它们：

如果您在 Web 浏览器中访问 URL，您应该会看到带有 Hyde 主题的 Hugo 站点：

默认情况下，Hugo 的本地开发服务器将监视更改并自动重建站点。 由于 Hugo 的构建速度如此之快，因此可以近乎实时地看到对您网站的更新——这在静态网站生成器世界中是很少见的。 为了证明这一点，让我们在 Hugo 中创建我们的第一个帖子。

如何向 Hugo 网站添加内容

向 Hugo 网站添加内容与 WordPress 或 Ghost 等成熟的 CMS 非常不同。 使用 Hugo，没有内置的 CMS 层来管理您的内容。 相反，您应该按照您认为合适的方式管理和组织事物。

换句话说，在 Hugo 中没有明确的“正确”方式来进行内容管理。 我们将在本节中分享一种添加和管理内容的方法，但随着您对 Hugo 的熟悉，可以随意更改。

Hugo 中的内容部分

在 Hugo 中，您可以使用的第一个内容组织工具是内容部分。 Hugo 中的内容部分类似于 WordPress 中的帖子类型 - 您不仅可以将其用作内容过滤器，还可以在创建自定义主题时将其用作标识符。

例如，如果您有一个博客内容部分文件夹，您可以使用它来存储您的所有博客文章并呈现仅适用于博客文章的特定页面模板。

如何在 Hugo 中添加帖子

考虑到这一点，让我们为博客文章创建一个内容部分并添加一些内容。 在项目的内容文件夹中创建一个名为posts的新文件夹——这是内容部分。

让我们通过创建2021文件夹在帖子文件夹中创建另一个组织层。 此时，您的内容目录应如下所示：

现在，让我们创建我们的第一个帖子。 正如我们之前讨论的，Hugo 支持 Markdown 和 HTML 文件的内容。 一般来说，最好坚持使用 Markdown 文件，因为它们更容易编写、格式化和阅读。

在content/posts/2021文件夹中，创建一个以.md （Markdown 文件扩展名）结尾的新文件。 您可以随意命名文件，但命名 Hugo 内容文件的推荐语法是YYYY-MM-DD-a-sample-post.md 。

除了手动创建内容文件，您还可以使用 Hugo CLI 使用以下命令创建新帖子（请务必从项目目录运行该命令）：

 hugo new posts/2021/2021-08-30-a-sample-post.md

请注意上面的路径中缺少内容文件夹。 这是因为 Hugo 假设默认情况下所有内容文件都将进入内容文件夹。

如果您打开新创建的内容文件，您应该会在文档顶部看到几行元数据，如下所示：

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

这种以 YAML 格式格式化的元数据被称为“前端”。 自动生成的前端内容是使用 Hugo CLI 的一大好处。 最重要的是存储帖子的唯一数据（帖子名称、数据、草稿状态、标签、类别等）的位置。 可以使用原型在每个部分的基础上配置前端的默认格式。

现在让我们在帖子中添加一些文本。 撰写帖子时，请始终确保您的内容低于前面的内容，如下所示：

保存内容文件后，您应该会看到 Hugo 在终端中重建您的站点。 在下面的截图中，你可以看到 Hugo 在 22 毫秒内重建了整个网站！

如果您在网络浏览器中访问 Hugo 网站，您应该会看到新帖子。

如何在 Hugo 中添加页面

现在我们已经向 Hugo 站点添加了一个帖子，让我们添加一个页面。 大多数内容管理系统，包括 WordPress，都区分帖子和页面。 通常，帖子是一段过时的内容，而页面由常青或静态内容组成。

要创建一个页面，我们首先需要一个页面内容部分。 为此，请在 Hugo 的内容文件夹中创建一个名为pages的文件夹。 之后，使用以下命令将新的“关于”页面添加到您的站点：

 hugo new pages/about.md

请注意页面的命名约定与帖子的不同之处。 与帖子不同，页面与特定日期无关，因此无需在文件名中包含创建日期。

现在，让我们在“关于”页面中添加一些文本：

此时，您应该会在 Web 浏览器中看到“关于”页面：

现在我们有两个内容部分——帖子和页面——让我们来看看如何对网站进行一些自定义，例如编辑标题和描述、将“关于”页面添加到侧边栏菜单、更改永久链接的格式以及删除来自帖子提要的页面。

如何更改网站标题和描述

更改站点标题和描述的确切方法取决于您的站点配置和/或活动主题。 对于 Hyde 主题，可以在 Hugo 配置文件 ( config.toml ) 中更改站点标题和描述。

我们之所以知道这一点，是因为以下呈现侧边栏的主题代码：

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

需要重点关注的两个部分是：

 {{ .Site.Title }}

和…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

把手{{ }}是 Hugo 模板引擎的一部分，允许在渲染页面中动态生成数据。 例如， {{ .Site.Title }}指示 Hugo 检查config.toml文件并获取映射到Title键的值。

由于 Hugo 的默认配置使用My New Hugo Site作为站点标题，因此侧边栏显示的是这样的。 如果我们将config.toml中的站点标题更改为其他内容，该更改也会反映在前端。

让我们继续将config.toml中的 title 参数从My New Hugo Site更改为Kinsta's Hugo Site 。

转到站点描述，您可以看到 Hugo 的模板引擎支持条件逻辑。 翻译成简单的英语，下面的代码指示 Hugo 检查是否将Params值分配给config.toml文件中的描述键。 如果没有，这里有一个默认字符串来代替。

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

由于我们没有在config.toml文件中配置描述，因此 Hugo 默认呈现“@mdo 为 Hugo 制作的优雅的开源和移动优先主题。 最初是为杰基尔制作的。”

现在让我们从以下位置更新我们的config.toml文件：

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

到：

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

正如预期的那样，这些更改现在也可以在前端看到：

如何从帖子提要中删除页面

在大多数博客上，主页上的帖子提要仅显示帖子是很常见的。 默认情况下，Hyde 主题包括帖子提要中的所有内容文件。 要更改此行为，您需要编辑index.html模板中的range函数，该模板会生成主页。

Hugo 的range函数迭代定义的一组项目，然后对数据进行处理。 默认情况下，Hyde 主题的index.html模板覆盖.Site.RegularPages ，并在呈现 HTML 之前过滤掉永久链接、帖子标题和帖子摘要等数据。

由于.Site.RegularPages包含 Hugo 上的所有常规页面，包括帖子和页面，因此会呈现“关于”页面。 通过将range项目更改为.Site.RegularPages "Section" "posts" ，我们可以指示 Hugo 仅过滤帖子部分中的常规页面——我们之前创建的帖子文件夹中的内容文件。

现在让我们通过编辑以下模板来进行更改：

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

对此：

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

进行此更改后，主页将仅显示如下帖子：

如何在 Hugo 中使用分部

Hugo 最强大的模板功能之一是 partials——嵌入在另一个 HTML 模板中的 HTML 模板。 部分允许跨不同模板文件重用代码，而无需管理每个文件中的代码。

例如，通常会在其单独的部分文件中看到不同的页面部分（页眉、页脚等），然后在主题的baseof.html模板文件中调用这些部分。

在 Ananke 主题的baseof.html文件中，您可以在第 18 行看到一个 partial 示例 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} 。

在这种情况下， {{ partial "site-style.html" . }} {{ partial "site-style.html" . }}指示 Hugo 将第 18 行的内容替换为/layouts/partials文件夹中的site-style.html 。 如果我们导航到/partials/site-style.html ，我们会看到以下代码：

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

通过将此代码卸载到单独的文件中， baseof.html模板文件可以保持井井有条且易于阅读。 虽然partials 不是必需的，特别是对于基本项目，但对于功能更复杂的大型项目，它们会派上用场。

如何在 Hugo 中使用简码

Hugo 短代码类似于 partials，因为它们允许跨各种页面重用代码。 简码是位于/layouts/shortcodes文件夹中的 HTML 文件。 主要区别在于部分适用于 HTML 模板，而短代码适用于 Markdown 内容页面。

在 Hugo 中，短代码允许您开发功能模块，您可以在整个站点的页面中使用这些模块，而无需管理每个页面的代码更改。

如果您经营一个博客，您可能需要浏览帖子的正文内容以更新对当前年份的年份参考。 根据您网站上的帖子数量，此任务可能需要很长时间！

通过在您的内容文件中使用 Hugo 短代码，您将不必再担心更新年份参考！

让我们首先在/layouts/shortcodes/current_year.html中创建一个短代码，其内容如下：

 {{ now.Format "2006" }}

短代码可以使用这种语法嵌入到帖子中 - {{< shortcode_name >}} 。 在我们的例子中，我们可以使用{{< shortcode_name >}}调用current_year.html短代码，如下所示：

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

如果您在网络浏览器中查看帖子，您应该会在帖子的第一行看到当前年份，如下所示：

如何在 Hugo 的帖子中添加图片

与 WordPress 和其他成熟的内容管理系统不同，Hugo 不包含用于管理图像的拖放系统。 因此，设计图像管理系统的工作交给了最终用户。

虽然 Hugo 没有标准化的图像管理方法，但一种流行的方法依赖于将图像存储在/static文件夹中，并使用简码在帖子和页面中引用它们。 让我们来看看如何在 Hugo 中进行基本的图像组织。

我们需要做的第一件事是为我们的图像库创建一个组织结构。 虽然这听起来很复杂，但所需要的只是在/static文件夹中创建一些额外的目录。

让我们首先在/static中创建一个上传文件夹。 在uploads文件夹中，创建一个名为2021的文件夹，用于存放 2021 年上传的所有图像。

接下来，让我们将两个图像（ blue1.jpg和blue2.jpg ）添加到2021文件夹中。

在 HTML 中，图像使用<img>标签显示。 例如，要显示blue1.jpg ，我们可以使用下面的 HTML：

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

虽然可以将此 HTML 直接添加到 Markdown 内容文件中，但最好创建一个短代码，您可以使用它来显示上传文件夹中的任何图像。 这样，如果您需要更新img标签，您可以编辑简码模板，而无需编辑img标签的每个实例。

要创建简码模板，请在/layouts/shortcodes/img.html中创建一个包含以下内容的新文件：

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

接下来，将以下短代码添加到博客文章中：

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

在简码模板中， {{ .Get "src" }}和{{ .Get "alt" }}指示 Hugo 在调用简码时获取src<和alt<参数的内容。

现在，如果您重新加载博客文章，您应该会看到如下图像：

如何部署 Hugo 站点

到目前为止，您学习了如何安装 Hugo、创建站点、添加主题、对配置文件进行基本编辑以及使用部分和短代码扩展站点的功能。 此时，您应该有一个可以在线部署的功能站点。

由于 Hugo 是一个静态站点生成器，因此您可以使用 Web 服务器将它生成的 HTML、CSS 和 JS 部署到任何地方。 由于提供静态站点的技术要求非常低，因此您可以在 Netlify、Vercel、Cloudflare Pages 等众多提供商中免费托管它们。

以前，我们使用hugo server -D启动本地开发服务器来实时预览对我们网站的更改。 要完整生成站点，我们可以使用项目根目录下的hugo命令。 站点生成完成后，您应该会在项目目录中看到一个新的公用文件夹。 在此文件夹中，您会找到所有需要上传到服务器或云存储服务（如 Amazon S3）的文件。

在本地生成站点并手动将其上传到 Amazon S3 或运行 Nginx 的服务器是部署静态生成站点的一种方式。 但是，它并不是最有效的，因为它需要您在每次进行更改时手动上传新文件。

相反，更好的选择是将 Hugo 项目文件夹链接到 GitHub 存储库，并将 GitHub 存储库链接到 Netlify 等自动化部署服务。 通过此设置，您可以编辑您的站点，将更改推送到 GitHub，并在 Netlify 上触发新的构建和部署，而无需任何手动干预。 现在，让我们来看看如何做到这一切！

如何将你的 Hugo 项目上传到 GitHub

首先，您需要为您的项目创建一个 GitHub 存储库。 为此，请创建一个 GitHub 帐户（如果您还没有）并下载官方 GitHub 桌面应用程序。 安装 GitHub 应用程序后，单击菜单栏中的File并选择New Repository 。 为存储库命名您选择的名称，暂时将其他选项保留为其默认状态，然后单击Create Repository 。

默认情况下（在 macOS 上），GitHub 应用程序在/Users/username/Documents/GitHub中创建新的存储库。 由于我们将存储库命名为my-hugo-site ，因此可以在/Users/brianli/Documents/GitHub/my-hugo-site找到我们的存储库。

接下来，将原始项目文件夹中的所有文件移动到新的 GitHub 存储库文件夹中。 请务必删除公用文件夹，因为我们不需要将该文件夹上传到 GitHub。

如果您导航回 GitHub 应用程序，您现在应该会看到已更改文件的列表。 要将存储库上传到 GitHub，请添加摘要，单击Commit to main ，然后单击右上角的Publish Repository 。

默认情况下，选中“将此代码保密”选项。 如果您希望您的代码是开源的并且可以公开访问，请随意取消选中它。 Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

由于 Hugo 是一个如此快速的静态站点生成器，因此部署一个基本站点应该只需要几秒钟。 部署完成后，您将能够在 Netlify 仪表板中看到暂存 URL。 单击 URL 以查看已部署的站点。

这是我们在 Netlify 上的 Hugo 网站。 如您所见，它与我们本地环境中的站点相同：

此时，您可以为您的 Netlify 托管站点设置自定义域和 SSL 证书。 为此，我们建议参考 Netlify 官方文档。

由于我们已将 Netlify 链接到 GitHub，对 Hugo 项目 GitHub 存储库的新提交将自动触发 Netlify 上的新部署！

概括

Hugo 是世界上最受欢迎的静态站点生成器之一，这是有充分理由的。 它不仅具有超快速的构建处理，而且还具有强大的模板功能，支持部分和短代码。

在本教程中，您学习了如何配置 Hugo、创建新项目、添加内容文件、编辑主题文件以及部署完成的静态站点。 我们建议阅读官方 Hugo 文档以了解有关 Hugo 及其更高级功能的更多信息，例如自定义函数、前端和 CSS/JS 构建包。

你对 Hugo 和其他静态网站生成器有什么看法？ 请在下面的评论中告诉我们！