Thoughts on Building My First Gatsby + Contentful + Netlify Blog

Friday evening I decided to jump into GatsbyJS, using Contentful as a headless CMS. After spending more of my Friday night than I was planning to from excitement of trying something new, here are my thoughts.

Background

Gatsby is a static site generator for React, which means that the end result is static HTML, Javascript, and CSS, pre-built with modern technologies like React and GraphQL, using an API to access content from a CMS. It uses JAMstack methodology, rather than the older monolithic methodology of CMS's like WordPress that combines database, backend programming language, and UI in a large, slow framework. From the JAMstack site:

The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.

Compared to static site generators like Jekyll, the ability to use React components and pull content in easily from an API using GraphQL instead of having to use Markdown files is very powerful. It also mean the CMS can be a SaaS like Contentful, or a self-hosted solution like Cockpit or WordPress. With the right plugin, content can even be pulled from Wikipedia or Medium.

The CMS I used is Contentful, a SaaS that delivers your content space through an API. Content is written in Markdown on their site, and content modeling is simple and easy.

Friday Night

Getting that first successful development build was a little painful. Before this I had never seen a block of GraphQL, and am still fairly new to React. I was not familiar with the Contentful API either. So figuring out how to get everything to work nicely with my Contentful space and content was a bit of a learning curve. I'm sure future sites I build will be much easier to get set up.

But after that first successful build, expanding and customizing the site was a breeze. It was easy to focus on what I was building rather than how I was building it. The hot reload made playing with the design a pleasure.

The one annoyance I felt was having to restart the dev build every time I made an update to the content on Contentful, but it was no big deal.

Saturday

On Saturday, I happily kept building out the blog, until I started cleaning up my Contentful space. I had a multiple reference field for the Tags content type as well as a linked field for post images, and by completely deleting some posts, it caused an unrecoverable build error with Gatsby.

Nothing I tried would make it build again. I deleted two content models and re-wrote the posts and tags. I re-installed the Gatsby node module. I commented stuff out. It was frustrating.

At this point, I was invested enough in the project that I started digging through the Gatsby source code itself to figure out how to make it work again by handling the error. It did make me realize though that this marriage between Gatsby and Contentful is still really new and hasn't been completely battle-tested and gotten the kinks shaken out for wide adoption. I am looking forward to being a part of that process and contributing!

Sunday

Sunday morning, I wrapped up some changes I wanted to make to the site, and then published the branch to GitHub. I set up Netlify to hook into GitHub and Contentful, switched my custom domain's DNS settings, and before noon, I had the blog live on the web complete with SSL.

Now whenever I make a content update on Contentful, Netlify re-builds and deploys the site automatically, and within minutes the change shows up.

And when I push a code change to my branch on GitHub, Netlify again re-builds and deploys the site automatically.

It is so wonderfully simple to make a change on my local environment, using hot reloading to see the changes immediately, and then simply pushing the change to Github. And the site is blazing fast at under 2s for first load!

Conclusion

One downside I found with Contentful as a CMS is trying to write a blog post in mobile. Having the ability to create content on the move is important, but the UI is not mobile responsive. A bit disappointing in 2018.

Contentful is also a bit pricey when compared to self-hosted WordPress (probably the biggest competitor to headless CMS adoption). For a small blog or brochure site, WordPress can be self-hosted for under $10/mo. Contentful starts at $39/mo for a micro space after the first trial one. It's great for my personal blog, but not worth it for additional sites, and small clients on a tight budget would likely balk at the price. I would likely use WordPress as a content source rather than a SaaS like Contentful for those clients, but still use Gatsby for the front end.

Working with Gatsby, React, and GraphQL is so much fun. I don't find myself fighting with the tool, and development time is quick. So far, the blog I built is fairly simple, so I will start playing with adding plugins to give it more functionality and building out more complex features (maybe on a different site).

Again, compared to WordPress, building custom features is easier but I have yet to explore the ecosystem to determine if the number and variety of plugins for Gatsby/React can come close to competing with WordPress yet. From what I can tell, switching out a theme easily like WordPress is not possible.

My wish at this point would be to find a headless CMS as good as Contentful that is open-source and can be self-hosted. WordPress could be used as a self-hosted headless CMS, I just wish it could jettison the front end and do what it's best at: content management, not content display.

Overall, I am loving working with Gatsby and the Netlify + Gatsby + Contentful deployment pipeline.

I would definitely give this pipeline two thumbs up!