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

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

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

本教程中,您将学习如何:

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

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

先决条件

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

创建 Jekyll 应用

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

  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 和过渡环境的区域 选择离你最近的区域。
    来源 GitHub
  7. 选择“使用 GitHub 登录”,然后向 GitHub 进行身份验证。

  8. 输入以下 GitHub 值。

    资产 价值
    组织 选择所需的 GitHub 组织。
    存储库 选择 jekyll-static-app
    分支 选择main

    注释

    如果看不到任何存储库,则可能需要在 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 才能完成。

    已部署的应用程序

自定义 Jekyll 设置

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

若要配置环境变量,例如 JEKYLL_ENV,将节 env 添加到工作流中的 Azure 静态 Web 应用 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. 单击“是”以确认删除操作

后续步骤