Build and deploy your GatsbyJS app to Azure using GitHub Actions

Prerequisites

• Sign up for a free trial Azure account (https://azure.microsoft.com/)
• A GitHub account

By the end of this tutorial you should have a Gatsby web app, hosted on Azure Blob Storage, deployed using GitHub Actions whenever we push code to our master branch.

If sign up for Azure is complete and you've verified everything, then let's head over to the Azure Portal and create a resource.

1. Create a resource
2. Find and select Storage Account
3. Select free trial subscription
4. Create a new resource group name
5. Create a storage account name

You're safe to click on Review + create now which should pass validation checks and allow you to click Create, initialising the storage account deployment.

Click Go to resource.

Scroll down the left sidebar to find Static Website under Settings. Click that and select Enabled followed by adding index.html as the index and error document paths - hit Save.

You should now see your primary endpoint which is were our GatsbyJS app will live.

Create our GatsbyJS app

We will follow Gatsby's quick start to get our app up and running quickly.

Install the Gatsby CLI

npm install -g gatsby-cli

Create a new site

gatsby new azure-gatsby-site

Change directories into site folder

cd azure-gatsby-site

Start development server

gatsby develop

Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000

Open the app with your code editor or IDE and navigate to src/pages/index.js. Let's change the <h1> which will reload our app in the browser.

<h1>My Gatsby site on Azure</h1>

Head over to GitHub and create a new repository for your Gatsby code and then git initialise and push our Gatsby site to the repository.

git init
git add .
git commit -m "first commit"
git remote add origin <ORIGIN_URL_HERE>
git push -u origin master

Now we have our Azure Storage Account setup and our Gatsby site pushed to our GitHub repository 😀 We're in a good place!

Now go back to your Azure portal and open your Storage Account and click on Access keys in the side bar, then copy the Connection string

Go to your GitHub repository and click settings>secrets then add your secret as BLOB_STORAGE_CONNECTION_STRING, pasting in your connection string as the value. This will make it available for us to use as an environment variable in our GitHub Actions workflow.

Click the Actions tab followed by setup a workflow yourself.

This will add a .github/workflows/main.yml file to your repository and open a live code editor within GitHub. Remove everything in the code editor and replace with this.

name: Build and deploy Gatsby site to Azure Blob Storage

on:
  push:
    branches:
      - master #on push to the master branch do the jobs below

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@master

      - name: Set up Node.js version
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: npm install and build
        run: |
          npm install
          npm run build
      - name: Upload To Azure Blob Storage
        uses: bacongobbler/azure-blob-storage-upload@v1.0.0
        with:
          source_dir: public #gatsby build generates this file after build
          container_name: $web
          connection_string: ${{ secrets.BLOB_STORAGE_CONNECTION_STRING }}

Click on Create commit and then pull these changes locally, ensuring you can see the main.yml file in your code editor. Then go ahead and make a change to the README.md file and push the change to GitHub. Clicking the actions tab in GitHub should now show you your workflow running and successfully deploying to Azure Blob Storage 😀

If you visit the Static website primary endpoint which Azure gave us earlier you should see your GatsbyJS site.

GitHub Actions are cool and this is only touching the surface of what they can do for your development workflow.