教學課程：將 Hugo 網站發佈至 Azure 靜態 Web Apps

發行項
11/22/2022

本文示範如何建立 Hugo Web 應用程式，並將其部署至 Azure 靜態 Web Apps。最終會產生新的 Azure 靜態 Web Apps (具有相關聯的 GitHub 動作)，讓您能夠控制建置和發佈應用程式的方式。

在本教學課程中，您會了解如何：

建立 Hugo 應用程式
設定 Azure 靜態 Web Apps
將 Hugo 應用程式部署至 Azure

如果您沒有 Azure 訂用帳戶，請在開始之前先建立 Azure 免費帳戶。

必要條件

具有有效訂用帳戶的 Azure 帳戶。如果您沒有帳戶，可以免費建立帳戶。
GitHub 帳戶。如果您沒有帳戶，可以免費建立帳戶。

建立 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]，並保留預設值。

屬性	值
組織	選取您想要的 GitHub 組織。
存放庫	選取 hugo-static-app。
分支	選取 [主要]。

檢閱並建立

選取 [檢閱 + 建立 ] 以確認詳細資料全都正確。
選取[建立] 以開始建立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 入口網站
在頂端的搜尋列中，依據您先前提供的名稱搜尋您的應用程式
按一下應用程式
按一下 [刪除] 按鈕
按一下 [是] 以確認刪除動作

後續步驟

新增自訂網域