将 Hugo 站点部署到 Azure 静态 Web 应用

本文演示如何创建 Hugo Web 应用程序并将其部署到 Azure 静态 Web 应用。 最终结果是一个全新的 Azure 静态 Web 应用，其中包含关联的 GitHub Actions，使你可以控制生成和发布应用的方式。

本教程中，您将学习如何：

如果没有 Azure 帐户，请在开始前创建一个免费帐户。

先决条件

• 拥有有效订阅的 Azure 帐户。 如果没有帐户，可以免费创建一个帐户。
• GitHub 帐户。 如果没有帐户，可以免费创建一个帐户。
• 已安装 Git 安装程序。 如果没有 Git，则可以安装 Git。

创建 Hugo 应用

使用 Hugo 命令行接口 (CLI) 创建 Hugo 应用：

1. 有关 OS 上的 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 应用。 以下步骤展示了如何创建站点的存储库。

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”。
   分支	选择main。

   注释

   如果看不到任何存储库，则可能需要在 GitHub 中授权 Azure Static Web Apps。 浏览到 GitHub 存储库，转到“设置”>“应用程序”>“授权 OAuth 应用”，选择“Azure Static Web Apps”，然后选择“授予”。 对于组织存储库，你必须是组织的所有者才能授予权限。

9. 在“生成详细信息”部分，从“生成预设”下拉列表中选择“Hugo”，并保留默认值。

查看并创建

1. 选择“查看 + 创建”，以验证详细信息是否全部正确。

2. 选择“创建”，开始创建应用服务静态 Web 应用并为部署预配 GitHub Actions。

3. 部署完成后，选择“转到资源”。

4. 在资源屏幕上，选择 URL 链接，以打开已部署的应用程序。 你可能需要等待一两分钟，GitHub Actions 才能完成。

   

自定义 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

使用 SWA CLI 的替代部署

如果 Hugo 应用程序具有需要其他设置的依赖项（例如 GoLang 模块），则可以直接使用 Azure 静态 Web 应用 CLI 进行部署。 下面是安装 CLI 并部署应用程序的 GitHub Actions 工作流示例：

jobs:
   build_and_deploy_job:
      runs-on: ubuntu-latest
      name: Build and Deploy with SWA CLI
      steps:
         - name: Checkout code
            uses: actions/checkout@v3
            with:
               submodules: true

         - name: Install SWA CLI
            run: npm install -g @azure/static-web-apps-cli

         - name: Build Hugo site
            run: |
               # Install Hugo modules
               hugo mod get

               # Minify the supported output formats
               hugo --minify

         - name: Deploy with SWA CLI
            env:
               AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
            run: |
               swa deploy ./public --api-location ./api --env production

此工作流生成 Hugo 站点，并使用 Azure 静态 Web 应用 CLI 部署它。 它假定 go.mod 该文件位于项目的根目录中，用于管理依赖项和模块配置。

在 Hugo 应用程序中使用 Git 信息功能

如果你的 Hugo 应用程序使用 Git 信息功能，则为静态 Web 应用创建的默认工作流文件将使用 checkout GitHub 操作来提取 Git 存储库的浅表版本，默认深度为 1。 在这种情况下，Hugo 会将所有内容文件视为来自单个提交，因此它们具有相同的作者、最后修改时间戳和其他 .GitInfo 变量。

更新工作流文件以获取完整的 Git 历史记录，方法是在 actions/checkout 步骤下添加一个新参数，以将 fetch-depth 设置为 0（无限制）：

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

获取完整的历史记录会增加 GitHub Actions 工作流的生成时间，但 .Lastmod 和 .GitInfo 变量会准确无误并可用于每个内容文件。

清理资源

如果不打算继续使用此应用程序，可按以下步骤删除 Azure 静态 Web 应用资源：

1. 打开 Azure 门户
2. 在顶部搜索栏中，按之前提供的名称搜索应用程序
3. 单击应用
4. 单击“删除”按钮
5. 单击“是”以确认删除操作

后续步骤