Use GitHub Actions to deploy GatsbyJS to Netlify

6 min readMar 7, 2022

CI/CD for my site: thundermiracle.com used Netlify’s build service, but has recently moved to Github Actions. The kicker is the using of renovate which causes the lack of build minutes, and the GatsbyJS build issue after version up in Netlify build service.

tl;dr

I built a simple Github Action for deploying to Netlify easier with cache enabled. Which is as fast as using Netlify’s build service.

GitHub - thundermiracle/netlify-deploy: Github action to deploy to Netlify with Comments of Preview…

Github action to deploy to Netlify with Comments of Preview and Log URL. Add your Netlify Personal Access Token & Web…

github.com

renovate and GatsbyJS build problems

After import renovate, the number of pull requests has increased a lot.
The free quota of Netlify build service is only 300 minutes per month, and it counts for everything, including public and private. So after using renovate, I used 75% of my build minutes in one week.
Due to an upgrade of the GatsbyJS plugin gatsby-plugin-sharp, memory consumption has increased and it is no longer possible to build with Netlify build service.
https://github.com/gatsbyjs/gatsby/issues/35055

success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 12.929s - 90/90 6.96/serror UNHANDLED EXCEPTION write EPIPEError: write EPIPE

About Netlify

Benefits of Netlify’s build service

Configuration is particularly easy: add the following settings to `netlify.toml`(example of building GatsbyJS site), select the repository from the Netlify dashboard, and you’re on the way.

[build]
command = "yarn && yarn build"
publish = "public"

2. Gatsby-specific plugin exists to improve build speed.
Essential Gatsby

3. Netlify build service will comment the deployment log and preview URL into the pull request.

Disadvantages of Netlify’s build service

Build minutes are really low.

It all counts, regardless of whether it is public or private, but the Starter plan gives you just 300 minutes per month. This is considerably shorter than rival Vercel’s 6,000 minutes and Github Actions’ unlimited public and 2,000 private minutes.

※Which service you use is not determined solely by Build minutes, so you should check the details of each service yourself carefully.

Deploy GatsbyJS sites to Netlify with Github Actions.

Settings in Netlify

1. Stop builds in Netlify
Site settings → Build & deploy → Continuous Deployment → Build settings → Stop builds

2. Get your site’s API ID
Site settings → General → Site details → Site information → API ID

3. Get personal access token
User settings → Applications → Create new token

Settings in Github repository

1. Add actions secrets
In Settings → Secrets → Actions

NETLIFY_SITE_ID: Your site's API ID in Netlify
NETLIFY_AUTH_TOKEN: Your personal access token in Netlify

Configure Github Actions

Finally, we’re here to configure github actions. Of course, you can install Netlify-cli yourself in Github Actions and upload it to Netlify manually. To make the steps as easy as possible, we will use existing Github Actions this time.

List of Github Actions to be used.

※Caching does not work on action-netlify-deploy and it is somewhat slow, so if you are concerned about speed, you may want to write your own Github Actions script instead.

Preview Deploy for pull requests

1. Trigger
All pull requests should trigger the build.

on:
  pull_request:

2. Deploy preview site
Once the pull request is received, deploy in preview mode.

steps:
  - name: checkout
    uses: actions/checkout@v3- name: deploy preview version of GatsbyJS to Netlify
    uses: jsmrcaga/action-netlify-deploy@v1.7.2
    id: deploy_preview
    with:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
      build_command: yarn && yarn build
      build_directory: 'public'

Let’s break down the steps.

uses: actions/checkout@v3: Script for checking out source code.
uses: jsmrcaga/action-netlify-deploy@v1.7.2: Script for deploying to Netlify.
id: deploy_preview: ID for other steps to refer to the outputs of the current step.
with:: Set the parameters required for this Github Action.
build_command: yarn && yarn build: GatsbyJS build command.
build_directory: 'public': Output folder of GatsbyJS' build.

And we complete the configuration of deploying preview mode to Netlify.

3. Add comment to pull request after deployment finished
Adding the deployment log and preview URLs to the comments would make it easier to check that there are no problems with the pull request. We’ll use find-comment and create-or-update-comment to simplify the steps.

What we want to do are:

If comment does not exist: Use create-or-update-comment to create a new comment.
If comment does exist: Use find-comment to get the comment-id, and then modify it by create-or-update-comment.

steps:
  - name: find the comment
        uses: peter-evans/find-comment@v1
        id: fc
        with:
          issue-number: ${{ github.event.pull_request.number }}
          comment-author: 'github-actions[bot]'
          body-includes: Netlify Preview Deployment Information- name: create or update comment
        uses: peter-evans/create-or-update-comment@v1
        with:
          comment-id: ${{ steps.fc.outputs.comment-id }}
          issue-number: ${{ github.event.pull_request.number }}
          body: |
            Netlify Preview Deployment Information
            - Log URL: ${{ steps.deploy_preview.outputs.NETLIFY_LOGS_URL }}
            - Preview URL: ${{ steps.deploy_preview.outputs.NETLIFY_PREVIEW_URL }}
          edit-mode: replace

Let’s break down the steps again.

issue-number: The issue number of current pull request.
comment-author: The author of comment（Should be github-actions[bot]）。
body-includes: String to be included in the body of the comment.

The target comment can now be searched.

comment-id: The ID of the comment obtained by the find-comment step. (Empty if none)
issue-number: The issue number of current pull request.
body: The comment.
Netlify Preview Deployment Information: The title of the comment and also the condition for search.
${{ steps.deploy_preview.outputs.NETLIFY_LOGS_URL }}: URL of the log generated by the deployment step to Netlify.
${{ steps.deploy_preview.outputs.NETLIFY_PREVIEW_URL }}: Preview url generated by the deployment step to Netlify. ※ The available outputs ofaction-netlify-deploy is here。
edit-mode: When set to replace, it'll update the comment rather than append to it.

Configuration for pull requests is now completed.

When you create a pull request, Github Actions will deploy it in preview mode and add comment to it like this.

Deploy for production

Once merged, we need to deploy it in production mode. The configuration is almost the same as .github/workflows/production.yaml. However, as you don't need comments, comment-related settings are not required.

name: 'Netlify Deploy'on:
  push:
    branches:
      - masterjobs:
  deploy:
    name: 'Deploy'
    runs-on: ubuntu-lateststeps:
      - name: checkout
        uses: actions/checkout@v3- name: deploy production version of GatsbyJS to Netlify
        uses: jsmrcaga/action-netlify-deploy@v1.7.2
        with:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
          NETLIFY_DEPLOY_TO_PROD: true
          build_directory: 'public'
          build_command: yarn && yarn build

The only thing to note is that: NETLIFY_DEPLOY_TO_PROD MUST be set to true.

Finished

This completes the configuration of the Github Actions, which is almost identical to the Netlify build. Hope it helps you.

Originally published at https://thundermiracle.com.