你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

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

项目
01/10/2024

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

在本教程中，你将了解如何执行以下操作：

创建 Hugo 应用
设置 Azure 静态 Web 应用
将 Hugo 应用部署到 Azure

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

先决条件

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

创建 Hugo 应用

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

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

从名为 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 和过渡环境的区域	选择离你最近的区域。
Source	GitHub

选择“使用 GitHub 登录”，然后向 GitHub 进行身份验证。
输入以下 GitHub 值。

属性值

组织选择所需的 GitHub 组织。

存储库选择“hugo-static-app”。

分支选择“主要”。

注意

如果看不到任何存储库，则可能需要在 GitHub 中授权 Azure Static Web Apps。浏览到 GitHub 存储库，转到“设置”>“应用程序”>“授权 OAuth 应用”，选择“Azure Static Web Apps”，然后选择“授予”。对于组织存储库，你必须是组织的所有者才能授予权限。
在“生成详细信息”部分，从“生成预设”下拉列表中选择“Hugo”，并保留默认值。

属性	值
组织	选择所需的 GitHub 组织。
存储库	选择“hugo-static-app”。
分支	选择“主要”。

查看并创建

选择“查看 + 创建”，以验证详细信息是否全部正确。
选择“创建”，开始创建应用服务静态 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 应用创建的默认工作流文件将使用 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 应用资源：

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

后续步骤

添加自定义域