Use GitHub Actions to deploy GatsbyJS to Netlify

Photo by Barth Bailey on Unsplash

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.

renovate and GatsbyJS build problems

  1. 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.
  2. 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

  1. 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.

Netlify Pricing
Vercel Pricing
Github Actions Pricing

※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:
- master
jobs:
deploy:
name: 'Deploy'
runs-on: ubuntu-latest
steps:
- 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.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting Started with Redux and Testing Library

From KnockoutJS to Vue

React. How to animate transitions between React Router routes

Is it pronounced route or route? I think it’s the first one.

Application Framework

ReactJs Hook :- UseRef()

RxJS 6 Patterns with Angular Material: Confirmation Dialog

RxJS, Angular and Material

Angular and React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ThunderMiracle

ThunderMiracle

More from Medium

Deploying Strapi Version 4, on Linode or any cloud host using PM2 via Github and accessing it from…

Solving Shopify’s Content Security Policies Requirement

Close up of hands typing on a laptop.

How to authorize and verify customers with Shopify apps

VPN & Proxy — Fingerprint Browser