如何构建和部署Hugo站点到DigitalOcean应用平台

Hugo 是一个静态站点生成器和构建网站的框架。使用 Hugo，您可以使用 HTML 定义主题并使用 Markdown 或其他文本处理器构建内容。 Hugo 生成可以在任何地方托管的 HTML。

在本教程中，您将使用 Hugo 构建一个小型静态网站，并使用 GitHub 将该网站部署到 DigitalOcean 的 App Platform。然后，您将对您的站点进行更改，并查看自动部署的这些更改。

先决条件

要完成本教程，您需要：

一个 DigitalOcean 帐户。
一个GitHub账号。
Git 安装在本地机器上。您可以按照教程贡献开源：Git 入门在您的计算机上安装和设置 Git。
一个文本编辑器。您可以使用 Visual Studio Code 或您喜欢的文本编辑器。

第 1 步 — 安装 Hugo

要构建您的 Hugo 站点，您将在本地计算机上安装 hugo 命令行工具。您将使用此工具来生成您的站点、创建内容页面并启动一个小型服务器，您将在部署站点之前使用它来测试您的站点。

Hugo 以单个二进制文件的形式提供，因此安装过程包括将文件下载到您的计算机并将其放置在您的路径上。

从 GitHub 上的发布页面下载 Hugo。 Hugo 有两个版本：普通版和扩展版。下载扩展版本，以便您支持资产管理和 CSS 预处理。将文件保存到您的 Downloads 目录。

下载文件后，您需要解压缩文件并将其放在系统 PATH 中的某个位置，以便您可以从任何目录运行该文件。

在Windows上，创建目录C:\Hugo，解压你下载的文件，并将它放在C:\hugo中。然后将该文件夹添加到您的 PATH 环境变量中。为此，请使用 Windows 搜索并键入“环境”。选择编辑我的帐户的环境变量。在出现的屏幕上，按环境变量按钮，在系统变量部分找到PATH，然后按编辑按钮。在文本区域添加c:\hugo\bin，然后按OK保存设置。在其余对话框上按 OK 以关闭它们。

在 macOS 或 Linux 上，将可执行文件复制到 /usr/local/bin，因为默认情况下它已包含在您的 PATH 环境变量中。

首先，切换到下载目录：

cd ~/Downloads

解压文件：

tar zxvf hugo_extended_0.75.1*.gz

然后将文件移动到/usr/local/bin：

mv hugo /usr/local/bin

通过切换到您的主目录并输入 hugo 命令，确保配置了 Hugo：

cd

hugo version

您会看到版本号打印到屏幕上：

OutputHugo Static Site Generator v0.75.1-A4A7BAB7/extended darwin/amd64 BuildDate: 2020-09-15T06:54:33Z

现在已经安装了 Hugo，您可以创建您的站点。

第 2 步——创建 Hugo 项目

让我们创建一个关于鲨鱼的小网站。我们称它为“鲨鱼百科全书”，它会有关于不同种类鲨鱼的页面。

要创建站点，请使用 hugo new site 命令。在您的主目录中，执行以下命令：

hugo new site sharkopedia

这将创建目录 sharkopedia 并显示一条欢迎消息，告诉您如何为您的站点安装主题：

OutputCongratulations! Your new Hugo site is created in /Users/your_username/sharkopedia.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

您无需安装现有主题，而是向您的站点添加少量 HTML 和 CSS 以定义其外观。现有主题通常需要大量配置，这超出了本教程的范围。

切换到sharkopedia目录：

cd sharkopedia

您的 Hugo 站点具有以下结构：

Output├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── resources
├── static
└── themes

archetypes 是您的内容模板。您可以使用 hugo 命令创建新的 Markdown 页面，它将使用 archetypes 目录中的文件作为这些页面的模板。
config.toml 是站点的配置文件，您可以在其中指定站点的域、标题和要使用的主题。
content 是保存站点内容的目录。
data 是您可以存储生成站点时可以使用的 JSON 文件的位置。
layouts 用于放置定义站点外观的 HTML 文件，或覆盖主题中的模板。
resources 是 Hugo 放置它生成的文件的地方，比如优化的图像。
static 保存静态资产，例如文件、样式表、脚本或其他您不需要 Hugo 为您管理的资产。
themes 包含您创建或下载的主题。

您不会在本教程中使用主题；您将在 layouts 目录中定义 HTML 文件来定义站点的外观。

在继续之前，在编辑器中打开文件 config.toml。将 baseURL 字段更改为空字符串，并修改标题，使其显示为“Sharkopedia”：

配置文件

baseURL = ""
languageCode = "en-us"
title = "Sharkopedia"

保存文件。

接下来，您将为站点创建布局和内容。该网站将有一个主页和一个名为“鲨鱼”的部分。为了显示你的内容，Hugo 需要三种类型的模板文件：

主页的模板。
内容页面的模板，例如关于一条鲨鱼的页面。
显示页面列表的模板，例如列出所有鲨鱼或网站上所有标签或类别的页面。

让我们从创建主页模板开始。创建文件 layouts/index.html 并在编辑器中打开它。将以下代码添加到文件中以定义站点：

布局/index.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><^>{{ .Site.Title }}</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>

    <header>
      <h1>{{ .Site.Title }}</h1>
    </header>
    
    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}
    </main>

    <footer>
      <small>Made with love and Hugo</small>
    </footer>
  </body>
</html>

模板:.Site.Title 行从 config.toml 文件中获取标题。 模板:.Title 行和 模板:.Content 行从与主页关联的文档中获取标题和内容，您将在接下来创建该主页。

保存您的文件。

默认情况下，Hugo 在草稿模式下创建所有新页面。在编辑器中打开文件 archetypes/default.md 并修改它，使 draft 为 false。这样，您创建的所有新页面都不会处于草稿模式。

原型/default.md

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
---

title 字段中的 replace 行告诉 Hugo 根据文件名生成页面标题。

保存文件。

现在使用 Hugo 为您的主页生成内容文件。在终端的项目目录中，键入以下命令：

hugo new _index.md

这将生成文件 content/index.md：

Output/Users/your_username/sharkopedia/content/_index.md created

文件名中的下划线告诉 Hugo，这是列表页面或主页的内容页面，而不是常规内容。

在编辑器中打开 content/_index.md 文件并添加一些文本并更改标题：

内容/_index.md

---
title: "Welcome"
date: 2020-10-07T14:07:35-05:00
draft: false
---
This is a site all about sharks! Select a shark from the list to learn more:

此文件中的内容将放在主页上。让我们测试一下。

从终端，使用以下命令启动 Hugo 的开发服务器：

hugo serve

在您的网络浏览器中访问 http://localhost:1313，您将看到您的主页：

确认站点正常运行后，按 CTRL+C 停止服务器。

接下来，您将需要一个用于单个内容的模板，对于此项目，您可以复制主页，尽管您必须将其放置在特定目录中。

创建目录layouts/_default：

mkdir layouts/_default

然后创建文件 layouts/_default/single.html 并将 layouts/index.html 文件的内容复制到新文件中。您可以使用以下命令从命令行执行此操作：

cp layouts/index.html layouts/_default/single.html

接下来，您将创建站点的 sharks 内容部分。为此，您将使用 hugo 命令在 sharks 子目录下的 content 目录中创建新的 Markdown 文件。执行此命令为 Hammerhead 鲨鱼创建内容页面：

hugo new sharks/hammerhead.md

请注意，使用 hugo new 命令时不要指定 content 目录。

现在启动 Hugo 的开发服务器：

hugo serve

访问 http://localhost:1313/sharks/hammerhead.md 查看您的双髻鲨页面：

如果您访问 http://localhost:1313/sharks，您将看不到任何内容，因为您还没有定义您需要的最终模板：Hugo 用来显示内容列表的模板。现在让我们这样做。

按 CTRL+C 停止服务器。

创建文件 layouts/_default/list.html 并在编辑器中打开它。在文件中，放置与其他模板相同的内容：

布局/_default/list.html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><^>{{ .Site.Title }}</title>
    <link rel="stylesheet" href="/style.css">
  </head>
  <body>

    <header>
      <h1>{{ .Site.Title }}</h1>
    </header>
    
    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}
    </main>

    <footer>
      <small>Made with love and Hugo</small>
    </footer>
  </body>
</html>

在 <main> 标记内，在标题和内容之后，放置以下代码以生成要显示的页面的项目符号列表：

    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}

      <ul>
      {{ range .Pages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
      {{ end }}
      </ul>
    </main>

range 函数遍历站点部分的所有页面。 .Pages 的实际值是在 Hugo 生成你的站点时确定的。您创建的此列表模板将用作任何列表的默认模板，包括标签页面、类别页面和您的“鲨鱼”部分。您可以为您的部分制作更具体的模板，但这会为您提供一个适用于任何地方的默认布局。保存文件。

最后，为 Mako 鲨鱼和鲸鲨创建页面，以便显示更多内容：

hugo new sharks/mako.md
hugo new sharks/whale.md

使用 hugo serve 再次启动服务器并访问 http://localhost:1313/sharks，您将看到列出的三个 Shark 页面：

使用 CTRL+C 停止服务器。

您的网站已准备就绪。接下来，您将把代码推送到 GitHub，以便您可以部署它。

第 3 步 — 将站点推送到 GitHub

DigitalOcean App Platform 从 GitHub 存储库部署您的代码，因此您需要做的第一件事是将您的站点放入 Git 存储库并将该存储库推送到 GitHub。

首先，将您的 Sharkopedia 项目初始化为 Git 存储库：

git init

当您生成站点时，Hugo 会将文件放在名为 public 的目录中。让我们通过将它添加到 Git 的忽略列表来排除该目录。创建一个名为 .gitignore 的新文件并将以下代码添加到文件中：

.gitignore

public

保存文件。

现在执行以下命令将文件添加到您的存储库：

git add archetypes/ config.toml content/ .gitignore layouts/

您会注意到 data、themes、resources、static 和 themes 不包含在此命令中；这些目录是空的，Git 只存储文件，而不是目录。如果您稍后添加自己的数据、主题或静态内容，您将在稍后添加这些目录。

进行初始提交：

git commit -m "Initial version of the site"

您的文件将提交：

Output[master (root-commit) b045f24] First version of the site
 10 files changed, 114 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 archetypes/default.md
 create mode 100644 config.toml
 create mode 100644 content/_index.md
 create mode 100644 content/sharks/hammerhead.md
 create mode 100644 content/sharks/mako.md
 create mode 100644 content/sharks/whale.md
 create mode 100644 layouts/_default/list.html
 create mode 100644 layouts/_default/single.html
 create mode 100644 layouts/index.html

打开浏览器并导航到 GitHub，使用您的个人资料登录，然后创建一个名为 sharkopedia 的新存储库。创建一个没有 README 或许可证文件的空存储库。

创建存储库后，返回命令行将本地文件推送到 GitHub。

首先，将 GitHub 添加为远程存储库：

git remote add origin https://github.com/your_username/sharkopedia

接下来，重命名默认分支 main，以匹配 GitHub 的期望：

git branch -M main

最后，将你的 main 分支推送到 GitHub 的 main 分支：

git push -u origin main

您的文件将传输：

OutputEnumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 6 threads
Compressing objects: 100% (14/14), done.
Writing objects: 100% (16/16), 1.58 KiB | 1.58 MiB/s, done.
Total 16 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), done.
To https://github.com/your_username/sharkopedia
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

当提示推送您的代码时，输入您的 GitHub 凭据。

您已准备好将您的站点部署到 DigitalOcean 的应用平台。

第 4 步 — 使用 App Platform 部署到 DigitalOcean

推送代码后，访问 https://cloud.digitalocean.com/apps 并单击 Launch Your App。系统将提示您连接 GitHub 帐户：

连接您的帐户并允许 DigitalOcean 访问您的存储库。您可以选择让 DigitalOcean 访问您的所有存储库，或者只访问您希望部署的存储库。

按安装并授权。您将返回到您的 DigitalOcean 仪表板以继续创建您的应用程序。

连接您的 GitHub 帐户后，选择 your_account/sharkopedia 存储库，然后单击 Next。

接下来，提供您的应用名称，选择一个区域，并确保选择 main 分支。然后确保选中 Autodeploy code changes。按 下一步 继续。

DigitalOcean 将检测到您的项目是 Hugo 站点，并将自动填充命令来构建您的站点。

按 Next，您将被定向到 Finalize and Launch 屏幕，您将在其中选择您的计划。静态站点是免费的，所以选择Starter App并按下底部的Launch Starter App。您的网站将建立：

构建过程完成后，界面将向您显示一个健康的站点并提供一个链接供您访问该站点：

现在您的站点已部署，您可以通过将代码推送到 GitHub 来进行更改。

第 5 步 — 部署更改

为了确保部署更改，让我们将鲨鱼列表添加到站点的主页。当您将更改提交到存储库并将它们推送到 GitHub 时，它们将自动部署。

在编辑器中打开文件 layouts/index.html 并添加以下代码以遍历站点中所有鲨鱼页面并显示它们：

布局/index.html

...
    <main>
      <h2>{{ .Title }}</h2>
      {{ .Content }}

      <ul>
      {{ range (where site.RegularPages "Type" "in" "sharks") }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
      {{ end }}
      </ul>
    </main>

此版本使用 (where site.RegularPages "Type" "in" "sharks") 仅查找鲨鱼的内容页面。与您的默认列表模板不同，您的主页需要更多关于显示何种内容的指导。

保存文件。使用 hugo serve 运行服务器并访问 http://localhost:1313 以查看列出的鲨鱼：

按 CTRL+C 停止服务器。

现在将更新的文件添加到您的存储库：

git add layouts/index.html

做出承诺：

git commit -m "Add sharks to home page"

最后，将您的代码推送到 GitHub：

git push origin main

片刻之内，您的更改将被部署。如果您切换回 DigitalOcean 应用状态页面，您将看到再次部署应用的进度条：

完成后，访问您的网站以实时查看您的更改。

结论

在本教程中，您构建了一个基本的 Hugo 网站并使用 DigitalOcean 的应用平台进行了部署。您提交并推送到存储库的任何更改都将被重新部署，因此您现在可以扩展您的站点。您可以在 DigitalOcean Community Repository 中找到本教程的示例代码

本教程中的示例是一个最小的 Hugo 站点。您自己的站点可能具有更复杂的主题和功能，但部署过程将是相同的。