Anson LowZF Blog

moon indicating dark mode
sun indicating light mode

Netlify Plugin: Enable Gatsby Incremental Builds In My Blog

May 18, 2020 #Gatsbyjs, #Netlify

Received an email from Netlify last week, said Gatsby.js released something called incremental builds. It help to reduce the amount of work required to build a Gatsby.js site.

What is the incremental builds?

Based on my understanding, it’s something like when I push my website’s update to Netlify. Instead of rebuilding the entire site, Netlify will just update the part I make a change. Significantly decrease the Netlify build time especially for a large site.

The more you use Netlify’s build time, the more you need to pay. First 300 minutes of build time is FREE, Next 500 minutes is US 7.

I not sure why Netlify does this. Enable user to reduce the build time with plugin mean Netlify gain less income. If Netlify aware of this and still provide this kind of plugin to increase user experience, it’s a buddha’s heart enterprise. Thank you Netlify

Enough talk, let’s dig the guide!

Step 1: Upgrade Gatsby.js to the latest

Must be latest than v2.20.4. By the time you read this, Gatsby.js surely latest than the required version. In case you want to check out the version of Gatsby.js:-

npm list gatsby

The time I run this command, my Gatsby.js version is v2.20.36

Step 2: Enable Netlify Build Plugins

I log in to my Netlify account, at the upper right-hand corner. Click Build Plugins

Netlify homepage

Then click Enable the beta

Netlify dashboard

Choose the site you want to enable the build plugins.

Cannot find anson blog

I don’t see my blog is listed. I not sure why. Do you know what going on? Feel free to reach me out at Twitter

Step 3: Add the Gatsby Cache Netlify Build Plugin

No choice, I have to choose my company website to try out the plugin. The file size is also bigger than my blog. Good for trying out incremental build plugin.

By looking at the guide, it mentioned something called netlify.toml

Gatsby incremental build step 3

Is this file in Netlify site or in my gatsby.js project?

digging… finding… searching…

A few moments later time again

I think I should google it before trying to find it out myself.

netlify.toml file-based configuration

Ops, forgive me. I’m a real noob.

I add netlify.toml in my gatsby’s project root directory

Copy and paste the following code to the file

[[plugins]]
package = "netlify-plugin-gatsby-cache"

Step 4: Add the flag to enable Gatsby incremental builds

Go to package.json

Replace the build script with

"build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby build --log-pages"

According to the guide, adding —log-pages can see what Gatsby builds on each run

Ok, the exciting time is coming. Time to try incremental builds. Yohoo~~~

Push the new update and wait for Netlify to build.

netlify incremental build result first time

Ops~ si~ My bad, this is the first time I setup this Builds Plugin.

No result is shown for the first time.

Will update this blog when I get the result


A self-taught developer documenting and sharing his learning experience.
React.js • Gatsby.js • Next.js soon. More about me