coder, maker, hacker, mentor

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.

Github Action for Gatsby Publish

posted on July 25, 2021 by Mark Roxberry
main post image
Steps to enable gatbsy publish on a push to main branch

Why?

The gatsby template includes scripting to deploy from whereever you cloned your code. It works just fine and is reliable when everything is set up on my machine. The package.json includes the deploy script:

  "scripts": {
      ...
    "deploy": "gatsby build --prefix-paths && gh-pages -d public"
  },

However, there are 2 drawbacks for my workflow (and my goal to start writing more):

  1. You can deploy without a commit and push to the repository
  2. You can't deploy without running the deploy script, so any work on the site on Github or my iPad won't get deployed until I commit and push on one device and then pull and deploy to the same repo on my computer. Ain't nobody got time for that.

I was using a Github Action for my Jekyll site, prior to moving to Gatsby, and that worked when I pushed to branch and kickoff the publish action. This action was a bit more involved as I was using Azure for a host and it required a few more configuration hurdles to set it up.

For my current site, I thought it has to be pretty simple - push to main branch, trigger an action, copy to gh-pages branch and that's that. Turns out, that is that and I was able to get it working pretty fast.

I documented my steps in case I need to go back and change anything - e.g. I would like to update the siteMetadata.version in the gatsby-config.js file at some point. Here are the steps

Steps to publish a Gatsby site to gh-pages

  1. Create a new workflow in the repository Actions section
name: Gatsby Publish

on:
  push:
    branches:
      main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/[email protected]
      - uses: enriikke/[email protected]
        with:
          access-token: ${{ secrets.ACCESS_TOKEN }}
          deploy-branch: gh-pages
  1. Create a personal access token (PAT), select the repo permission.

    Authentication in a Github Action Workflow

  2. Create a Secret in the repo: ACCESS_TOKEN and use the new PAT token (note the workflow YAML file specifies the ACCESS_TOKEN parameter).

  3. Build should kick in and go green

  4. Profit?

    And lo and behold, my site is passing (hopefully this shows it's passing): Gatsby Publish

Next things

  • Improve this post with images from Github
  • Add embedded gist for the main.yml
  • Config version update (need to think about - should only happen on non posts)
  • Create a tweet with the title if a post