Use GitHub Actions to deploy GatsbyJS to Netlify
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
- 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 NetlifyNETLIFY_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 bycreate-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 toreplace
, 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.