Quickstart: Building your first static site using the Azure CLI
Azure Static Web Apps publishes websites to production by building apps from a code repository.
In this quickstart, you deploy a web application to Azure Static Web apps using the Azure CLI.
- GitHub account
- Azure account.
- If you don't have an Azure subscription, you can create a free trial account.
- Azure CLI installed (version 2.29.0 or higher)
- A Git setup.
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 to deploy to Azure Static Web Apps.
- Navigate to the following location to create a new repository:
- Name your repository my-first-static-web-app
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.
Deploy a static web app
Now that the repository is generated from the template, you can deploy the app as a static web app from the Azure CLI.
Sign in to the Azure CLI by using the following command.
Create a resource group.
az group create \ --name my-swa-group \ --location "eastus2"
Create a variable to hold your GitHub user name.
Before you execute the following command, replace the placeholder
<YOUR_GITHUB_USER_NAME>with your GitHub user name.
Deploy a new static web app from your repository.
az staticwebapp create \ --name my-first-static-web-app \ --resource-group my-swa-group \ --source https://github.com/$GITHUB_USER_NAME/my-first-static-web-app \ --location "eastus2" \ --branch main \ --app-location "src" \ --login-with-github
The URL passed to the
--sourceparameter must not include the
As you execute this command, the CLI starts the GitHub interactive log in experience. Look for a line in your console that resembles the following message.
https://github.com/login/deviceand enter the user code 329B-3945 to activate and retrieve your GitHub personal access token.
Enter the user code as displayed your console's message.
Select Authorize AzureAppServiceCLI.
View the website
There are two aspects to deploying a static app. The first operation creates the underlying Azure resources that make up your app. The second is a workflow that builds and publishes your application.
Before you can go to your new static site, the deployment build must first finish running.
Return to your console window and run the following command to list the URLs associated with your app.
az staticwebapp show \ --name my-first-static-web-app \ --query "repositoryUrl"
The output of this command returns the URL to your GitHub repository.
Copy the repository URL and paste it into your browser.
Select the Actions tab.
At this point, Azure is creating the resources to support your static web app. Wait until the icon next to the running workflow turns into a check mark with green background ( ). This operation may take a few minutes to complete.
Once the success icon appears, the workflow is complete and you can return back to your console window.
Run the following command to query for your website's URL.
az staticwebapp show \ --name my-first-static-web-app \ --query "defaultHostname"
Copy the URL into your browser to go to your website.
Clean up resources
If you're not going to continue to use this application, you can delete the resource group and the static web app by running the following command:
az group delete \ --name my-swa-group