DEV Community

Cover image for Github Action for Gatsby Publish
Mark Roxberry
Mark Roxberry

Posted on • Originally published at roxberry.dev

Github Action for Gatsby Publish

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"
  },
Enter fullscreen mode Exit fullscreen mode

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/checkout@v1
      - uses: enriikke/gatsby-gh-pages-action@v2
        with:
          access-token: ${{ secrets.ACCESS_TOKEN }}
          deploy-branch: gh-pages
Enter fullscreen mode Exit fullscreen mode
  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

https://gist.github.com/roxberry/f6f58e2212346fd8c699c1d8c8cf8bcf.js

Discussion (0)