Introduction to Netlify CMS

Gatsby is a powerful tool for quickly building web sites. You can build a portfolio site, and even a blog, backed by Markdown data. For someone technical, that's fine - you're probably already familiar with writing Markdown.

But let's say you're building a site for someone who's not technical, maybe a nonprofit organization. Most such folks don't want to deal with manually editing Markdown files, let alone having to learn how to use Git!

There are many solutions to this problem - there are many CMS offerings out there. Netlify CMS is a great one - plus, it's free!

About Netlify CMS

Netlify CMS gives you a nice user interface for managing your data. It has a basic WYSIWYG rich text editor. Under the hood, it saves all this data as Markdown and handles making Git commits for you.

A typical use case is managing blog posts, but you can use it for any kind of data. For example, you could use it to build a menu page for a coffee shop's web site, managing categories, items, and prices.

Basic configuration

Netlify CMS is easy to configure. The entire system is configured with a single YAML file. Content is structured into collections, and collections are configured with a set of fields depending on the shape of the data being stored.

Here's an example configuration for a blog collection:

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Body", name: "body", widget: "markdown" }

Note the different fields for the blog collection. The body field is special. A markdown field named body will be used as the main body of the Markdown file. The other fields will be stored as attributes in the front matter.

Fields can be one of several widget types. The widgets are building blocks that you can use to build the editing UI. There are basic widgets like Text, Datetime, Markdown, Number, etc.

There also special widgets such as List. Lists contain other widgets. For example, you may have a List of Text widgets to assign different categories to your blog posts.

You can even have Lists of other Lists!

Here's what an example blog post might look like that's created by Netlify CMS with the above configuration:

---
title: "Welcome to the Coffee Blog"
date: 2020-03-06T02:56:10.463Z
---
Hello, and welcome to the Coffee Blog! This is our first blog post. Stay tuned for more information soon!

When you write a new blog post in the Content Manager (that's the Netlify CMS user interface), it will create a new Markdown file, commit it to the Git repository, then push it to GitHub (or one of several other supported backends).

From there, assuming you've configured Gatsby with the proper plugins for sourcing and transforming Markdown data, Gatsby will pick up the new data and you'll have a new blog entry in your site.

Extensibility

Netlify CMS is pretty powerful out of the box, but you can make it even better with custom widgets and custom previews.

If the built-in widgets are not enough for your use case, there are also hooks to build your own widgets as React components to make for an even better editing experience.

Similarly, you can build custom preview components. By default, the CMS shows a very basic "preview" of the content you are creating. It doesn't have any styling, though. You can create custom preview components that pull in your site's pages/components so that you get a real-time preview of what the content will look like in the rendered site.

Compatibility

I should definitely stress that you don't need to use Gatsby in order to use Netlify CMS! It supports many other tools and site generators such as Hugo, Jekyll, NextJS, and Nuxt, to name a few.

More resources

For more detailed information, you can check out the Netlify CMS documentation at https://www.netlifycms.org/docs/.

I also just published a book all about building a Gatsby site with Netlify CMS. If you're curious, you can check it out here: https://leanpub.com/using-gatsby-and-netlify-cms

Lastly, I've created a coupon code that will give away 5 free copies of the book! First come, first serve. To get a free copy, go to http://leanpub.com/using-gatsby-and-netlify-cms/c/PbRwakrXflt1