Deploying Your Gatsby Website with Github Actions

Github actions are a great way to automate all of your code on Github. Anything that you plan on doing more than once can be automated and leaving more time for the fun things.

Using the code walked through below you can reliably deploy your Gatsby Website on Github pages as easily as you push to a remote repository.

Create a New Github Action

Adding a workflow to your current repository can be done creating a new yaml file and adding it to .github/workflows/<workflow-name\>.yml. When this file is pushed to your remote Github Repo you will be able to find a new action on your repo action page.

Build the workflow file

You can find details of the breakdown below, or you can bottom of the page to view the full action file.

Add a Workflow name

name: Gatsby Publish

Add the Workflow Trigger

The trigger is the event that causes our Action to run. In this case I have set it so that a push to my master branch will result in a new website build. You can learn more about this in the workflow syntax docs.

on:
  push:
    branches:
      - master

Create Job

This is the where we define what we want to run to the GitHub runner.

Set up job
The first task is to set up the machine for the GHA(GitHub Action) to run on. You can view all machine options in the documentation
```
  jobs:
    build:
      runs-on: ubuntu-latest
```
Checkout the Repository
This step checks out the repository the action is in so you can access its code.
```
  - uses: actions/checkout@v2
```
Initialize Git User
This is necessary so that we can push to the deployment branch. The checkout action handles branch permissions, so we don't have to worry about authentication.
```
  - name: Initialize GH User
    run: |
      git config user.name "GitHub Actions"
      git config user.email "actions@github.com"
```

Set Up and Install Node Modules

Using the package.json file in the websites root we will set up npm and install the needed modules to build our website.

  - name: Set Node.js
    uses: actions/setup-node@master
    with:
      node-version: '16'

  - name: Install dependencies
    run: npm install

Build the Website
```
  - name: Build
    run: npm run build
```

Deploy the Website

First I copy over my CNAME file so that the website is served from my custom domain. Next, and this is where it gets especially confusing, I create a branch with the built website. To do this I commit the built website to the current branch and then use subtree to split the 'public' subdirectory into its own branch called 'gh-pages'. As gh-pages is the branch I serve my website from I then push this branch to origin where is published to the world

  - name: Deploy
    run: |
      # Add in the correct CNAME - Optional
      echo "<your-domain>" > public/CNAME

      # Commit the build then use 'git subtree' to create a branch with just the public contents
      git add public -f
      git commit -m "Build Production Website"
      git checkout -b gh-pages `git subtree split --prefix public master`

      # Push to Production
      git push --set-upstream origin gh-pages --force

Using the Action

Using this action now can spend less time deploying and more time developing! You can find the past runs for this action for this website in my repository, and you can find the actual file there as well.

Gatsby Deployment with GitHub Actions Full Code

name: Gatsby Publish

on:
    push:
        branches:
            - master

jobs:
    build:
        runs-on: ubuntu-latest
        steps:
            -   uses: actions/checkout@v2

            -   name: Initialize GH User
                run: |
                    git config user.name "GitHub Actions"
                    git config user.email "actions@github.com"

            -   name: Set Node.js
                uses: actions/setup-node@master
                with:
                    node-version: '16'

            -   name: Install dependencies
                run: npm install

            -   name: Build
                run: npm run build

            -   name: Deploy
                run: |
                    # Add in the correct CNAME - Optional
                    echo <your-domain> > public/CNAME

                    # Commit the build then use 'git subtree' to create a branch with just the public contents
                    git add public -f
                    git commit -m "Build Production Website"
                    git checkout -b gh-pages `git subtree split --prefix public master`

                    # Push to Production
                    git push --set-upstream origin gh-pages --force