翻译原文：How To Build and Deploy a Hugo Site to DigitalOcean App Platform
原作者：Brian Hogan
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 保存設置。按其餘對話框上的「確定」 將其關閉。
在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 已配置：
hugo version
您將看到列印到螢幕上的版本號：
Hugo Static Site Generator v0.75.1-A4A7BAB7/extended darwin/amd64 BuildDate: 2020-09-15T06:54:33Z
Now that Hugo is installed, you can create your site.
現在 Hugo 已安裝，您可以建立網站了。
步驟 2 — 創建 Hugo 項目
讓我們創建一個關於鯊魚的小網站。我們稱之為“Sharkopedia”，它將有關於不同種類鯊魚的頁面。
要創建站點，請使用 hugo new site 命令。 在您的主目錄中，執行以下命令：
hugo new site sharkopedia
這將創建目錄 sharkopedia 並顯示一條歡迎消息，告訴您如何為您的站點安裝主題：
Congratulations! 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 站點具有以下結構：
├── 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並在編輯器中打開它。將以下代碼新增到檔案中以定義網站：
<!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 。這樣，您創建的所有新頁面都不會處於草稿模式。
title 字段中的 replace 行告訴 Hugo 根據文件名生成頁面標題。
保存檔案。
現在使用 Hugo 為您的主頁生成內容檔。在終端的項目目錄中，鍵入以下命令：
hugo new _index.md
這將產生檔案 content/index.md ：
/Users/your_username/sharkopedia/content/_index.md created
檔名中的下劃線告訴 Hugo，這是清單頁面或主頁的內容頁面，而不是常規內容。
在編輯器開啟 content/_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
在 Web 瀏覽器中訪問 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 檔。執行以下命令為雙髻鯊創建內容頁面：
hugo new sharks/hammerhead.md
請注意，使用 content 命令時不要指定 hugo new 目錄。
現在啟動 Hugo 的開發伺服器：
hugo serve
訪問 http://localhost:1313/sharks/hammerhead.md 查看雙髻鲨頁面：
如果您存取 http://localhost:1313/sharks ，您將看不到任何內容，因為您尚未定義所需的最終範本：Hugo 用於顯示內容清單的範本。讓我們現在就這樣做。
按 CTRL+C 停止伺服器。
創建檔案 layouts/_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 生成您的網站時確定的。您創建的此列表範本將用作任何清單的預設範本，包括標籤頁面、類別頁面和「鯊魚」部分。您可以為部分製作更具體的範本，但這為您提供了一個可在任何地方使用的預設佈局。保存檔案。
最後，為鯖鯊和鯨鯊創建頁面，以便顯示更多內容：
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 的新檔，並將以下代碼添加到該檔中：
public
保存檔案。
現在執行以下命令將檔案新增到儲存庫：
git add archetypes/ config.toml content/ .gitignore layouts/
您會注意到此命令中不包含 data 、 themes 、 resources 、 static 和 themes ;這些目錄是空的，Git 只儲存檔，不儲存目錄。如果稍後添加自己的數據、主題或靜態內容，則稍後將添加這些目錄。
進行初始提交：
git commit -m "Initial version of the site"
您的檔案將提交：
[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 分支：
您的檔案將傳輸：
Enumerating 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 — 部署到 DigitalOcean AppPlatform
推送代碼后，訪問 https://cloud.digitalocean.com/apps 並按 Launch Your App 。系統將提示您連接 GitHub 帳戶：
連接您的帳戶並允許DigitalOcean 訪問您的存儲庫。您可以選擇讓 DigitalOcean 存取您的所有儲存庫，或者只存取您希望部署的儲存庫。
按 Install and Authorize 。您將返回到 DigitalOcean 儀錶板以繼續建立您的應用程式。
連接 GitHub 帳戶後，選擇 你的帳戶/sharkopedia 存儲庫，然後按 Next。
接下來，提供應用的名稱，選擇一個區域，並確保選擇了 main 分支。然後確保選取中 Autodeploy code changes 。按 Next 繼續。
DigitalOcean將檢測到您的專案是Hugo網站，並將自動填充命令以構建您的網站。
按 Next ，您將被定向到 Finalize and Launch 螢幕，您將在其中選擇您的計劃。靜態網站是免費的，因此請選擇 Starter App ，然後按底部的 Launch Starter App。您的網站將構建：
構建過程完成後，介面將顯示一個健康的網站，並提供一個連結供您訪問該網站：
部署網站后，可以通過將代碼推送到 GitHub 來進行更改。
步驟 5 — 部署更改
為了確保部署更改，讓我們將鯊魚清單添加到網站的主頁。當您將更改提交到儲存庫並將其推送到 GitHub 時，它們將自動部署。
在編輯器中打開檔 layouts/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 網站。您自己的網站可能具有更複雜的主題和功能，但部署過程將是相同的。