GSP747

概览

在本实验中，您将创建一个流水线，用来部署基于静态网站开发工具 Hugo 构建的网站。您需要将网站内容存储在 Git 代码库中，并通过 Firebase 部署该网站。然后，使用 Cloud Build 创建流水线，用于自动部署提交到代码库的新内容。

目标

在本实验中，您需要执行以下任务：

• 阅读静态网站概览。
• 使用 Hugo 建立网站。
• 将网站内容存储在 Git 代码库中。
• 使用 Firebase 部署网站。
• 使用 Cloud Build 创建构建流水线以自动完成部署。

前提条件

您可能会发现，具备一些与所使用的服务相关的实操经验也很有帮助。下面是一些其他可能有用的实验：

• 使用 Cloud Run 构建可创建 PDF 文件的无服务器应用
• Firebase Web

静态网站的优势

诸如 Hugo 之类的静态网站开发工具之所以受欢迎，是因为它们能够构建不需要 Web 服务器的网站。静态 Web 平台没有需要维护的服务器操作系统或软件。但是需要注意一些运维方面的问题。例如，您可能需要对发布的内容进行版本控制，将网站托管在内容分发网络（简称“CDN”）上，以及预配 SSL 证书。

若要满足这些需要，可以在 Google Cloud 上使用持续集成/持续部署流水线。开发者可以使用部署流水线自动执行整个部署过程，从而加速创新。在本实验中，您将学习如何构建可演示此自动化过程的流水线。

设置和要求

点击“开始实验”按钮前的注意事项

请阅读以下说明。实验是计时的，并且您无法暂停实验。计时器在您点击开始实验后即开始计时，显示 Google Cloud 资源可供您使用多长时间。

此实操实验可让您在真实的云环境中开展实验活动，免受模拟或演示环境的局限。为此，我们会向您提供新的临时凭据，您可以在该实验的规定时间内通过此凭据登录和访问 Google Cloud。

为完成此实验，您需要：

• 能够使用标准的互联网浏览器（建议使用 Chrome 浏览器）。

注意：请使用无痕模式（推荐）或无痕浏览器窗口运行此实验。这可以避免您的个人账号与学生账号之间发生冲突，这种冲突可能导致您的个人账号产生额外费用。

• 完成实验的时间 - 请注意，实验开始后无法暂停。

注意：请仅使用学生账号完成本实验。如果您使用其他 Google Cloud 账号，则可能会向该账号收取费用。

如何开始实验并登录 Google Cloud 控制台

1. 点击开始实验按钮。如果该实验需要付费，系统会打开一个对话框供您选择支付方式。右侧是实验设置和访问权限面板，其中包含以下内容：

   • 打开 Google Cloud 控制台按钮
   • 您在本实验中必须使用的临时凭证（用户名和密码）
   • 帮助您逐步完成该实验所需的其他信息（如果需要）

   请注意，实验计时器位于页面顶部附近，将显示剩余时间。

2. 点击打开 Google Cloud 控制台（如果您使用的是 Chrome 浏览器，请右键点击并选择在无痕式窗口中打开链接）。

   该实验会启动资源并打开另一个标签页，显示“登录”页面。

   提示：可以将这些标签页分别放在不同的窗口中，并排显示。

   注意：如果您看见选择账号对话框，请点击使用其他账号。

3. 如有必要，请复制下方的用户名，然后将其粘贴到登录对话框中。

   {{{user_0.username | "<用户名>"}}}

   您也可以在实验设置和访问权限面板中找到“用户名”。

4. 点击下一步。

5. 复制下面的密码，然后将其粘贴到欢迎对话框中。

   {{{user_0.password | "<密码>"}}}

   您也可以在实验设置和访问权限面板中找到“密码”。

6. 点击下一步。

   重要提示：您必须使用实验提供的凭证。请勿使用您的 Google Cloud 账号凭证。 注意：在本实验中使用您自己的 Google Cloud 账号可能会产生额外费用。

7. 依次点击进入后续页面：

   • 接受条款及条件。
   • 由于这是临时账号，请勿添加账号恢复选项或双重身份验证。
   • 请勿注册免费试用。

片刻之后，系统会在此标签页中打开 Google Cloud 控制台。

注意：如需访问 Google Cloud 产品和服务，请点击导航菜单，或在搜索字段中输入服务或产品的名称。

过程概览

以下是您要构建的流水线示意图：

目标是能够提交代码并让代码触发流水线，之后流水线便会部署网站。整个实验分为两部分。首先，您需要在本地构建网站并将其手动部署到 Firebase。然后，使用 Cloud Build 构建一个流水线来自动执行此过程。

任务 1. 手动部署

首先在 Linux 实例上手动构建网站，以了解该端到端流程。您还将使用此 Linux 实例来执行一些必要的一次性任务，以确保 Firebase 启动并正常运行。

连接到 Linux 实例

1. 在导航菜单 () 中，选择 Compute Engine > 虚拟机实例。您会看到一个已为您构建好的实例。

在该行末尾，您应该会看到外部 IP 地址和 SSH 按钮（如下图所示）。如果这些内容被信息面板挡住了，可以关闭该面板以查看整行的内容。

2. 记录外部 IP 地址以备稍后使用。
3. 点击 SSH。系统会打开一个窗口，其中会显示一个 shell 提示。

安装 Hugo

现在，在 Linux 实例中安装 Hugo，以便先在本地测试网站，然后再通过 Firebase 进行部署。本实验提供了一个 Shell 脚本来简化安装操作。

1. 在 Linux 实例 shell 中，查看文件 installhugo.sh 的内容：

cat /tmp/installhugo.sh

输出应类似于以下示例：

输出：

_HUGO_VERSION=0.96.0 curl -L https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz | tar -xz -C /tmp/ # echo The Hugo binary is now at /tmp/hugo.

注意，该文件中使用 curl 命令来下载 Hugo，并使用 tar 命令来解压缩 Hugo 归档文件。在本实验后面创建流水线时，您将会看到类似的命令。

2. 输入下面的命令以运行脚本并安装 Hugo：

cd ~ /tmp/installhugo.sh

完成后，您会收到一条如下所示的消息，告诉您 Hugo 已安装在 /tmp 目录下。

您现在可以构建网站基础设施了。

创建代码库和初始网站

将预先创建的 Git 代码库克隆到 Linux 实例。

克隆代码库会在 shell 中创建该代码库的镜像。这样可方便您在 shell 中实现网站，以及稍后将所做的更改提交到文件系统中。在本实验的后面部分，您将设置一条流水线来响应这些提交到代码库中的更改。

1. 在 Linux 虚拟机上安装 git，并设置项目 ID、项目编号和区域。将这三者保存为 PROJECT_ID、PROJECT_NUMBER 和 REGION 变量：

在 Linux 实例 shell 中输入以下命令：

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])") sudo apt-get update sudo apt-get install -y git

2. 运行以下命令来配置 Git：

git config --global init.defaultBranch main git config --global user.name "student" git config --global user.email "{{{user_0.username | "filled in at lab start"}}}"

3. 输入以下命令，从本地 Gitea 服务器克隆预先创建的代码库：

cd ~ git clone http://giteaadmin:GiteaPassword123@localhost:3000/giteaadmin/my_hugo_site.git 注意：输出警告警告：您似乎克隆了一个空的代码库。是正常现象，因为该代码库是新初始化的，尚未包含任何提交。

点击检查我的进度以验证是否完成了以下目标： 创建 Git 代码库

现在，您可以创建网站结构了。

6. 在 Linux shell 中输入以下命令：

cd ~ /tmp/hugo new site my_hugo_site --force

通常，hugo 命令会创建相应目录。--force 选项将在代码库目录（已存在）中创建网站。这样您就可以将 Git 相关信息保存在刚刚克隆的目录下。

完成后，您会看到一条消息，指明已创建网站。

7. 现在，安装 hello-friend-ng 主题以提供网站布局。在 Linux 实例 shell 中输入以下命令：

cd ~/my_hugo_site git clone \ https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng echo 'theme = "hello-friend-ng"' >> config.toml

完成后，您将会看到相关消息，指明已克隆主题。

8. 从主题目录中移除 git 文件：

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore 注意：为确保 Git 代码库将主题文件添加到版本控制系统中，应当移除 git 文件。

9. 现在网站结构已经设置好，您可以预览了。输入以下命令，在 TCP 端口 8080 启动该网站：

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

Hugo 将构建网站并提供相应的服务，以供您在 TCP 端口 8080 上访问该网站。服务器会一直运行，直到您按下 CTRL+C 使其停止。

10. 打开一个浏览器标签页，接着在地址栏中输入外部 IP 地址，在末尾加上端口 8080。请使用以下网址，同时将 [EXTERNAL IP] 替换为 hugo-dev-vm 实例的外部 IP 地址。

您可以在 Google Cloud 控制台中的 Compute Engine > 虚拟机实例下的外部 IP 列中找到外部 IP 地址。或者，在终端中运行以下命令来检索外部 IP 地址：

curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip

前往：

http://[EXTERNAL IP]:8080

网站应如下所示。

点击检查我的进度以验证是否完成了以下目标： 在 TCP 端口 8080 启动网站

11. 返回到 Linux shell，并按下 CTRL+C 停止 Hugo 服务器。

将网站部署到 Firebase

1. 在 Linux 实例 shell 中安装 Firebase CLI：

curl -sL https://firebase.tools | bash

2. 现在，您需要初始化 Firebase。在 shell 中输入以下命令：

cd ~/my_hugo_site firebase init

3. 使用箭头键和空格键选择 Hosting: Set up deployments for static web apps（Hosting：为静态 Web 应用设置部署），然后按 ENTER 键。

• 在系统要求您选择项目选项时，选择 Use an existing project（使用现有项目），然后使用箭头键和空格键选择项目 ID“”并按 Enter 键。

• 对于公共目录，可选择默认值 public。

• 如需配置为单页应用，请输入 N 并按 ENTER 键。

• 如需设置为通过 GitHub/外部 Git 自动构建和部署，请输入 N，然后按 Enter 键。

• 如需为 Firebase 安装智能体技能，请选择 N。

当系统询问您是否覆盖任何现有文件时，选择“Y”。

4. 现在，您可以部署应用了。在 Linux 实例 shell 中输入以下命令，以使用 Hugo 重新构建网站并通过 Firebase 进行部署：

/tmp/hugo && firebase deploy

5. 部署完应用后，您会收到网站的托管网址。点击该网址即可看到该网站，而它目前是由 Firebase CDN（内容分发网络）提供的。

如果收到常见的欢迎消息，请稍等几分钟让 CDN 完成初始化，然后再刷新浏览器窗口。记录此托管网址以备稍后使用。

至此，您已经在本地完成了整个部署。接下来，您将使用 Cloud Build 实现整个流程的自动化。

任务 2. 自动进行部署

验证环境变量

在继续操作之前，请先确认当前会话的环境变量是否仍然有效。如果您重启了终端会话或连接已断开，请在 Linux 实例 shell 中运行以下命令来重新定义这些变量：

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])")

配置构建

Cloud Build 使用代码库根目录中的文件 cloudbuild.yaml 来执行构建。此文件为 YAML 格式。间距和缩进非常重要，因此我们已经为您将该文件放在 Linux 实例上。

1. 在 Linux shell 中输入以下命令。请注意，cp 命令末尾有一个终止句点（“.”）：

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. 运行以下命令以查看 cloudbuild.yaml 文件的内容。

cat cloudbuild.yaml

由于长度原因，输出中的一些行会换行。

输出：

# Copyright 2020 Google Inc. All rights reserved. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, software # distributed under the License is distributed on an "AS IS" BASIS, # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. steps: - name: 'gcr.io/cloud-builders/git' args: ['clone', 'http://giteaadmin:GiteaPassword123@${_GIT_SERVER_IP}:3000/giteaadmin/my_hugo_site.git', '.'] - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://firebase.tools/bin/linux/latest' - '-o' - '/workspace/firebase' - name: 'gcr.io/cloud-builders/curl' args: - '-L' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' - '-o' - '/workspace/hugo.tar.gz' waitFor: ['-'] - name: 'ubuntu:20.04' args: - 'bash' - '-c' - | tar -xvf /workspace/hugo.tar.gz chmod 755 /workspace/firebase /workspace/hugo /workspace/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0 _GIT_SERVER_IP: '' options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. 下面是对 cloudbuild.yaml 文件的一些观察结果：

• 此文件中有四个命名的步骤，每个步骤通过一个容器映像来执行。第一步是使用 Git 从 Gitea 代码库克隆网站源代码。接下来的两个步骤使用一个由 Google 支持的构建器，通过 curl 来下载 Hugo 和 Firebase 工具。
• 第四个步骤是使用标准 Ubuntu 容器来安装 Hugo 和 Firebase，然后构建和部署网站。通过为每个部署安装 Hugo 和 Firebase，您可以根据需要随时更改 Hugo 的版本，并使用 Firebase 的最新版本。
• tar 和 wget 命令与之前在 installhugo.sh 脚本中的使用情形几乎完全相同。
• 此文件还会使用自定义替代变量 (_HUGO_VERSION 和 _GIT_SERVER_IP) 和 Google 提供的替代变量 (PROJECT_ID)，以允许在不同环境中使用此模板。
• 系统会创建 Hugo 和 Firebase 的二进制文件并将其安装在临时目录中，以免将它们意外部署到网站本身。

执行初始提交

构建流水线的目标是在代码库发生更改时能够触发构建。您首先需要向代码库执行初始提交，以验证能否进行进一步的更改。

1. 在 Linux shell 中输入以下命令来创建 .gitignore 文件，以排除代码库中的某些目录：

cd ~/my_hugo_site echo "resources" >> .gitignore

2. 向代码库执行初始提交：

git add . git commit -m "Add app to Git Repository" git push -u origin main

现在，您已经将网站的初始版本提交（上传）到了 Google Cloud。

注意：运行 git branch 命令，以确保您的分支正确无误。如果显示为 master ，请运行以下命令将其重命名为 main：git branch -m master main。

创建 Cloud Build Webhook 触发器

现在，您将创建一个 Cloud Build Webhook 触发器，以响应来自 Gitea Git 代码库的代码推送。

1. 使用预配的 Secret Manager 密钥创建 Cloud Build Webhook 触发器：

gcloud builds triggers create webhook --name="commit-to-main-branch1" \ --inline-config="cloudbuild.yaml" \ --secret="projects/$PROJECT_ID/secrets/webhook-secret/versions/1" \ --service-account="projects/$PROJECT_ID/serviceAccounts/$(gcloud projects describe $PROJECT_ID --format='value(projectNumber)')-compute@developer.gserviceaccount.com" \ --substitutions=_GIT_SERVER_IP=$(curl -s -H "Metadata-Flavor: Google" http://metadata.google.internal/computeMetadata/v1/instance/network-interfaces/0/access-configs/0/external-ip) \ --region=$REGION

点击检查我的进度以验证是否完成了以下目标： 创建 Cloud Build 触发器

Cloud Build 服务账号

Cloud Build 服务账号必须具有相应的权限才能使用 Firebase 来部署网站。

Cloud Build	角色	说明
[PROJECT_NUMBER]@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	对 Hosting 资源的完整读写权限

测试流水线

您已经创建了流水线，现在请对网站进行更改并提交，验证更改是否能够生效。

1. 在 Linux shell 中输入以下命令，进入代码库目录：

cd ~/my_hugo_site

2. 修改 config.toml 文件，更改其标题。

您可以使用 nano 文本编辑器打开并修改该文件：

nano config.toml

找到包含 title 的行，并将其更改为：

title = "Blogging with Hugo and Cloud Build"

按 CTRL+O 和 ENTER 键保存，然后按 CTRL+X 退出 nano 编辑器。

或者，您也可以在 shell 中运行以下 sed 命令来自动更新标题：

sed -i 's/title =.*/title = "Blogging with Hugo and Cloud Build"/g' config.toml

3. 输入以下命令，将所做的更改提交到代码库并触发 Cloud Build 流水线：

git add . git commit -m "I updated the site title" git push -u origin main

4. 查阅构建历史记录以查看构建状态：

gcloud builds list --region=$REGION

5. 查阅构建日志以了解当前构建：

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)')

6. 从执行的构建获取网址：

gcloud builds log --region=$REGION $(gcloud builds list --region=$REGION --limit=1 --format='value(id)') | grep "Hosting URL"

7. 访问网站的托管网址以查看结果。

您还可以前往 Firebase 控制台查看项目，以便查找域名。

注意：CDN 可能需要几分钟的时间才能更新网站信息并显示更新后的内容。 注意：网站具有 SSL 证书，可通过 https（超文本传输安全协议）协议访问。

点击检查我的进度以验证是否完成了以下目标： 测试流水线

恭喜！

您已经了解了 Cloud Build 如何编排流水线以将 Hugo 网站快速部署到 Firebase，而 Firebase 将为您提供 CDN 和 SSL 证书。借助 Cloud Build，您可以根据需要定制整个流程。缩短部署时间能帮助您加快创新步伐，并且轻松地测试网站的修订版本。如需了解详情，请查阅 Cloud Build 和 Firebase 文档。

Google Cloud 培训和认证

…可帮助您充分利用 Google Cloud 技术。我们的课程会讲解各项技能与最佳实践，可帮助您迅速上手使用并继续学习更深入的知识。我们提供从基础到高级的全方位培训，并有点播、直播和虚拟三种方式选择，让您可以按照自己的日程安排学习时间。各项认证可以帮助您核实并证明您在 Google Cloud 技术方面的技能与专业知识。

本手册的最后更新时间：2026 年 6 月 18 日

本实验最后测试时间：2026 年 6 月 18 日

版权所有 2026 Google LLC 保留所有权利。Google 和 Google 徽标是 Google LLC 的商标。其他所有公司名和产品名可能是其各自相关公司的商标。