Skip to content

Latest commit

 

History

History
138 lines (97 loc) · 4.8 KB

publish-gatsby.md

File metadata and controls

138 lines (97 loc) · 4.8 KB
Raw
title description services author ms.service ms.topic ms.date ms.author ms.custom
Deploy a Gatsby site to Azure Static Web Apps
This tutorial shows you how to deploy a Gatsby application to Azure Static Web Apps.
static-web-apps
aaronpowell
static-web-apps
tutorial
01/10/2024
aapowell

Deploy 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:

[!div class="checklist"]

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

[!INCLUDE quickstarts-free-trial-note]

Prerequisites

Create a Gatsby App

Create a Gatsby app using the Gatsby Command Line Interface (CLI):

  1. Open a terminal

  2. 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

  3. Go to the newly created app

    cd static-web-app

  4. Initialize a Git repo

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

Note

If you are using the latest version of Gatsby you may need to modify the package.json to include "engines": { "node": ">=18.0.0" },

Push your application to GitHub

You need to have a repository on GitHub to create a new Azure Static Web Apps resource.

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

  2. 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

  3. 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

  1. Go 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-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

  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 gatsby-static-web-app.
    Branch Select main.

    [!NOTE] If you don't see any repositories, you may need to authorize Azure Static Web Apps on GitHub. Browse to your GitHub repository and go to Settings > Applications > Authorized OAuth Apps, select Azure Static Web Apps, and then select Grant. For organization repositories, you must be an owner of the organization to grant the permissions.

  9. In the Build Details section, select Gatsby from the Build Presets drop-down and keep the default values.

Review and create

  1. Select Review + Create 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, select Go to resource.

  4. On the resource screen, select 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-gatsby/deployed-app.png" alt-text="Deployed application":::

Clean up resources

[!INCLUDE cleanup-resource]

Next steps

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