DEV Community

Netlify CMS with Gatsby - Best Option with Some Quirks

Henrik Sommerfeld on November 22, 2019

When I needed a CMS for a Gatsby site, my choice became Netlify CMS. I'll talk about my criteria, pros and cons. This was a personal website made ...

Read full post

Bayu Angora • Nov 22 '19 • Edited

What about your Gatsby build and deploy time? Is it fast enough?

Henrik Sommerfeld • Nov 22 '19

I had that listed as a con when I started to write this up, but then removed it. I tried to compare build times with and without the CMS, but couldn't draw any definite conclusions. Since I use both image processing and fetching external data during build, I don't now how much slowness is added by Netlify CMS.

Anyway, currently Netlify says: "Build time: 3m 38s. Total deploy time: 4m 45s"

Bayu Angora • Nov 22 '19

Compared to my Hugo website with about 500 markdown posts (only article text without images), it only takes 1 minutes to build and deploy. By the way, thanks for your build and deploy times info.

Henrik Sommerfeld • Nov 22 '19

I use Hugo for my own blog and the build times were definitively my first initial negative reaction with Gatsby. I find Gatsby's tagline, "Fast in every way that matters", to be false, but I still like it. I also recently added image processing to my Hugo site and saw build time increase drastically, though still a lot quicker than Gatsby 🤷‍♂️

Bayu Angora • Nov 22 '19

Thanks for reference.

brattonross • Nov 22 '19

I've been using Netlify CMS with Gatsby recently and have been running into exactly the issues that you describe here. I'm interested to know how you got local development working!

One thing that this setup has been forcing me to do is to write presentational and container components, since we can't use graphql queries in previews. This is beneficial in a way for me, as I'm using storybook as a way to "visually test" my components, so I can use those presentational components for both the previews and storybook stories.

Henrik Sommerfeld • Nov 23 '19

For local development I have to following code in cms.js:

const isDevelopment = process.env.NODE_ENV === 'development';

if (isDevelopment) {
  window.CMS_ENV = 'localhost_development';
  const fileSystemBackend = require('netlify-cms-backend-fs');
  CMS.registerBackend('file-system', fileSystemBackend);
}

config.yml then contains the following:

localhost_development:
  backend:
    name: file-system
    api_root: /api

Checkout the linked files or clone the entire repo to see how it fits together.

Zeke Hernandez • Nov 23 '19

I made my church's website, redeemermn.com, with this combo, and yeah, the initial setup was rough (it was my first time with graphql, Gatsby, and NetlifyCMS), but after that it's been a great, free, solution.

Jared • Nov 24 '19

Interesting. I was planning on trying out this CMS for my portfolio site just to see if it's good enough for client work. It sounds like I should stick with contentful for now.

Jannik Wempe • Jan 27 '20

Hi Jared, I am just trying different headless CMS at the moment. Isn't the comparison to Contentful a bit unfair, because it is quite pricey? Or do you use the free tier for your production site? I am just trying to evaluate if the free tier of Contentful might be enough...

Jared • Jan 27 '20

Hi! I don't want to call myself an expert on either platform, so take my opinion as that of a person with limited experience with both Contentful and Netlify CMS.

With that out of the way, I think Contentful's free tier is more than enough for a small site. It's working fine for the site I'm developing now. The biggest issue for the free tier is that you only get one user...but it is a free tier, so I'm not gonna complain that their free tier is not enough haha

As far as NetlifyCMS, it's more work because you have to partially code the CMS side itself and, I gotta be honest, the documentation is not great. I did end up building on my own site with NetlifyCMS. I think I would have preferred to just use Contentful haha. I'm not done yet though, so maybe I'll see something in it that makes it more useful.

Either way, it's a work in progress.