你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn。
本文演示如何创建 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):
在终端中,运行 Jekyll CLI 以创建新应用。
jekyll new static-app
转到新创建的应用。
cd static-app
初始化新的 Git 存储库。
git init
提交更改。
git add -A git commit -m "initial commit"
将应用程序推送到 GitHub
Azure 静态 Web 应用使用 GitHub 发布网站。 以下步骤演示如何创建 GitHub 存储库。
从 https://github.com/new 命名 jekyll-azure-static 创建空白 GitHub 存储库(不要创建自述文件)。
将 GitHub 存储库作为远程存储库添加到本地存储库。 确保添加 GitHub 用户名,来替代下面命令中的
<YOUR_USER_NAME>
占位符。git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
将本地存储库推送到 GitHub。
git push --set-upstream origin main
注释
git 分支的命名方式
main
可能与 . 将此命令中的值替换为main
正确的值。
部署 Web 应用
下列步骤说明了如何创建新的静态站点应用并将其部署到生产环境。
创建应用程序
转到 Azure 门户
选择“创建资源”
搜索“静态 Web 应用”
选择“Static Web Apps”
选择 创建
在“基本信息”选项卡上,输入下列值。
资产 价值 订阅 Azure 订阅名称。 资源组 jekyll-static-app 名称 jekyll-static-app 计划类型 免费 Azure Functions API 和过渡环境的区域 选择离你最近的区域。 来源 GitHub 选择“使用 GitHub 登录”,然后向 GitHub 进行身份验证。
输入以下 GitHub 值。
资产 价值 组织 选择所需的 GitHub 组织。 存储库 选择 jekyll-static-app。 分支 选择main。 注释
如果看不到任何存储库,则可能需要在 GitHub 中授权 Azure Static Web Apps。 浏览到 GitHub 存储库,转到“设置”>“应用程序”>“授权 OAuth 应用”,选择“Azure Static Web Apps”,然后选择“授予”。 对于组织存储库,你必须是组织的所有者才能授予权限。
在“生成详细信息”部分,从“生成预设”下拉列表中选择“自定义”,并保留默认值。
在 “应用位置 ”框中,输入 ./。
将“API 位置”框留空。
在 “输出位置 ”框中,输入 _site。
查看并创建
选择“查看 + 创建”,以验证详细信息是否全部正确。
选择“创建”,开始创建应用服务静态 Web 应用并为部署预配 GitHub Actions。
部署完成后,选择“转到资源”。
在资源屏幕上,选择 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 应用资源:
- 打开 Azure 门户
- 在顶部搜索栏中,按之前提供的名称搜索应用程序
- 单击应用
- 单击“删除”按钮
- 单击“是”以确认删除操作