GSP747

總覽

本實驗室將帶您建立管道，部署以 Hugo 靜態網站製作工具架設的網站。過程中，您會將網站內容儲存在 Git 存放區，並透過 Firebase 部署網站，接著使用 Cloud Build 建立管道，自動部署提交至存放區的新內容。

目標

在本實驗室，您會執行下列工作：

• 概略瞭解靜態網站。
• 使用 Hugo 架設網站。
• 將網站內容儲存在 Git 存放區。
• 透過 Firebase 部署網站。
• 使用 Cloud Build 建立建構管道，自動部署新內容。

事前準備

建議您先透過實作課程熟悉接下來會用到的服務，操作起來會更順手。歡迎參考下列實驗室：

• 使用 Cloud Run 建構可建立 PDF 檔案的無伺服器應用程式
• Firebase 網頁版

靜態網站的優點

越來越多使用者偏好 Hugo 等靜態網站建構工具，因為不需要網路伺服器就能架設網站。靜態網站平台沒有伺服器作業系統或軟體，不必費心維護，但在實際作業時仍有種種考量。例如，您可能需要管控發布內容的版本、將網站託管於內容傳遞網路 (CDN)，或是佈建 SSL 憑證。

只要使用 Google Cloud 的持續整合/持續部署管道，就能輕鬆滿足上述需求。部署管道可自動執行整個部署程序，協助開發人員加速創新。在本實驗室中，您將學習如何建構管道，實作這套自動化流程。

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

• 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。

注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。

• 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。

注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

如何開始實驗室及登入 Google Cloud 控制台

1. 按一下「Start Lab」按鈕。如果實驗室會產生費用，請在開啟的對話方塊中選取付款方式。右側的「Lab setup and access」面板會顯示下列項目：

   • 「Open Google Cloud console」按鈕
   • 此實驗室所需的臨時憑證 (使用者名稱和密碼)
   • 完成此實驗室所需的其他資訊 (如有)

   請注意，實驗室計時器位於頁面頂端附近，會顯示剩餘時間。

2. 按一下「Open Google Cloud console」。如果使用 Chrome 瀏覽器，也可以按一下滑鼠右鍵，選取「在無痕視窗中開啟連結」。

   接著，實驗室會啟動相關資源，並開啟另一個分頁，顯示「登入」頁面。

   提示：您可以在不同的視窗並排開啟分頁。

   注意：頁面顯示「選擇帳戶」對話方塊時，請點選「使用其他帳戶」。

3. 如有必要，請將下方的 Username 貼到「登入」對話方塊。

   {{{user_0.username | "Username"}}}

   您也可以在「Lab setup and access」面板找到「Username」。

4. 點選「下一步」。

5. 複製下方的 Password，並貼到「歡迎使用」對話方塊。

   {{{user_0.password | "Password"}}}

   您也可以在「Lab setup and access」面板找到「Password」。

6. 點選「下一步」。

   重要事項：請務必使用實驗室提供的憑證，而非自己的 Google Cloud 帳戶憑證。 注意：如果使用自己的 Google Cloud 帳戶來進行這個實驗室，可能會產生額外費用。

7. 繼續點按後續頁面：

   • 接受條款及細則。
   • 由於這是臨時帳戶，請勿新增救援選項或雙重驗證機制。
   • 請勿申請免費試用。

Google Cloud 控制台稍後會在這個分頁開啟。

注意：如要使用 Google Cloud 產品和服務，請按一下「導覽選單」，或在「搜尋」欄位輸入服務或產品名稱。

流程總覽

建構流程如下圖所示：

這一系列作業的目標，是讓您提交程式碼後就能觸發管道，進而自動部署網站。整個流程分為兩個階段：首先，您要在本機建構網站並手動部署至 Firebase。接著再透過 Cloud Build 建立管道，自動執行相關程序。

工作 1：手動部署

請先在 Linux 執行個體手動建構網站，實際走一遍完整的作業流程。您還需要用該執行個體執行一些單次工作，確保 Firebase 順利啟動並運作。

連結 Linux 執行個體

1. 依序選取「導覽選單」圖示 () >「Compute Engine」>「VM 執行個體」，您會看到執行個體已預先建立完成。

如下圖所示，執行個體列的最右邊會顯示外部 IP 位址和「SSH」按鈕。若資訊面板擋住部分畫面，關閉即可看見整列內容。

2. 請記下外部 IP 位址，稍後會用到。
3. 點選「SSH」，殼層提示視窗會隨即開啟。

安裝 Hugo

接著要在 Linux 執行個體安裝 Hugo，以本機環境測試網站，確認沒問題後再用 Firebase 部署。本實驗室提供殼層指令碼，方便您執行這項工作。

1. 在 Linux 執行個體殼層，查看 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 執行個體。

複製存放區會在殼層建立完全相同的副本，方便您在殼層導入網站，隨後再將修訂版本提交至檔案系統。您稍後會在本實驗室建立管道，這樣將修訂內容提交至存放區時，就會自動觸發後續作業。

1. 在 Linux VM 安裝 git，設定專案 ID、專案編號和區域，並分別儲存為 PROJECT_ID、PROJECT_NUMBER 和 REGION 變數：

在 Linux 執行個體殼層輸入下列指令：

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 注意：輸出內容會顯示「warning: You appear to have cloned an empty repository.」，這是正常情況，因為存放區才剛初始化完成，尚未包含任何修訂版本。

點選「Check my progress」，確認目標已達成。 建立 Git 存放區

您現在可以開始建立網站架構了。

6. 在 Linux 殼層輸入下列指令：

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

一般情況下，hugo 指令會建立目錄，--force 選項會在現有的存放區目錄建立網站，您就可以將 Git 相關資訊保留在剛才複製的目錄中。

完成後，畫面會顯示訊息，指出網站已建立完成。

7. 安裝 hello-friend-ng 主題，設定網站版面配置。在 Linux 執行個體殼層輸入下列指令：

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. 開啟瀏覽器分頁，透過通訊埠 8080 連至外部 IP 位址。請使用下列網址，並將其中的 [EXTERNAL IP] 改成 hugo-dev-vm 執行個體的外部 IP 位址。

在 Google Cloud 控制台，依序前往「Compute Engine」>「VM 執行個體」，即可在「外部 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

網站應如下所示：

點選「Check my progress」，確認目標已達成。 在 TCP 通訊埠 8080 開啟網站

11. 返回 Linux 殼層，按下 Ctrl+C 鍵來停止 Hugo 伺服器。

將網站部署至 Firebase

1. 在 Linux 執行個體殼層安裝 Firebase CLI：

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

2. 接著需要初始化 Firebase，請在殼層輸入下列指令：

cd ~/my_hugo_site firebase init

3. 使用方向鍵和空白鍵選取「Hosting: Set up deployments for static web apps」，然後按下 Enter 鍵。

• 系統詢問專案選項時，請選取「Use an existing project」，並使用方向鍵、空白鍵和 Enter 鍵來選取專案 ID「」。

• 詢問公開目錄選項時，選取預設值「public」。

• 詢問是否設為單頁應用程式時，輸入「N」並按下 Enter 鍵。

• 詢問是否要透過 GitHub/外部 Git 設定自動建構及部署時，輸入「N」並按下 Enter 鍵。

• 詢問是否要安裝 Firebase 適用的 Agent Skills 時，選取「N」。

如果系統詢問是否覆寫任何現有檔案，請選取「Y」。

4. 現在可以開始部署應用程式了。請在 Linux 執行個體殼層輸入下列指令，使用 Hugo 重新建構網站並透過 Firebase 部署：

/tmp/hugo && firebase deploy

5. 應用程式部署完成後，畫面上會顯示託管網址，點選即可看到由 Firebase CDN (內容傳遞網路) 提供的相同網站。

如果看見的是一般歡迎訊息，請等待幾分鐘讓 CDN 初始化，再重新整理瀏覽器視窗。請記下這個託管網址，稍後會用到。

您已在本機完成所有部署作業，接著要使用 Cloud Build 建立完整的自動化程序。

工作 2：自動化部署作業

驗證環境變數

繼續操作前，請先確認工作階段的環境變數依然存在。如果您重新啟動過終端機工作階段或連線曾中斷，請在 Linux 執行個體殼層執行下列指令，重新定義環境變數：

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 殼層輸入下列指令，請留意 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 殼層輸入下列指令，建立 .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，請使用 git branch -m master main 指令，將該版本重新命名為 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

點選「Check my progress」，確認目標已達成。 建立 Cloud Build 自動建構觸發條件

Cloud Build 服務帳戶

Cloud Build 服務帳戶必須具備相關權限，才能透過 Firebase 部署網站。

Cloud Build	角色	說明
[PROJECT_NUMBER]@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	具備託管資源的完整讀取/寫入權限

測試管道

您成功建立了管道，現在可以進行修訂並提交變更，確認是否會套用至網站。

1. 在 Linux 殼層輸入下列指令，前往存放區目錄：

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 編輯器。

您也可在殼層執行下列 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 (超文本傳輸安全通訊協定) 存取。

點選「Check my progress」，確認目標已達成。 測試管道

恭喜！

您已學會如何運用 Cloud Build 自動調度管理管道，快速將 Hugo 網站部署至 Firebase，並由後者提供 CDN 與 SSL 憑證。Cloud Build 可讓您依需求自訂作業流程，縮短部署時間、加速創新，並輕鬆測試網站的修訂版本。詳情請參閱 Cloud Build 和 Firebase 說明文件。

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2026 年 6 月 18 日

實驗室上次測試日期：2026 年 6 月 18 日

Copyright 2026 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。