How to cache your Gatsby site for faster builds in Github Actions?

gatsby

05 Aug, 2022

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,

  1. I write a post or update content
  2. I push to github
  3. An action runs that takes care of the build
  4. It does this from the scratch everytime
  5. 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.

Your opinion matters

This is a rating plugin that I've used from Share This. Please do leave a rating, helps me improve the quality of my blog. Do share this with a friend or a collegue.

00:00
Can you stay a bit longer?