教學課程：將 VuePress 網站發佈至 Azure Static Web Apps

本文示範如何建立 VuePress Web 應用程式，並將其部署至 Azure Static Web Apps。最終會產生新的 Azure 靜態 Web Apps 應用程式 (具有相關聯的 GitHub 動作)，讓您能夠控制建置和發佈應用程式的方式。

在本教學課程中，您將瞭解如何：

先決條件

從命令列介面 (CLI) 建立 VuePress 應用程式：

將 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 Apps。下列步驟說明如何為您的網站建立存放庫。

從名為 https://github.com/new 的建立空白的 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 應用程式資源：

此頁面對您有幫助嗎？