如何使用Hugo框架搭建一个快如闪电的静态网站

如何使用Hugo搭建一个快如闪电的静态网站

Hugo是世界上最受欢迎的静态网站生成器之一，这是有原因的。它不仅具有超快的构建处理能力，而且还具有强大的模板功能，支持参数和短代码。

在本教程中，你学会了如何配置Hugo，创建一个新项目，添加内容文件，编辑主题文件，并部署一个完成的静态网站。我们建议阅读Hugo的官方文档，以了解更多关于Hugo及其更高级的功能，如自定义函数、前台事务和CSS/JS buildpacks。

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

什么是Hugo框架？为什么它很受欢迎？
如何安装Hugo框架
Hugo框架命令和配置
如何创建一个Hugo网站
如何向Hugo网站添加主题
如何预览一个Hugo网站
如何向Hugo网站添加内容
如何部署一个Hugo网站

什么是Hugo框架？为什么它很受欢迎？

Hugo网站主页

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

作为一个静态网站生成器，Hugo接收Markdown内容文件，通过主题模板运行，并生成HTML文件，你可以很容易地在网上部署–而且它做这一切都非常快。

在2021年，有几十种，甚至几百种静态生成器。每个静态网站生成器都有其吸引力。Jekyll在Ruby开发者中很受欢迎，虽然它不像其他选项那样快，但它是最早看到广泛采用的静态网站生成器之一。Gatsby是另一个流行的SSG，很适合开发可静态部署的动态功能的网站。

那么，在这么多的SSG中，是什么让Hugo脱颖而出呢？

Hugo快如闪电

就原始性能而言，Hugo是世界上最好的静态网站生成器。与Jekyll相比，Hugo被Forestry证明是35倍的速度。同样，Hugo可以在10秒内渲染一个10,000页的网站，而这个任务需要Gatsby花半个多小时来完成。Hugo不仅在构建时间上是最快的SSG，而且它的安装也很迅速。

Hugo以独立的可执行文件的形式出现，而不像Jekyll、Gatsby和其他需要用包管理器安装依赖的SSG。这意味着你可以立即下载并使用Hugo，而不必担心软件的依赖性。

Hugo模板化很容易

在SSG的行话中，”templating” 指的是在HTML页面中为动态内容插入添加占位符的过程。要访问一个页面的标题，你可以使用 {{ .Title }} 变量。因此，在Hugo的HTML模板中，经常可以看到 {{ .Title }} 被包裹在H1标签中，像这样：

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

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

如何安装Hugo框架

Hugo以编译可执行文件的形式出现，这意味着你不必为了开始工作而下载和管理许多依赖关系。它可用于MacOS、Windows和Linux。

Important：下面的安装说明需要一个软件包管理器，它将为你下载Hugo的可执行文件。如果你喜欢从源码构建Hugo，请参考官方Hugo文档。

如何在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用户，Hugo可以使用Chocolatey或Scoop软件包管理器来安装。由于安装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项目的根目录下找到它。

Hugo配置文件

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

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

如果你以前使用过WordPress或其他CMS，一些配置选项可能对你来说很熟悉。例如，wbolt-static-site 是网站主题的名称，Wbolt Static Site 是SEO元标题， paginate （每页文章的数量）是5。

Hugo有几十个配置选项，所有这些你都可以在Hugo的官方文档中探索。如果你在开发Hugo网站时需要做任何全局配置的改变，有可能你需要编辑这个配置文件。

如何创建一个Hugo网站

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

要创建一个Hugo站点，请使用下面的命令（如果你愿意，可以把my-hugo-site改成其他名字）：

hugo new site my-hugo-site

创建一个新的Hugo站点

接下来，导航到网站文件夹，你应该看到以下文件和文件夹：config.toml文件、archhetypes文件夹、content文件夹、layouts文件夹、themes文件夹、data文件夹和static文件夹。让我们快速浏览一下这些文件和文件夹中的每一个是什么。

config.toml文件

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

Archetypes文件夹

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

例如，如果你有一个播客内容类型用于显示你的播客剧集，你可以在 archetypes/podcast.md 中创建一个新的archetype，内容如下：

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

有了这个播客archetype，你就可以使用下面的命令来创建一个新帖子：

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

现在，如果你打开新创建的帖子，你应该看到这个：

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

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

Content文件夹

content文件夹是你真正的帖子内容所在的地方。Hugo同时支持Markdown和HTML格式，Markdown因其易于使用而成为更受欢迎的选择。除了作为帖子的一般存储空间外，你还可以使用content文件夹来进一步组织帖子内容。

Hugo将内容文件夹中的每个顶级目录视为一个内容部分。Hugo中的内容区类似于WordPress中的自定义帖子类型。例如，如果你的网站有帖子、页面和播客，你的内容文件夹就会有posts, pages 和 podcasts 目录，这些不同的帖子类型的内容文件就会在这里。

Layouts文件夹

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

与WordPress主题使用PHP制作模板类似，Hugo模板由基本的HTML组成，并由Golang的内置 html/template 和 text/template 库提供额外的动态模板。生成你的网站的HTML标记所需的各种HTML模板文件都在layouts文件夹中。

Themes文件夹

对于那些喜欢用更独立的方式来存储模板文件和资产的网站，Hugo支持一个themes文件夹。Hugo的主题与WordPress的主题类似，它们被存储在一个主题目录中，并包含一个主题运作所需的所有模板。

虽然有些Hugo用户喜欢将主题相关的文件保存在项目的根目录中，但将这些文件保存在themes文件夹中，可以更方便地管理和分享。

Data文件夹

Hugo的data文件夹是你可以存储生成网站页面所需的补充数据（JSON、YAML或TOML格式）的地方。数据文件对于那些直接存储在内容或模板文件中可能很麻烦的大型数据集是很有好处的。

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

Static文件夹

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

如果你想知道为什么我们没有提到JavaScript或CSS文件，那是因为它们经常在网站开发过程中通过管道进行动态处理。在Hugo中，JavaScript和CSS文件通常被存储在theme文件夹中，因为它们需要额外的处理。

如何向Hugo网站添加主题

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

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

cd <hugo-project-directory>/themes/

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

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/：

Hugo本地开发服务器

如果你在你的网络浏览器中访问该URL，你应该看到你的Hyde主题的Hugo网站：

用Hyde主题显示的Hugo网站

默认情况下，Hugo的本地开发服务器将观察变化并自动重建网站。由于Hugo的构建速度非常快，你的网站的更新可以在近乎实时的情况下看到–这在静态网站生成器的世界里是很少见的。为了证明这一点，让我们在Hugo中创建我们的第一个帖子。

如何向Hugo网站添加内容

向Hugo网站添加内容与WordPress或Ghost等成熟的CMS非常不同。在Hugo中，没有内置的CMS层来管理你的内容。相反，你要按照你认为合适的方式来管理和组织内容。

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

Hugo的内容部分

在Hugo中，你所掌握的第一个内容组织工具是内容版块。Hugo中的内容区类似于WordPress中的文章类型–你不仅可以把它作为内容过滤器，而且在创建自定义主题时，你还可以把它作为一个标识。

例如，如果你有一个博客内容区文件夹，你可以用它来存储你所有的博客文章，并渲染一个只适用于博客文章的特定页面模板。

如何在Hugo中添加文章

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

让我们在post文件夹内创建另一个组织层，创建一个2021文件夹。在这一点上，你的content目录应该看起来像这样：

Hugo内容目录

现在，让我们来创建我们的第一个帖子。正如我们前面所讨论的，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

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

如果你打开新创建的内容文件，你应该看到在文件的顶部有几行元数据，看起来像这样：

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

这种以YAML为格式的元数据被称为 “front matter”。自动生成的front matter是使用Hugo CLI的一个重要好处。front matter是一个文章的唯一数据（文章名称、数据、草稿状态、标签、类别等）被存储的地方。front matter的默认格式可以在每个部分的基础上使用archetypes进行配置。

现在让我们给文章添加一些文字。在写文章时，一定要确保你的内容在前面的内容下面，像这样：

Hugo博客文章

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

Hugo网站重建

如果你在你的网络浏览器中访问你的Hugo网站，你应该看到新的文章。

Hugo网站有一个文章

如何在Hugo中添加一个页面

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

要创建一个页面，我们首先需要一个page内容部分。要做到这一点，在Hugo的content文件夹中创建一个名为pages的文件夹。之后，使用下面的命令，在你的网站上添加一个新的 “About” 页面：

hugo new pages/about.md

请注意页面的命名惯例与帖子的不同之处。与帖子不同，页面并不与一个特定的日期相联系，所以没有必要在文件名中包括创建日期。

现在，让我们为 “About” 页面添加一些文字：

Hugo上的关于页面

在这一点上，你应该在你的网络浏览器中看到 “About ” 页面：

浏览器上预览About页面

现在我们有了两个内容部分–帖子和页面–让我们来看看如何对网站进行一些定制，例如编辑标题和描述，在侧栏菜单中添加关于页面，改变permalinks的格式，以及从帖子feed中删除页面。

如何改变网站标题和描述

改变网站标题和描述的确切方法取决于你的网站配置和/或活动主题。在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}}

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

由于Hugo的默认配置使用My New Hugo Site作为网站标题，这就是侧边栏显示的内容。如果我们把config.toml中的网站标题改成别的东西，这个改变也会反映在前端。

让我们继续，把config.toml中的标题参数从My New Hugo Site改为Wbolt’s Hugo Site。

在Hugo中改变网站的标题

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

{{ 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默认呈现为”An elegant open source and mobile-first theme for Hugo made by @mdo. Originally made for Jekyll.”。

现在让我们更新我们的config.toml文件：

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

改为:

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

正如预期的那样，这些变化现在在前台也是可见的：

修改Hugo网站的描述

如何从文章Feed中删除页面

在大多数博客中，主页上的帖子feed通常只显示帖子。默认情况下，Hyde主题将所有的内容文件都包含在帖子feed中。要改变这种行为，你需要编辑index.html模板中的 range 函数，该模板生成了主页。

Hugo的 range 函数在一个定义好的项目集上进行迭代，然后对数据进行处理。默认情况下，Hyde主题的index.html模板会在.Site.RegularPages上进行迭代，并在渲染HTML之前过滤掉诸如固定链接、文章标题和文章摘要等数据。

由于 .Site.RegularPages 包括Hugo上的所有常规页面，包括帖子和页面，所以呈现的是 “About” 页面。通过将 range 项改为 .Site.RegularPages "Section" "posts"，我们可以指示Hugo只过滤post部分的常规页面–即我们之前创建的posts文件夹中的内容文件。

现在让我们通过编辑下面这个模板来做这个改变：

{{ 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 "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模板文件可以保持有序和易于阅读。虽然参数不是必须的，特别是对于基本的项目，但对于具有更复杂功能的大型项目来说，它们就很方便了。

如何在Hugo中使用短代码

Hugo短代码与准代码类似，它们允许在不同的页面上重复使用代码。短码是存放在/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短码来自动生成当前年份

使用Hugo短码来自动生成当前年份。

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

与WordPress和其他成熟的内容管理系统不同，Hugo不包括用于管理图像的拖放系统。因此，设计一个图片管理系统的任务就落在了最终用户身上。

虽然Hugo没有管理图片的标准方法，但有一种流行的方法是将图片存储在/static文件夹中，并在文章和页面中使用短码来引用它们。让我们来看看你如何在Hugo中进行基本的图片组织。

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

让我们从在/static中创建一个uploads文件夹开始。在uploads文件夹中，创建一个名为2021的文件夹，用来存放2021年上传的所有图片。

Hugo图像管理

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

将图像添加到 "2021" 文件夹

将图像添加到 “2021” 文件夹

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

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

虽然可以直接将这个HTML添加到Markdown内容文件中，但最好是创建一个短码，你可以用它来显示uploads文件夹中的任何图片。这样，如果你需要更新 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，创建一个网站，添加一个主题，对配置文件进行基本的编辑，以及用参数和简码扩展网站的功能。在这一点上，你应该有一个功能性的网站，并准备好在线部署。

由于Hugo是一个静态网站生成器，你可以把它生成的HTML、CSS和JS部署到任何有网络服务器的地方。由于服务静态网站的技术要求很低，你可以在Netlify、Vercel、Cloudflare Pages等众多供应商那里免费托管它们。

以前，我们使用 hugo server -D 来运作一个本地开发服务器，以实时预览我们网站的变化。为了完整地生成网站，我们可以在我们项目的根目录下使用 hugo 命令。网站生成完成后，你应该在你的项目目录中看到一个新的public文件夹。在这个文件夹里面，你会发现所有需要上传到服务器或云存储服务（如Amazon S3）的文件。

在本地生成你的Hugo网站

在本地生成网站并手动上传到Amazon S3或运行Nginx的服务器是部署静态生成网站的一种方式。然而，这并不是最有效的方法，因为它需要你在每次做出改变时手动上传新文件。

相反，一个更好的选择是将你的Hugo项目文件夹链接到GitHub仓库，并将GitHub仓库链接到Netlify等自动部署服务。通过这样的设置，你可以编辑你的网站，将修改推送到GitHub，并在Netlify上触发新的构建和部署，而不需要任何人工干预。现在，让我们来看看如何做到这一切吧!

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

首先，你需要为你的项目创建一个GitHub仓库。要做到这一点，请创建一个GitHub账户（如果你还没有），并下载官方的GitHub桌面应用。安装GitHub应用程序后，点击菜单栏中的File，选择新建仓库。给仓库取一个你喜欢的名字，其他选项暂时保持默认状态，然后点击New Repository。

创建一个 GitHub 仓库

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

接下来，把原来项目文件夹中的所有文件移到新的 GitHub 仓库文件夹中。一定要删除public文件夹，因为我们不需要将该文件夹上传到GitHub。

将项目复制到 GitHub 仓库文件夹中