教學課程:將 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 應用程式:

  1. 在您的作業系統上依照 Hugo 的安裝指南操作。

  2. 開啟終端機

  3. 執行 Hugo CLI 以建立新的應用程式。

    hugo new site static-app
    
  4. 移至新建立的應用程式。

    cd static-app
    
  5. 初始化 Git 存放庫。

    git init
    
  6. 請確定您的分支名為 main

    git branch -M main
    
  7. 接著,將佈景主題安裝為 Git 子模組,然後在 Hugo 組態檔中加以指定,以將佈景主題新增至網站。

    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
    echo 'theme = "ananke"' >> config.toml
    
  8. 認可變更。

    git add -A
    git commit -m "initial commit"
    

將您的應用程式推送至 GitHub

您需要 GitHub 上的存放庫,才能連線至 Azure 靜態 Web Apps。 下列步驟說明如何為您的網站建立存放庫。

  1. 從名為 hugo-static-app 的 https://github.com/new 建立空白的 GitHub 存放庫 (不要建立讀我檔案)。

  2. 將 GitHub 存放庫新增至本機存放庫的遠端。 請務必新增您的 GitHub 使用者名稱,以取代下列命令中的 <YOUR_USER_NAME> 預留位置。

    git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
    
  3. 將您的本機存放庫推送至 GitHub。

    git push --set-upstream origin main
    

部署 Web 應用程式

下列步驟說明如何建立新的靜態網站應用程式,並將其部署至生產環境。

建立應用程式

  1. 移至 Azure 入口網站

  2. 選取 [建立資源]

  3. 搜尋靜態 Web 應用程式

  4. 選取Static Web Apps

  5. 選取 [建立]

  6. 在 [基本] 索引標籤中,輸入下列值。

    屬性
    訂用帳戶 您的 Azure 訂用帳戶名稱。
    資源群組 my-hugo-group
    名稱 hugo-static-app
    方案類型 免費
    Azure Functions API 和預備環境的區域 選取最接近您的區域。
    來源 GitHub
  7. 選取 [使用 GitHub 登入 ],並使用 GitHub 進行驗證。

  8. 輸入下列 GitHub 值。

    屬性
    組織 選取您想要的 GitHub 組織。
    存放庫 選取 hugo-static-app
    分支 選取 [主要]。
  9. 在 [建置詳細資料]區段中,從 [建置預設] 下拉式清單中選取[Hugo],並保留預設值。

檢閱並建立

  1. 選取 [檢閱 + 建立 ] 以確認詳細資料全都正確。

  2. 選取[建立] 以開始建立App Service靜態 Web 應用程式,並布建部署GitHub Actions。

  3. 部署完成後,選取 [移至資源]。

  4. 在資源畫面上,選取 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-depth0 (沒有限制) ,更新工作流程檔案以擷取完整的 Git 歷程記錄

      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

擷取完整歷程記錄會增加GitHub Actions工作流程的建置時間,但您的 .Lastmod.GitInfo 變數會正確且適用于每個內容檔。

清除資源

如果您不打算繼續使用此應用程式,您可以透過下列步驟刪除 Azure 靜態 Web 應用程式資源:

  1. 開啟 Azure 入口網站
  2. 在頂端的搜尋列中,依據您先前提供的名稱搜尋您的應用程式
  3. 按一下應用程式
  4. 按一下 [刪除] 按鈕
  5. 按一下 [是] 以確認刪除動作

後續步驟