Sasivarnan R
Articles by Sasivarnan

Articles by Sasivarnan

Deploy Gatsby Site to GitHub Pages using GitHub Actions

Photo by Athanasios Papazacharias on Unsplash

Deploy Gatsby Site to GitHub Pages using GitHub Actions

Sasivarnan R
·Dec 3, 2019·

2 min read

Play this article

We are seeing an increase in the popularity of JAMStack. Gatsby is one of the popular JAMStack frameworks.

There are a lot of tools and services available to host a static site build by Gatsby. GitHub Pages, a free static site hosting service by GitHub, is one of them.

In this article, we will see how to build and deploy your existing Gatsby site using GitHub Actions on every push to GitHub repo where your site is stored.

  • In your package.json file, add a build script pointing to gatsby build (Most starters will already have it).

      "scripts": {
        "build": "gatsby build"
  • Create a GitHub access token by following the steps over here. Please note that the token must be generated with repo permissions.

  • Open your GitHub repo settings, and go to the Secrets section. Click on Add a new secret. Fill ACCESS_TOKEN in the Name field and fill your generated access token from the previous step in the Value field. Click on the Add secret button.

GitHub Add a new secret form

  • Now, create a yml file in following path .github/workflows/deploy-on-push.yml and paste the following contents to it.

    name: Gatsby Build and Deploy to GitHub Pages on Push
          - master
        runs-on: ubuntu-latest
          - name: Checkout
            uses: actions/checkout@master
          - name: Build and Deploy
            uses: JamesIves/github-pages-deploy-action@master
              ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
              BRANCH: gh-pages
              FOLDER: public
              BUILD_SCRIPT: yarn && yarn run build
  • Commit your changes and push them to your GitHub repo.

This GitHub action will trigger if any push happened to master, spawns a ubuntu instance and check out the repo. Then it will do yarn and yarn build, which will generate the output to public directory. The contents of the public folder will be deployed to gh-pages branch.

Now on every push to your repo will build your site and deploy it to GitHub pages.

I hope this helped you to set up the deployment of Gatsby site to GitHub Pages using GitHub actions. Feel free to ask anything around this in the comments section below.

Did you find this article valuable?

Support Sasivarnan R by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
Share this