Skip to content

Files

Latest commit

1bdafa6 · Mar 26, 2022

History

History
155 lines (106 loc) · 4.61 KB

publish-vuepress.md

File metadata and controls

155 lines (106 loc) · 4.61 KB
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

Tutorial: Publish a VuePress site to Azure Static Web Apps

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

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 main

Deploy your web app

The following steps show you how to create a new static site app and deploy it to a production environment.

Create the application

  1. Navigate to the Azure portal

  2. Select Create a Resource

  3. Search for Static Web Apps

  4. Select Static Web Apps

  5. Select Create

  6. 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
  7. Select Sign in with GitHub and authenticate with GitHub.

  8. Enter the following GitHub values.

    Property Value
    Organization Select your desired GitHub organization.
    Repository Select vuepress-static-app.
    Branch Select main.
  9. In the Build Details section, select VuePress from the Build Presets drop-down and keep the default values.

Review and create

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

  2. Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions 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 Actions to complete.

    :::image type="content" source="./media/publish-vuepress/deployed-app.png" alt-text="Deployed application":::

Clean up resources

[!INCLUDE cleanup-resource]

Next steps

[!div class="nextstepaction"] Add a custom domain