Quickstart: Building your first static site using the Azure CLI

Azure Static Web Apps publishes a website to a production environment by building apps from a GitHub repository. In this quickstart, you deploy a web application to Azure Static Web apps using the Azure CLI.

If you don't have an Azure subscription, create a free trial account.

Prerequisites

Create a repository

This article uses a GitHub template repository to make it easy for you to get started. The template features a starter app used to deploy using Azure Static Web Apps.

  1. Navigate to the following location to create a new repository:
    1. https://github.com/staticwebdev/vanilla-basic/generate
  2. Name your repository my-first-static-web-app

Note

Azure Static Web Apps requires at least one HTML file to create a web app. The repository you create in this step includes a single index.html file.

Select Create repository from template.

Create repository from template

Clone the repository

With the repository created in your GitHub account, clone the project to your local machine using the following command.

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your GitHub username.

Next, switch to the new folder using the following command.

cd my-first-static-web-app

Create a static web app

Now that the repository is created, you can create a static web app from the Azure CLI.

Important

Make sure you are in the my-first-static-web-app folder in your terminal.

  1. Sign in to the Azure CLI by using the following command.

    az login
    
  2. Create a new static web app from your repository.

    az staticwebapp create \
        -n my-first-static-web-app \
        -g <RESOURCE_GROUP_NAME> \
        -s https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app \
        -l <LOCATION> \
        -b main \
        --token <YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>
    

    Important

    The URL passed to the s parameter must not include the .git suffix.

    • <RESOURCE_GROUP_NAME>: Replace this value with an existing Azure resource group name.

      • See the az group documentation for details on listing resource groups.
    • <YOUR_GITHUB_ACCOUNT_NAME>: Replace this value with your GitHub username.

    • <LOCATION>: Replace this value with the location nearest you. Options include: CentralUS, EastAsia, EastUS2, WestEurope, and WestUS2.

    • <YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>: Replace this value with the GitHub personal access token you previously generated.

    You can now view the created app in Azure.

  3. Open the Azure portal.

  4. Search for my-first-web-static-app from the top search bar.

  5. Select my-first-web-static-app.

View the website

There are two aspects to deploying a static app. The first provisions the underlying Azure resources that make up your app. The second is a GitHub Actions workflow that builds and publishes your application.

Before you can navigate to your new static site, the deployment build must first finish running.

The Static Web Apps overview window displays a series of links that help you interact with your web app.

Overview window

  1. Clicking on the banner that says, Click here to check the status of your GitHub Actions runs takes you to the GitHub Actions running against your repository. Once you verify the deployment job is complete, then you can navigate to your website via the generated URL.

  2. Once GitHub Actions workflow is complete, you can click on the URL link to open the website in new tab.

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance by running the following command:

az staticwebapp delete \
    --name my-first-static-web-app \
    --resource-group my-first-static-web-app

Next steps