Tutorial: Publish a Gatsby site to Azure Static Web Apps
This article demonstrates how to create and deploy a Gatsby web application to Azure Static Web Apps. The final result is a new Static Web Apps site (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 Gatsby app
- Setup an Azure Static Web Apps site
- Deploy the Gatsby app to Azure
- An Azure account with an active subscription. If you don't have one, you can create an account for free.
- A GitHub account. If you don't have one, you can create an account for free.
- Node.js installed.
Create a Gatsby App
Create a Gatsby app using the Gatsby Command Line Interface (CLI):
Open a terminal
Use the npx tool to create a new app with the Gatsby CLI. This may take a few minutes.
npx gatsby new static-web-app
Navigate to the newly created app
Initialize a Git repo
git init git add -A git commit -m "initial commit"
Push your application to GitHub
You need to have a repository on GitHub to create a new Azure Static Web Apps resource.
Create a blank GitHub repository (don't create a README) from https://github.com/new named gatsby-static-web-app.
Next, add the GitHub repository you just created 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>/gatsby-static-web-app
Push your local repository 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
Navigate to the Azure portal
Select Create a Resource
Search for Static Web Apps
Select Static Web Apps
On the Basics tab, enter the following values.
Property Value Subscription Your Azure subscription name. Resource group my-gatsby-group Name my-gatsby-app Plan type Free Region for Azure Functions API and staging environments Select a region closest to you. Source GitHub
Select Sign in with GitHub and authenticate with GitHub.
Enter the following GitHub values.
Property Value Organization Select your desired GitHub organization. Repository Select gatsby-static-web-app. Branch Select main.
In the Build Details section, select Gatsby from the Build Presets drop-down and keep the default values.
Review and create
Select the Review + Create button to verify the details are all correct.
Select Create to start the creation of the App Service Static Web App and provision a GitHub Action for deployment.
Once the deployment completes click, Go to resource.
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.
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:
- Open the Azure portal
- In the top search bar, search for your application by the name you provided earlier
- Click on the app
- Click on the Delete button
- Click Yes to confirm the delete action