gatsby logo netlify cms logo

After upgrading to Gatsby v3 I noticed builds on netlify seemed to be taking a long time.

The main component taking time on builds seemed to be netlify cms.

NetlifyCMS React Component #

Changed netlify-cms to use external pre-built js to speed up build times.

The main difference between using the netlify cms react component & using pre-built js from netlify is the post preview when editing in netlify cms.

It is possible to set custom css styles for the preview pane on pre-built netlify-cms using CMS.registerPreviewStyle.

Cleanup Dependencies #

Removed some dependencies which are no longer required for the blog.

Deploy Times #

Before #

4:44:35 PM: success Building production JavaScript and CSS bundles - 144.258s
4:44:52 PM: info Done building in 187.134201731 sec
4:44:52 PM: Done in 188.06s.
4:44:59 PM: Site is live ✨
4:47:01 PM: Finished processing build request in 10m9.217468818s

After #

7:26:46 PM: success Building production JavaScript and CSS bundles - 60.790s
7:26:59 PM: info Done building in 92.066096274 sec
7:26:59 PM: Done in 92.34s.
7:27:26 PM: Site is live ✨
7:28:40 PM: Finished processing build request in 3m57.922657014s

netlify.toml Tweaks #

As I had disabled gatsby-plugin-netlify due to a problem with webpack on upgrading gatsby I added some default header rules with basic security headers.

Default Header Rules #

X-Frame-Options = "DENY"
X-XSS-Protection = "1; mode=block"
X-Content-Type-Options = "nosniff"
Referrer-Policy = "same-origin"

Redirects #

A cool feature with netlify is the ability to set redirects allowing me to redirect common RSS uri's (/feed, /rss) to rss.xml

Redirects can also forward to external websites.
I added redirects to my github & twitter profiles. (/gh, /github, /twitter)

  from = "/github"
  to = ""
  status = 301
  force = true

Pull Requests

Dependency Cleanup & Quicker Build Tweaks
Netlify Tweaks (Header Rules & Redirects)

The source for the site is available on github.