如何在 DigitalOcean 应用平台上构建和部署雨果网站

Hugo是一个静态网站生成器和框架,用于构建网站. 使用Hugo,您可以使用HTML定义您的主题,并使用Markdown或其他文本处理器构建您的内容。

在本教程中,您将使用Hugo构建一个小的静态网站,并使用GitHub将该网站部署到DigitalOcean的应用平台。

前提条件

要完成本教程,您将需要:

一个 DigitalOcean帐户.
一个 GitHub帐户。
Git 安装在您的本地机器上. 您可以遵循教程贡献到开源:开始使用 Git 来安装和设置 Git 在您的计算机上。

步骤1:安装HUGO

为了构建您的Hugo网站,您将在本地机器上安装hugo命令行工具,您将使用此工具生成您的网站,创建内容页面,并启动一个小型服务器,您将使用它来测试您的网站,然后部署它。

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

下载Hugo从GitHub上的发布页面。Hugo有两种版本:常规版本和扩展版本。下载扩展版本,以便您可以支持资产管理和CSS预处理。

一旦您下载了该文件,您需要解压缩该文件并将其放置在您的系统 PATH 某处,以便您可以从任何目录中运行该文件。

在 Windows 中,创建C:\Hugo目录,卸载已下载的文件并将其放置在C:\hugo中,然后将该文件夹添加到您的 PATH 环境变量中。要做到这一点,请使用 Windows 搜索并键入环境。选择 Edit Environment Variables for My Account 。在出现的屏幕上,请按 ** Environment Variables** 按钮,在 ** System Variables** 部分找到 ** PATH** ,然后按 ** Edit** 按钮。

在 macOS 或 Linux 上,将可执行的文件复制为 `/usr/local/bin',因为它已经包含在您的 PATH 环境变量中。

首先,切换到下载目录:

1cd ~/Downloads

解压文件:

1tar zxvf hugo_extended_0.75.1*.gz

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

1mv hugo /usr/local/bin

通过切换到您的主目录并键入hugo命令来确保Hugo的配置:

1cd

1hugo version

您将看到在屏幕上打印的版本号:

1[secondary_label Output]
2Hugo Static Site Generator v0.75.1-A4A7BAB7/extended darwin/amd64 BuildDate: 2020-09-15T06:54:33Z

现在Hugo已安装,您可以创建您的网站。

步骤 2 – 创建 Hugo 项目

让我们创建一个关于鲨鱼的小网站,我们将称之为Sharkopedia,它将有关于不同类型的鲨鱼的页面。

要创建一个网站,请使用hugo new site命令. 从您的主目录中执行以下命令:

1hugo new site sharkopedia

这会创建sharkopedia目录,并显示一个欢迎消息,告诉您如何为您的网站安装主题:

 1[secondary_label Output]
 2Congratulations! Your new Hugo site is created in /Users/your_username/sharkopedia.
 3
 4Just a few more steps and you're ready to go:
 5
 61. Download a theme into the same-named folder.
 7   Choose a theme from https://themes.gohugo.io/ or
 8   create your own with the "hugo new theme <THEMENAME>" command.
 92. Perhaps you want to add some content. You can add single files
10   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
113. Start the built-in live server via "hugo server".
12
13Visit https://gohugo.io/ for quickstart guide and full documentation.

而不是安装现有主题,您将添加少量的HTML和CSS到您的网站来定义它的外观。

转到sharkopedia目录:

1cd sharkopedia

您的Hugo网站有以下结构:

1[secondary_label Output]
2├── archetypes
3├── config.toml
4├── content
5├── data
6├── layouts
7├── resources
8├── static
9└── themes

您可以使用hugo命令创建新标记页面,它将使用archetypes目录中的文件作为这些页面的模板。 *config.toml是网站的配置文件,您可以指定网站的域名、标题和您想要使用的主题。 *内容是持有网站内容的目录。 *数据是您在创建网站时可以使用的JSON文件存储的地方。 *布局是您放置定义网站外观和感觉的HTML文件的地方。

在本教程中,您不会使用主题;您将在布局目录中定义HTML文件,以定义您的网站的外观。

在继续之前,在编辑器中打开文件 config.toml. 将字段 baseURL 更改为一个空串,然后修改标题,以便它说Sharkopedia:

1[label config.toml]
2baseURL = ""
3languageCode = "en-us"
4title = "Sharkopedia"

保存檔案

接下来,您将创建网站的布局和内容. 该网站将有一个主页和一个名为Sharks的部分。为了显示您的内容,Hugo需要三种类型的模板文件:

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

让我们先创建主页模板,然后创建layouts/index.html文件,然后在编辑器中打开它,然后在文件中添加以下代码来定义网站:

 1[label layouts/index.html]
 2<!DOCTYPE html>
 3<html lang="en-US">
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>{{ .Site.Title }}</title>
 8    <link rel="stylesheet" href="/style.css">
 9  </head>
10  <body>
11
12    <header>
13      <h1>{{ .Site.Title }}</h1>
14    </header>
15
16    <main>
17      <h2>{{ .Title }}</h2>
18      {{ .Content }}
19    </main>
20
21    <footer>
22      <small>Made with love and Hugo</small>
23    </footer>
24  </body>
25</html>

字符串从config.toml文件中获取标题.字符串和字符串从与主页相关的文档中获取标题和内容,然后创建。

保存你的檔案

默认情况下,Hugo在草案模式下创建所有新页面,在编辑器中打开文件 archetypes/default.md,并将其修改为 draft 是 false。

1[label archetypes/default.md]
2---
3title: "{{ replace .Name "-" " " | title }}"
4date: {{ .Date }}
5draft: false
6---

标题字段中的替换行告诉Hugo基于文件名生成页面标题。

保存檔案

现在使用Hugo为您的主页生成内容文件. 从终端,在您的项目目录中,输入此命令:

1hugo new _index.md

这会生成content/index.md文件:

1[secondary_label Output]
2/Users/your_username/sharkopedia/content/_index.md created

文件名中的标注告诉Hugo,这是一个列表页面或主页的内容页面,而不是一个普通的内容。

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

1[label content/_index.md]
2---
3title: "Welcome"
4date: 2020-10-07T14:07:35-05:00
5draft: false
6---
7This is a site all about sharks! Select a shark from the list to learn more:

此檔案的內容將被放置在主頁上. 讓我們測試一下。

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

1hugo serve

在您的 Web 浏览器中访问 http://localhost:1313,您将看到您的主页:

The home page

一旦您确认网站正在运行,请按CTRL+C来停止服务器。

接下来,您将需要单个内容的模板,对于这个项目,您可以重复主页,尽管您需要将其放置在特定目录中。

创建Layouts/_default目录:

1mkdir layouts/_default

然后创建layouts/_default/single.html文件,并将您的layouts/index.html文件的内容复制到新文件中。

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

接下来,您将创建网站的鲨鱼内容部分。要做到这一点,您将使用hugo命令在鲨鱼子目录下的内容目录中创建新的Markdown文件。

1hugo new sharks/hammerhead.md

请注意,您在使用hugo new命令时不指定内容目录。

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

1hugo serve

請訪問「http://localhost:1313/sharks/hammerhead.md」以查看您的 Hammerhead 鲨鱼頁面:

Hammerhead page

如果你访问http://localhost:1313/sharks,你不会看到任何东西,因为你没有定义你需要的最终模板:Hugo用来显示内容列表的模板。

停止服务器,按CTRL+C。

创建layouts/_default/list.html文件,并在您的编辑器中打开它。

 1[label layouts/_default/list.html]
 2<!DOCTYPE html>
 3<html lang="en-US">
 4  <head>
 5    <meta charset="utf-8">
 6    <meta name="viewport" content="width=device-width, initial-scale=1">
 7    <title>{{ .Site.Title }}</title>
 8    <link rel="stylesheet" href="/style.css">
 9  </head>
10  <body>
11
12    <header>
13      <h1>{{ .Site.Title }}</h1>
14    </header>
15
16    <main>
17      <h2>{{ .Title }}</h2>
18      {{ .Content }}
19    </main>
20
21    <footer>
22      <small>Made with love and Hugo</small>
23    </footer>
24  </body>
25</html>

在<main>标签中,在标题和内容之后,放置下面的代码,生成显示的页面列表:

 1<main>
 2      <h2>{{ .Title }}</h2>
 3      {{ .Content }}
 4
 5      <ul>
 6      {{ range .Pages }}
 7        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
 8      {{ end }}
 9      </ul>
10    </main>

该范围函数在网站的部分的所有页面上重复。当Hugo生成您的网站时,定义了.Pages的实际值。您创建的此列表模板将被用作任何列表的默认模板,包括标签页面,类别页面和您的鲨鱼部分。

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

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

重新启动服务器,使用hugo server,然后访问http://localhost:1313/sharks,你会看到三页的鲨鱼列表:

The sharks page with all three pages listed

停止服务器使用CTRL+C。

你的网站已经准备好了,接下来你会把你的代码推到GitHub,这样你就可以部署它。

步骤 3 – 将网站推向GitHub

DigitalOcean App Platform 从 GitHub 存储库部署您的代码,所以您需要做的第一件事是将您的网站放入 Git 存储库,然后将该存储库推到 GitHub。

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

1git init

当你创建你的网站时,Hugo 会将文件放置在一个名为公共的目录中. 让我们将该目录排除在 Git 的忽略列表中,然后创建一个名为.gitignore的新文件,并将以下代码添加到文件中:

1[label .gitignore]
2public

保存檔案

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

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

你会注意到数据,主题,资源,静态和主题不包括在这个命令中;这些目录是空的,Git只存储文件,而不是目录。

做你的初始承诺:

1git commit -m "Initial version of the site"

您的檔案將執行:

 1[secondary_label Output]
 2[master (root-commit) b045f24] First version of the site
 3 10 files changed, 114 insertions(+)
 4 create mode 100644 .gitignore
 5 create mode 100644 archetypes/default.md
 6 create mode 100644 config.toml
 7 create mode 100644 content/_index.md
 8 create mode 100644 content/sharks/hammerhead.md
 9 create mode 100644 content/sharks/mako.md
10 create mode 100644 content/sharks/whale.md
11 create mode 100644 layouts/_default/list.html
12 create mode 100644 layouts/_default/single.html
13 create mode 100644 layouts/index.html

打开浏览器并导航到 GitHub,使用您的个人资料登录,并创建一个名为sharkopedia的新存储库。

一旦您创建了存储库,请返回命令行,将本地文件推到GitHub。

首先,添加 GitHub 作为远程存储库:

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

接下来,重新命名默认分支主,以匹配GitHub所期望的:

1git branch -M main

最后,把你的主要分支推到GitHub的主要分支:

1git push -u origin main

您的文件将被传输:

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

当被要求推你的代码时,输入你的GitHub凭证。

你已经准备好部署你的网站到DigitalOcean的应用平台。

步骤 4 – 使用 App 平台部署到 DigitalOcean

按下代码后,请访问 https://cloud.digitalocean.com/apps,然后单击 Launch Your App 。

Connect GitHub account

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

Allow repository access

点击 安装和授权 .您将返回您的DigitalOcean仪表板以继续创建您的应用程序。

一旦您的 GitHub 帐户已连接,请选择your_account/sharkopedia存储库,然后点击Next。

Choose your repository

接下来,输入您的应用程序的名称,选择一个区域,并确保选择主要分支。

Choose name, region, and branch

DigitalOcean会检测到您的项目是Hugo网站,并将自动填充构建您的网站的命令。

Hugo site detected and build command populated

点击 Next ,你将被引导到 ** 完成和启动** 屏幕,在那里你会选择你的计划. 静态网站是免费的,所以选择 ** 启动应用程序** 和按 ** 启动启动应用程序** 在底部。

Site building and deploying

一旦构建过程完成,接口将向您显示一个健康的网站,并为您提供访问该网站的链接:

The deployed site in the dashboard

现在你的网站已经部署,你可以通过将你的代码推到GitHub来进行更改。

步骤五:实施变更

为了确保更改被部署,让我们将鲨鱼列表添加到网站的主页,当您将更改执行到您的存储库并将其推到GitHub时,它们将自动部署。

在您的编辑器中打开layouts/index.html文件,并添加以下代码来重复您网站的所有页面,这些页面都是鲨鱼,并显示它们:

 1[label layouts/index.html]
 2...
 3    <main>
 4      <h2>{{ .Title }}</h2>
 5      {{ .Content }}
 6
 7      <ul>
 8      {{ range (where site.RegularPages "Type" "in" "sharks") }}
 9        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
10      {{ end }}
11      </ul>
12    </main>

此版本使用(Where site.RegularPagesTypeinsharks)来仅查找鲨鱼的内容页面,与您的默认列表模板不同,您的主页需要更多关于要显示什么类型的内容的指导。

运行hugo server的服务器,然后访问http://localhost:1313以查看您的鲨鱼列表:

Sharks on the home page

按CTRL+C来停止服务器。

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

1git add layouts/index.html

做一个承诺:

1git commit -m "Add sharks to home page"

最后,把你的代码推到GitHub:

1git push origin main

如果你回到你的 DigitalOcean App 状态页面,你会看到进度栏重新部署你的应用程序:

Redeploy progress

一旦完成,请访问您的网站,以查看您的更改。

结论

在本教程中,您建立了一個基本的Hugo網站,並使用DigitalOcean的應用平台部署。您承諾並推動到您的儲存庫的任何變更將重新部署,因此您現在可以擴展您的網站。

本教程中的示例是最小的Hugo网站. 您的网站可能有更复杂的主题和功能,但部署过程将是一样的。