共用方式為


將 Hugo 網站部署至 Azure Static Web Apps

本文示範如何將 Hugo Web 應用程式建立及部署Azure Static Web Apps。 最後的結果是新的 Azure 靜態 Web 應用程式與相關聯的 GitHub Actions,可讓您控制應用程式的建置和發布方式。

在本教學課程中,您會了解如何:

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

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

必要條件

  • 具有有效訂用帳戶的 Azure 帳戶。 如果您沒有帳戶,可以免費建立帳戶
  • GitHub 帳戶。 如果您沒有帳戶,可以免費建立帳戶
  • 已安裝 Git 安裝程式。 如果您沒有 Git,您可以 安裝 Git

建立 Hugo 應用程式

使用 Hugo 命令列介面建立 Hugo 應用程式(CLI):

  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 Static Web Apps。 下列步驟說明如何建立月臺的存放庫。

  1. https://github.com/new 名為 hugo-static-app 建立空白 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. 選取 靜態 Web 應用程式

  5. 選取 [建立]

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

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

  8. 輸入下列 GitHub 值。

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

    注意

    如果您沒有看到任何存放庫,可能需要在 GitHub 中授權 Azure Static Web Apps。 流覽至您的 GitHub 存放庫,並移至 [設定 > 應用程式>授權的 OAuth Apps],選取 [Azure Static Web Apps],然後選取 [授與]。 針對組織存放庫,您必須是組織的所有者才能授予許可權。

  9. 在 [建置詳細數據] 區段中,從 [建置預設] 下拉式清單中選取 [Hugo],並保留預設值。

檢閱及建立

  1. 選取 [ 檢閱 + 建立 ] 以確認詳細數據都正確無誤。

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

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

  4. 在資源畫面上 ,選取 URL 連結以開啟已部署的應用程式。 您可能需要等候一兩分鐘,GitHub Actions 才能完成。

    Deployed application

自訂 Hugo 版本

當您產生靜態 Web 應用程式時, 會產生工作流程檔案 ,其中包含應用程式的發佈組態設定。 您可以藉由在 區段中提供的值 HUGO_VERSION ,在工作流程檔案中 env 指定特定的 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新增 參數,將 設定0fetch-depth為 ,以更新工作流程檔案以擷取完整的 Git 歷程記錄(沒有限制):

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

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

清除資源

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

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

下一步