Netlify Build Tweaks

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

  • disabled plugin gatsby-plugin-netlify-cms to speed up build times
  • removed netlify-cms-app
  • removed gatsby-plugin-netlify
  • removed gatsby-plugin-netlify-cms
  • added admin/index.html to use pre-built netlify-cms from web
  • removed postb script from build in package.json

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.

  • disabled postcss plugin lostgrid
  • disabled plugin gatsby-remark-copy-linked-files
  • disabled plugin gatsby-remark-smartypants
  • removed gatsby-remark-smartypants
  • removed gatsby-remark-copy-linked-files
  • removed lost

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

  • RSS Feed
  • Github Profile
  • Twitter Profile

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

[[redirects]]
  from = "/github"
  to = "https://github.com/equk"
  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.

equk-gatsby