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

将 Jekyll 站点部署到 Azure Static Web 应用

本文演示如何创建 Jekyll Web 应用程序并将其部署到 Azure 静态 Web 应用

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

  • 创建 Jekyll 网站
  • 设置 Azure 静态 Web 应用资源
  • 将 Jekyll 应用部署到 Azure

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

先决条件

  • 安装 Jekyll
    • 如有必要,可使用适用于 Linux 的 Windows 子系统并按照 Ubuntu 说明操作。
  • 具有活动订阅的 Azure 帐户。 如果没有帐户,可以免费创建一个帐户
  • 一个 GitHub 帐户。 如果没有帐户,可以免费创建一个帐户
  • 已安装 Git 安装程序。 如果没有 Git,则可以安装 Git

创建 Jekyll 应用

使用 Jekyll 命令行接口 (CLI) 创建 Jekyll 应用:

  1. 从终端运行 Jekyll CLI 来创建一个新的应用。

    jekyll new static-app
    
  2. 转到新建的应用。

    cd static-app
    
  3. 初始化新的 Git 存储库。

     git init
    
  4. 提交更改。

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

将应用程序推送到 GitHub

Azure 静态 Web 应用使用 GitHub 来发布你的网站。 以下步骤展示了如何创建 GitHub 存储库。

  1. https://github.com/new 创建一个名为 jekyll-azure-static 的空白 GitHub 存储库(不创建自述文件)。

  2. 将 GitHub 存储库作为远程存储库添加到本地存储库。 确保添加 GitHub 用户名,来替代下面命令中的 <YOUR_USER_NAME> 占位符。

    git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
    
  3. 将本地存储库推送到 GitHub。

    git push --set-upstream origin main
    

    注意

    你的 git 分支的命名方式可能与 main 不同。 用正确的值代替此命令中的 main

部署 Web 应用

下列步骤说明了如何创建新的静态站点应用并将其部署到生产环境。

创建应用程序

  1. 转到 Azure 门户

  2. 选择“创建资源”

  3. 搜索“静态 Web 应用”

  4. 选择“Static Web Apps”

  5. 选择“创建”

  6. 在“基本信息”选项卡上,输入下列值。

    属性
    订阅 Azure 订阅名称。
    资源组 jekyll-static-app
    名称 jekyll-static-app
    计划类型 免费
    Azure Functions API 和过渡环境的区域 选择离你最近的区域。
    Source GitHub
  7. 选择“使用 GitHub 登录”,然后向 GitHub 进行身份验证。

  8. 输入以下 GitHub 值。

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

    注意

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

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

  10. 在“应用位置”框中输入“./”。

  11. 将“API 位置”框留空。

  12. 在“输出位置”框中,输入“_site”。

查看并创建

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

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

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

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

    Deployed application

自定义 Jekyll 设置

生成静态 Web 应用时,将生成一个工作流文件,其中包含应用程序的发布配置设置。

若要配置环境变量(如 JEKYLL_ENV),请将 env 部分添加到工作流中的 Azure Static Web Apps GitHub Actions。

- 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 source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

清理资源

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

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

后续步骤