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

教程：将 VuePress 站点发布到 Azure 静态 Web 应用

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

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

先决条件

从命令行接口创建 VuePress 应用（CLI）：

添加 文件夹 README.md 文件。

echo '# Hello From VuePress' > README.md

初始化 package.json 文件。
```
npm init -y
```
将 VuePress 添加为 devDependency.
```
npm install --save-dev vuepress
```
在文本编辑器中打开 package.json 文件，并将生成命令添加到 scripts 该节。
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
创建一个 .gitignore 文件以排除 node_modules 文件夹。
```
echo 'node_modules' > .gitignore
```

初始化 Git 存储库。

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

需要 GitHub 上的存储库才能连接到 Azure 静态 Web 应用。以下步骤演示如何为站点创建存储库。

从 https://github.com/new 名为 vuepress-static-app 创建空白 GitHub 存储库（不创建自述文件）。
将 GitHub 存储库作为远程存储库添加到本地存储库。请确保在以下命令中添加 GitHub 用户名代替 <YOUR_USER_NAME> 占位符。
```
git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
```
将本地存储库推送到 GitHub。
```
git push --set-upstream origin main
```

以下步骤演示如何创建新的静态站点应用并将其部署到生产环境。

在“ 基本信息 ”选项卡上，输入以下值。

资产	价值
Subscription	Azure 订阅名称。
资源组	my-vuepress-group
名称	vuepress-static-app
计划类型	免费
Azure Functions API 和过渡环境的区域	选择离你最近的区域。
来源	GitHub

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

此页面是否有帮助？