Tutorial: Publish a VuePress site to Azure Static Web Apps Preview

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:

  • Create a VuePress app
  • Setup an Azure Static Web Apps
  • Deploy the VuePress app to Azure

Prerequisites

Create a VuePress App

Create a VuePress app from the Command Line Interface (CLI):

  1. Create a new folder for the VuePress app.

    mkdir static-site
    
  2. Add a README.md file the folder.

    echo '# Hello From VuePress' > README.md
    
  3. Initialize the package.json file.

    npm init -y
    
  4. Add VuePress as a devDependency.

    npm install --save-dev vuepress
    
  5. Open the package.json file in a text editor and add a build command to the scripts section.

    ...
    "scripts": {
        "build": "vuepress build"
    }
    ...
    
  6. Create a .gitignore file to exclude the node_modules folder.

    echo 'node_modules' > .gitignore
    
  7. Initialize a git repo.

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

Push your application to GitHub

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.

  1. Create a blank GitHub repo (don't create a README) from https://github.com/new named vuepress-static-app.

  2. 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
    
  3. Push your local repo up to GitHub.

    git push --set-upstream origin master
    

Deploy your web app

The following steps show you how to create a new Static Web Apps application and deploy it to a production environment.

Create the application

  1. Navigate to the Azure portal

  2. Click Create a Resource

  3. Search for Static Web Apps

  4. Click Static Web Apps (Preview)

  5. Click Create

    Create a Static Web Apps (Preview) in the portal

  6. For Subscription, accept the subscription that is listed or select a new one from the drop-down list.

  7. In Resource group, select New. In New resource group name, enter vuepress-static-app and select OK.

  8. Next, a name for your app in the Name box. Valid characters include a-z, A-Z, 0-9 and -.

  9. For Region, select an available region close to you.

  10. For SKU, select Free.

    Details filled out

  11. Click the Sign in with GitHub button.

  12. Select the Organization under which you created the repo.

  13. Select the vuepress-static-app as the Repository .

  14. For the Branch select master.

    Completed GitHub information

Build

Next, you add configuration settings that the build process uses to build your app. The following settings configure the GitHub Action workflow file.

  1. Click the Next: Build > button to edit the build configuration

  2. Set App location to /.

  3. Set App artifact location to .vuepress/dist.

A value for API location isn't necessary as you aren't deploying an API at the moment.

Build Settings

Review and create

  1. Click the Review + Create button to verify the details are all correct.

  2. Click Create to start the creation of the Azure Static Web Apps and provision a GitHub Action for deployment.

  3. Once the deployment completes click, Go to resource.

  4. 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 Action to complete.

    Deployed application

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web App resource through the following steps:

  1. Open the Azure portal
  2. In the top search bar, search for your application by the name you provided earlier
  3. Click on the app
  4. Click on the Delete button
  5. Click Yes to confirm the delete action

Next steps