GitHub Actions: How to Save Netlify Build Time for Your Gatsby Site
When I decided to develop a portfolio site I chose to employ a Jamstack architecture not only for its performance and ease of development but also for its low cost. I wanted to make a site with the lowest budget possible, and Jamstack’s ethos of hosting static files to a CDN fit the bill perfectly.
That’s why I chose to build my site using the popular static site generator GatsbyJS and Strapi as my CMS, hosting them on Netlify and Heroku respectively.
Why use GitHub Actions?
This was a great setup for my use case but one thing I had to keep in mind was the limit of 300 build minutes per month that Netlify places on its free tier users. This can add up quickly especially if you have other projects hosted on Netlify.
So I began looking for ways to conserve build minutes and came across this article which inspired me to use GitHub Actions to achieve my needs.
With GitHub Actions you can have unlimited build minutes as long as your repository is public or a limit of 2000 minutes per month for a private repository.
In this article I will outline how to set up GitHub Actions to automate deployment to Netlify, and create webhooks in your Strapi API to trigger builds in your repository.
What is GitHub Actions?
GitHub Actions automate tasks and streamline software development lifecycle workflows. Actions can be used to build, test, and deploy code and enables CI/CD capabilities directly from your repository.
An external event triggers a set of commands, which is outlined in a workflow file in the root of the repository, which in my case will build and deploy my Gatsby site to Netlify. For further reading go here.
Outline commands in a workflow file
GitHub Actions commands live in a YAML file stored at the root of a repository at .github/workflow. The easiest way to create a workflow file is through the GitHub UI:
Now configure your main.yml like this:
Running from the top, on ensures that this code is triggered by pushes to the main repository and by repository dispatches, which are webhooks we will set up later in our Strapi API.
Our workflow defines a single job named build which builds the Gatsby site in a node environment then deploys the build directory to Netlify. Sensitive data, such as Netlify credentials, is saved as environment variables called repository secrets in GitHub.
Save Netlify credentials as repository secrets in GitHub
First you need to locate your credentials so login to Netlify, select your site then go to Site settings > Site information > API ID. Copy this as you will need to save this later as NETLIFY_SITE_ID.
Next, go your Netlify profile avatar at the top righthand corner of the page then click User settings. Navigate to Applications > Personal access token > New access token. Give it a description and generate the token. Copy this token — you will save this as NETLIFY_AUTH_TOKEN token in a minute.
Go back to GitHub and navigate to your repository. Go to Settings > Secrets > New repository secrets. Enter the tokens you have saved with their corresponding names.
Create repository dispatch events in Strapi API
A repository dispatch is a webhook that you can use to trigger an Actions workflow by events that happen outside of GitHub.
A repository dispatch triggered from the Strapi app ensures that the Gatsby site is rebuilt each time content is created, updated or deleted in the Strapi content management system.
In this example I will use Octokit, the official APII client for GitHub, to make POST requests. So from the root of your Strapi directory, run the following command:
$ npm install @octokit/coreNext, navigate to the API file of the Strapi model where you wish to set up a repository dispatch.
For me this was ./strapi_dir/api/article/models/article.js. Now copy the code below:
Make sure to change 'YOUR-GITHUB-USERNAME' and 'YOUR-GITHUB-REPO-NAME' with your own details. In the above code, we are using Strapi lifecycle hooks to send a POST request after creating, updating, and deleting content. You can read more about Strapi hooks here.
We also use an environment variable of ${process.env.GITHUB_TOKEN} which we need to save wherever your Strapi app is deployed.
Generate and save GitHub personal access token
First we need to generate a GitHub Token so sign in to GitHub and click on the profile avatar on the top righthand corner then click Settings.
Navigate to Developer settings > Personal access tokens > Generate new tokens. Give your token a name then select the following scopes:
Once you generate the token, you will need to save it as an environment variable in whichever platform you deployed your Strapi app. My Strapi app is hosted on Heroku.
To save your GitHub Token there, go to Heroku, open your app and navigate to Settings > Reveal Cofig Vars. Save your GitHub access token from before as GITHUB_TOKEN.
Finished!
You can now turn off the continuous build function on Netlify as we have now enabled continuous deployment on GitHub Actions — saving you precious Netlify build minutes!
