title | description | services | author | ms.service | ms.topic | ms.date | ms.author | ms.custom |
---|---|---|---|---|---|---|---|---|
Tutorial: Publish a VuePress site to Azure Static Web Apps |
This tutorial shows you how to deploy a VuePress application to Azure Static Web Apps. |
static-web-apps |
aaronpowell |
static-web-apps |
tutorial |
05/11/2021 |
aapowell |
devx-track-js |
This article demonstrates how to create and deploy a VuePress web application to Azure Azure Static Web Apps. The final result is a new Azure Static Web Apps application with the associated GitHub Actions that give you control over how the app is built and published.
In this tutorial, you learn how to:
[!div class="checklist"]
- Create a VuePress app
- Setup an Azure Static Web Apps
- Deploy the VuePress app to Azure
- An Azure account with an active subscription. If you don't have one, you can create an account for free.
- A GitHub account. If you don't have one, you can create an account for free.
- Node.js installed.
Create a VuePress app from the Command Line Interface (CLI):
-
Create a new folder for the VuePress app.
mkdir static-site
-
Add a README.md file the folder.
echo '# Hello From VuePress' > README.md
-
Initialize the package.json file.
npm init -y
-
Add VuePress as a
devDependency
.npm install --save-dev vuepress
-
Open the package.json file in a text editor and add a build command to the
scripts
section.... "scripts": { "build": "vuepress build" } ...
-
Create a .gitignore file to exclude the node_modules folder.
echo 'node_modules' > .gitignore
-
Initialize a Git repo.
git init git add -A git commit -m "initial commit"
You need a repository on GitHub to connect to Azure Static Web Apps. The following steps show you how to create a repository for your site.
-
Create a blank GitHub repo (don't create a README) from https://github.com/new named vuepress-static-app.
-
Add the GitHub repository as a remote to your local repo. Make sure to add your GitHub username in place of the
<YOUR_USER_NAME>
placeholder in the following command.git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
-
Push your local repo up to GitHub.
git push --set-upstream origin main
The following steps show you how to create a new static site app and deploy it to a production environment.
-
Navigate to the Azure portal
-
Select Create a Resource
-
Search for Static Web Apps
-
Select Static Web Apps
-
Select Create
-
On the Basics tab, enter the following values.
Property Value Subscription Your Azure subscription name. Resource group my-vuepress-group Name vuepress-static-app Plan type Free Region for Azure Functions API and staging environments Select a region closest to you. Source GitHub -
Select Sign in with GitHub and authenticate with GitHub.
-
Enter the following GitHub values.
Property Value Organization Select your desired GitHub organization. Repository Select vuepress-static-app. Branch Select main. -
In the Build Details section, select VuePress from the Build Presets drop-down and keep the default values.
-
Select the Review + Create button to verify the details are all correct.
-
Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.
-
Once the deployment completes click, Go to resource.
-
On the resource screen, click the URL link to open your deployed application. You may need to wait a minute or two for the GitHub Actions to complete.
:::image type="content" source="./media/publish-vuepress/deployed-app.png" alt-text="Deployed application":::
[!INCLUDE cleanup-resource]
[!div class="nextstepaction"] Add a custom domain