Gatsby Starter Henlo - The Best Starter for Netlify CMS

Gatsby is arguably the best choice for building simple, lightweight, highly optimized websites. For website developers, it provides answers to a lot of the weird problems we’ve had to accept in WordPress. However, the area it can’t compete with WordPress is out-of-the-box content management.

After playing around with most of the popular CMS options on the market, we found that Netlify CMS is the best solution to pair with Gatsby for smaller sites that only want to show an online presence and publish an article here or there.

Even though Netlify CMS is the right choice, users are limited in how they can maintain their website beyond simple content changes. Want to move a call to action further up the page? Bad luck. You’ll need to speak to your developer.

Our solution

Our solution to this problem is an official Gatsby + Netlify CMS starter that utilizes custom plugins and beta features to provide a WordPress-like experience.

In addition to unlocking flexible content management, the starter focuses on providing a way for developers and small businesses to build blazing-fast, simple, cheap-to-maintain websites.

Introducing Gatsby Starter Henlo

As an agency that builds websites for paying clients, we’re always on a mission to provide the best possible flexibility and performance. There are plenty of ways to deliver a performant site which are all slightly different depending on the stack we’re using. However, for flexibility, we use the same approach regardless of the CMS or technology.  

This CMS setup comes straight from Advanced Custom Fields (ACF) Flexible Content field in WordPress. Each section we create is a reusable component that can be added to any page through the site. This allows content editors to grow pages without any need for changing content structures and eases further development of the page.

Netlify CMS is my personal favourite flat-file CMS out there, that's why we decided to create a special starter that allows everyone to create absurdly fast, flexible websites without any issues.

Page Builder & Blocks - How to make Netlify CMS more flexible?

Since we like the way WordPress manages content, we started with 3 default post types - Pages, Posts and Authors. These are the basis of almost all modern websites.

Flexible pages

In our approach, there's no need for additional page templates because every page is controlled by a Page Builder. Using Blocks it's easy to generate blog pages, partner pages or any other page you want.

There's only one problem - slugs. By default, slugs are generated based on the file name of the markdown file created within the Netlify CMS collection. This causes quite an issue, that's why we had to create a widget - Netlify CMS Permalink Widget - which duplicates WordPress slugs handling. Instead of using filenames, we save slug directly in the markdown file, this allows for creating robust sitemaps with ease.

Additional Post Types

Posts & Authors are set up to create the blog functionality of the site. This can be extended further by adding additional post types (or collections using Netlify's CMS nomenclature).

Normally we want to use post types to re-use the content across different Blocks, but this can cause issues due to the way Netlify CMS works. We can refer to different documents by one of the populated fields, when the referred field changes the connection between Block and that document is broken (yes it's a massive pain in the ass).

The solution was brilliantly simple - unique IDs. We've created an additional widget for Netlify CMS to handle that, meet Netlify CMS ID Widget. This widget generates unique IDs for each document, which allows us to create connected Blocks for displaying selected posts/FAQs/case studies and any post type you might want.

While creating new post types you might want to use a slug widget as well, it can automatically add a base path, which allows content editors to change slugs quickly and efficiently while reusing Page Builder, helping you save development time.

Previews - out of the box!

To make sure Netlify CMS is the best it can be for users, previews are reusing the same Block components as the actual page (🤯). This allows for a quick preview of the content without a build phase. The only case you have to handle is a dynamic reference to other post types.

Forms builder - baked in 🔥

Netlify offers an amazing solution for handling forms, but creating forms with Gatsby kind of sucks. Well, no more!

Every website requires forms, so it was a no-brainer to include a system to generate and reuse them easily (think Contact Form 7 for Gatsby). Content editors can create native forms without the developer's help by utilizing instant previews, and reusing them across different pages.

Easily manageable settings

The last part to make Netlify CMS more approachable was introducing JSON-based settings. With this approach, fallback values such as SEO descriptions, titles and more can be changed from the CMS level directly and used even during build processes.

We've added this to enable you to create themes that can be reused across different pages when needed.

Great DX is crucial

Improvements to Netlify CMS were made to ensure the best developer experience. We switched to manual initialization dumping Yaml in favour of JavaScript config. Yes, you can use functions to generate collections (and yes it is awesome!). Working with lots of Blocks and different fields has never been easier!

Additionally, Netlify CMS is ready to be run locally. Hence, it's possible to change the configuration and review changes quickly, as well as create new content using Netlify CMS without creating markdown files.

All great features of Gatsby Starter Henlo

• 💪 Battle-tested starting point for small & large web projects
• 📄 Form Builder that enables Admins to create multiple forms with ease & Netlify Forms integration
• 🌗 Darkmode support
• 🗺 Sitemaps using gatsby-plugin-sitemap
• 🔥 Perfect score on Lighthouse for SEO, Accessibility and Performance
• 💇‍♀️ TailwindCSS support with PostCSS processing & PurgeCSS
• 🔌 Support for Gatsby API functions
• 🎇 Crazy fast images with gatsby-plugin-image
• 🕵️‍♂️ Complete SEO configuration with GraphQL fragment and reusable components
• Netlify deploy configuration
• Example pages, collections, CMS configuration with Netlify CMS & hooks
• Readme template for custom projects
• Easy Netlify CMS configuration using Manual Initialization ..and more

If you'd like to test it out, check out our Gatsby Starter Henlo GitHub repo