教學課程:將 Hugo 網站發佈至 Azure 靜態 Web Apps
本文示範如何建立 Hugo Web 應用程式,並將其部署至 Azure 靜態 Web Apps。 最終會產生新的 Azure 靜態 Web Apps (具有相關聯的 GitHub 動作),讓您能夠控制建置和發佈應用程式的方式。
在本教學課程中,您會了解如何:
- 建立 Hugo 應用程式
- 設定 Azure 靜態 Web Apps
- 將 Hugo 應用程式部署至 Azure
如果您沒有 Azure 訂用帳戶,請在開始之前先建立 Azure 免費帳戶。
必要條件
建立 Hugo 應用程式
使用 Hugo 命令列介面 (CLI) 建立 Hugo 應用程式:
在您的作業系統上依照 Hugo 的安裝指南操作。
開啟終端機
執行 Hugo CLI 以建立新的應用程式。
hugo new site static-app
移至新建立的應用程式。
cd static-app
初始化 Git 存放庫。
git init
請確定您的分支名為
main
。git branch -M main
接著,將佈景主題安裝為 Git 子模組,然後在 Hugo 組態檔中加以指定,以將佈景主題新增至網站。
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke echo 'theme = "ananke"' >> config.toml
認可變更。
git add -A git commit -m "initial commit"
將您的應用程式推送至 GitHub
您需要 GitHub 上的存放庫,才能連線至 Azure 靜態 Web Apps。 下列步驟說明如何為您的網站建立存放庫。
從名為 hugo-static-app 的 https://github.com/new 建立空白的 GitHub 存放庫 (不要建立讀我檔案)。
將 GitHub 存放庫新增至本機存放庫的遠端。 請務必新增您的 GitHub 使用者名稱,以取代下列命令中的
<YOUR_USER_NAME>
預留位置。git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
將您的本機存放庫推送至 GitHub。
git push --set-upstream origin main
部署 Web 應用程式
下列步驟說明如何建立新的靜態網站應用程式,並將其部署至生產環境。
建立應用程式
移至 Azure 入口網站
選取 [建立資源]
搜尋靜態 Web 應用程式
選取Static Web Apps
選取 [建立]
在 [基本] 索引標籤中,輸入下列值。
屬性 值 訂用帳戶 您的 Azure 訂用帳戶名稱。 資源群組 my-hugo-group 名稱 hugo-static-app 方案類型 免費 Azure Functions API 和預備環境的區域 選取最接近您的區域。 來源 GitHub 選取 [使用 GitHub 登入 ],並使用 GitHub 進行驗證。
輸入下列 GitHub 值。
屬性 值 組織 選取您想要的 GitHub 組織。 存放庫 選取 hugo-static-app。 分支 選取 [主要]。 在 [建置詳細資料]區段中,從 [建置預設] 下拉式清單中選取[Hugo],並保留預設值。
檢閱並建立
選取 [檢閱 + 建立 ] 以確認詳細資料全都正確。
選取[建立] 以開始建立App Service靜態 Web 應用程式,並布建部署GitHub Actions。
部署完成後,選取 [移至資源]。
在資源畫面上,選取 URL 連結以開啟已部署的應用程式。 您可能需要等候一或兩分鐘,GitHub Actions才能完成。
自訂 Hugo 版本
當您產生靜態 Web 應用程式時,工作流程檔案會隨之產生,其中包含應用程式的發佈組態設定。 您可以在 env
區段中提供 HUGO_VERSION
的值,以指定工作流程檔案中的特定 Hugo 版本。 下列範例組態示範如何將 Hugo 設定為特定版本。
jobs:
build_and_deploy_job:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy Job
steps:
- uses: actions/checkout@v3
with:
submodules: true
- name: Build And Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy@v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "public" # Built app content directory - optional
###### End of Repository/Build Configurations ######
env:
HUGO_VERSION: 0.58.0
在 Hugo 應用程式中使用 Git 資訊功能
如果您的 Hugo 應用程式使用 Git 資訊功能,針對靜態 Web 應用程式建立的預設 工作流程檔案 會使用 簽出 GitHub Action 來擷取 Git 存放庫的 淺層 版本,預設深度為 1。 在此案例中,Hugo 會將所有內容檔案視為來自 單一認可,因此它們具有相同的作者、上次修改時間戳記和其他 .GitInfo
變數。
藉由在步驟下 actions/checkout
新增參數,將 設定 fetch-depth
為 0
(沒有限制) ,更新工作流程檔案以擷取完整的 Git 歷程記錄:
- uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
擷取完整歷程記錄會增加GitHub Actions工作流程的建置時間,但您的 .Lastmod
和 .GitInfo
變數會正確且適用于每個內容檔。
清除資源
如果您不打算繼續使用此應用程式,您可以透過下列步驟刪除 Azure 靜態 Web 應用程式資源:
- 開啟 Azure 入口網站
- 在頂端的搜尋列中,依據您先前提供的名稱搜尋您的應用程式
- 按一下應用程式
- 按一下 [刪除] 按鈕
- 按一下 [是] 以確認刪除動作