Build and deploy your GatsbyJS app to Azure using GitHub Actions
Tags: gatsby, react, javascript
Published: 2020-04-09 06:57:40

---
title: Build and deploy your GatsbyJS app to Azure using GitHub Actions
published: true
description: Let's build a GatsbyJS app that when pushed to GitHub, triggers a GitHub action that builds and deploys our GatsbyJS app to Azure
tags: gatsby,react,javascript
---

## 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](https://portal.azure.com/#create/hub).

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

<img alt="Azure storage settings" src="https://dev-to-uploads.s3.amazonaws.com/i/ihp7hu5iypr6qr4s5kcg.png" />

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.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/wljuna4pmvl0tgb160ba.png" />

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

<img src="https://dev-to-uploads.s3.amazonaws.com/i/kt9q7j95ejps9o0bp0a4.png" />

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

```shell
npm install -g gatsby-cli
```


####Create a new site
```shell
gatsby new azure-gatsby-site
```


####Change directories into site folder
```shell
cd azure-gatsby-site
```

####Start development server
```shell
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.
```html
<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.

```shell
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 :grinning: 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**.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/39318bmcnenvu76uxgdx.png"/>

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.

```yaml
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 :grinning:

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


<img src="https://dev-to-uploads.s3.amazonaws.com/i/uefqv96jn534ovl1ujcy.png" />

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