How to cache your Gatsby site for faster builds in Github Actions?
We all start small, but once our content grows, soon we'll be finding ourselves with 300 pages at hand. This severly impacts the build time of the blog, unless you host it in Gatsby Cloud, which I hear has 100x faster build times than normal conventional builds.
My workflow
I use Github actions for my CI/CD pipeline. It's pretty cool and awesome but I'm planning to use Netlify as well. So, my workflow is like this,
- I write a post or update content
- I push to github
- An action runs that takes care of the build
- It does this from the scratch everytime
- Takes 3 to 4 mins to complete
We can optimize this build time by caching our assets and other folders that do not change often. For now, we will be caching our public and the .cache folder.
Finally, some code
This is the code that can be used to cache and do an incremental build using Github Actions. This goes into my action.yml file.
name: Gatsby Publish
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Caching Gatsby
id: gatsby-cache-build
uses: actions/cache@v2
with:
path: |
public
.cache
key: ${{ runner.os }}-gatsby-build-${{ github.run_id }}
restore-keys: |
${{ runner.os }}-gatsby-build-
- name: Build
run: npm install --legacy-peer-deps && npm run build --log-pages
env:
GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES: true
CI: true
As you can see, GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES: true this needs to be set to true for this to work properly. Hope this helps, do follow my blog for more updates and contents like this.