Deploy an Azure Static Web App

1. Create an Azure Static Web App from the Azure Portal:

   • Select the resource group
   • Select the deployment method (GitHub in this case)
   • Select the GitHub account, organization, repository and branch
   • Select a framework. If your framework is not listed, you may need to update the GitHub Action

   Vitepress is not yet listed for instance. Other / Custom has been selected for the build presets.

   Set :

   • the App location, i.e. the folder in your GH repository where the package.json file for the static web site is located,
   • the API location, i.e. the folder in your GH repository where the package.json file for the API is located. The parameter is optional,
   • the output location, i.e. the output folder for the build. For a Vitepress static web app, the value is docs/.vitepress/dist

2. Choose the Deploymen configuration mode. The Deployment token mode is simpler to configure, and is recommended,

3. Select the region for the API, hosted in an Azure Function Application,

4. Set the tags,

5. Validate and deploy the configuration.

Once deployed, a Satic Web App and a GitHub Action are created. For Other / Custom framework presets, you may need to update the GitHub Action definition. For a Vitepress, it is the case. In the Build And Deploy step (Azure/static-web-apps-deploy@v1 type), add the app_build_command: "npm run docs:build" line in the parameters.

Sources:

• What is Azure Static Web Apps?
• Quickstart: Build your first static site with Azure Static Web Apps
• Build configuration for Azure Static Web Apps
• Vitepress - Azure Static Web Apps Deployment
• About SWA CLI