We've known Netlify's core team for a while now. They've been pioneering the JAMstack movement for years. Even before their SF startup trailblazing, their top priority has always been to empower developers with modern web dev tools.

The set of resources they've released is quite large, but today I'll solely explore their Git-based, React-powered open source CMS.

I'll touch on the web development approach it fosters, and show you how to strap it on a JAMstack site.

A Git-based approach to managing content

First, it's important to understand what you're getting into here.

The premise of the JAMstack is that you can leverage modern frontend tooling to create lighter, faster, more secure sites. And FYI, this isn't fringe developer extravaganza. Entire organizations like Smashing Magazine, Sequoi Capital & Mailchimp have migrated to the JAMstack.

One of the first implications here is decoupling the building & hosting of your site. You can "pre-bake" and pre-build static assets and then serve them on CDNs. This effectively frees your content from the database/templates imperatives of traditional CMS.

However, the content itself still needs to live somewhere. That's where Git—we'll focus on GitHub in this post—comes in.

To create your site, you can use a static site generator like Jekyll or Hugo. Or a JS framework like Angular, React, or Vue. It doesn't matter. The point is you store the site's content in a GitHub repository, where most of your pages can be simple Markdown/YAML files. Then, you deploy & host that static content on CDNs.

Having your content live in Git brings the power of version control to your content management. GitHub's well-oiled collaboration mechanisms—branches, forks, pull requests, merges—allow for easy tracking & rollbacks of site modifications (we'll see how Netlify CMS handles this with elegance).

This all sounds awesome... for developers. But asking non-technical peeps to create, edit, review and approve content in GitHub? That's a recipe for disaster.

Yet fear not, dear friends, for there are many ways to side-step said disaster. From headless CMS like Directus & Contentful to generator-specific CMS like Dato, there's a growing offering of tools out there.

Understanding Netlify's Git-based, React CMS

Netlify at its core is an automation platform to deploy modern static websites. They also happen to make cool open source projects. Netlify CMS is one of them.

In a nutshell, Netlify CMS is a Git-based, open source React CMS.

Compared to other polished but proprietary CMS products, it's an attempt at offering an open source standard to Git-centric content management. In other words, it aims at leveraging the budding community to become the WordPress of JAMstack & static workflows.

"SPA as a CMS" integration

Unlike some of its SaaS counterparts, Netlify CMS is a full-blown React app you add to your site. It can be plugged into any static site generator out there. You include it in your project with two simple files (cms.js & config.yml) along with its CSS. You can get the CMS from a CDN, or bundle it directly in your app.

It then binds to your /admin/ route to serve its interface.

So the cms.js will give you access to the React CMS UI layer.

And the config.yml is where you'll define content types & fields.

Netlify CMS groups the content it manages in collections. I'll show you a hands-on example later, but here's its full architecture.

GitHub content management workflow

You must have guessed it by now, but with Netlify CMS, your content lives in... GitHub! That's right, the CMS itself leverages GitHub's API to interact directly with your content repo. In that sense, it is "build-tool agnostic."

To use it, you'll need to give the CMS access to your GitHub account. You can invite users to a project site by adding them as collaborators or members of your organization. After that, non-technical folks won't have to interact with GitHub ever again.

It is a developer-first approach that loops non-technical users into an effective workflow. We can definitely get behind this at Snipcart. :)

Content management & editorial workflow

Once you've included the CMS on your site, content edition is a breeze. Add /admin at the end of your site's URL and you'll access the CMS UI.

Now, on a static site, edited content can't be built & "previewed" dynamically like with traditional CMS. The whole site must re-build for the new content to be accessible. So to help non-technical editors keep track of their changes, the React app includes a side preview rendering.

Another neat feature of Netlify CMS is the Git-based, optional "editor workflow". While simple, it caters to the needs of non-technical folks & more serious web publishers. It allows writers to submit drafts and editors to approve & publish them. But here's the cool part—what happens in GitHub under the hood:

A smart way to use Git branching!

Extending the CMS with React

React has become a frontend developer favorite these days, and Netlify makes good use of its reusable components system & Redux. The side by side preview React CMS template, for instance, can easily be enhanced with React components. Same thing goes for the content editor: you can add React-powered modules to it like color & image pickers. In a way, this opens up the door for developers who want to enhance the content management experience of non-technical folks.

You can see existing CMS widgets here, or better yet, contribute your own!

As for SEO, well, it'll be mostly handled in how you structure your site or app's content. Your CMS, however, can include whichever meta-fields you need.

Netlify CMS tutorial: installing it on a real GitHub repo

In this section, I'll show you how to strap Netlify CMS on top of a GitHub repo containing an existing static site. I'll use one of our most popular open source JAMstack projects: snipcart-jekyll-integration.

Our index.js file is where we will bundle the CMS package during our build process. Now, in this example, we won't actually extend the CMS in any way. Still, I thought it'd be nice to show you how to load it via webpack:

The last file is the most important. It's where we specify our GitHub repo, acting as a backend, and where we declare our collections structure. We could also define custom admin pages such as a settings one here.

Open your packages.json file and add these two to your scripts section:

"dev": "webpack && jekyll serve",
"build": "webpack && jekyll build"

This will output everything in a neat _site folder. And when you hit the /admin route, the React CMS will be loaded. If you change anything from there, it will update the Git repo and trigger back your build, assuming you set it up

Let's try it on Netlify's platform.

Booting up live: GitHub in the back, Jekyll in the front, and Netlify CMS in the middle!

Time to deploy this Netlify CMS demo!

Push everything to GitHub and go to http://netlify.com. Don't worry; if your project is open source, everything is free. :)

Hit the "New site from Git", then select GitHub and your repo.

You will have to use npm run build as your build command, and _site as your publish directory.

See the repo including Netlify CMS on top of our Snipcart-Jekyll integration

You can go to the /admin route, and the CMS will pop up.

Login through GitHub and you will see the React-powered editor:

If you add a new product, it will be pushed to the GitHub repo, and the build will be triggered.

And that's it!

This leaves us with some pretty cool JAM:

Light & fast static e-commerce site with Jekyll & Snipcart

Secure & version-controlled content repository in GitHub

Lightweight & extendable content management in Netlify CMS

Automated build & deployments with Netlify's platform

Both developers & non-technical folks should be happy with this set up. Job's done!

Conclusion

Playing around with Netlify CMS was great. Even if it's is still quite young, the documentation is concise and easy to follow. It really acts as a cool static site generator CMS. I had a small problem with the front-matter not loading correctly in the static files created under Windows. But I posted an issue, and it got sorted out in 15 minutes. Couldn't ask for better service! Overall, I must've spent an hour or so making this demo work.

Had I had more time, I could've ported the whole Jekyll site settings directly in Netlify CMS. It would have made it easy for non-technical peeps to edit the whole site as opposed to just products. Doing so would require injecting these settings in the Jekyll build.

Overall, I think that Netlify CMS is a small yet substantial step towards unified open source content management on modern JAMstack sites. I'm excited to see how developers start extending this new generation CMS, and how it grows with time & community input. Git makes a lot of sense for social coding, and I think it can do something similar for content management if harnessed right.