Little confession here: when I first saw Netlify CMS at a glance, I thought: cool, maybe I’ll try that someday when I’m exploring CMSs for a new project. Then as I looked at it with fresh eyes: I can already use this! It’s a true CMS in that it adds a content management UI on top of any static site generator that works from flat files! Think of how you might build a site from markdown files with Gatsby, Jekyll, Hugo, Middleman, etc. You can create and edit Markdown files and the site’s build process runs and the site is created.
Netlify CMS gives you (or anyone you set it up for) a way to create/edit those Markdown files without having to use a code editor or know about Pull Requests on GitHub or anything. It’s a little in-browser app that gives you a UI and does the file manipulation and Git stuff behind the scenes.
Here’s an example.
Our conferences website is a perfect site to build with a static site generator.
It’s on GitHub, so it’s open to Pull Requests, and each conference is a Markdown file.
That’s pretty cool already. The community has contributed 77 Pull Requests already really fleshing out the content of the site, and the design, accessibility, and features as well!
I used 11ty to build the site, which works great with building out those Markdown files into a site, using Nunjucks templates. Very satisfying combo, I found, after a slight mostly configuration-related learning curve.
Enter Netlify CMS.
But as comfortable as you or I might be with a quick code edit and Pull Request, not everybody is. And even I have to agree that going to a URL quick, editing some copy in input fields, and clicking a save button is the easiest possible way to manage content.
That CMS UI is exactly what Netlify CMS gives you. Wanna see the entire commit for adding Netlify CMS?
It’s two files! That still kinda blows my mind. It’s a little SPA React app that’s entirely configurable with one file.
Cutting to the chase here, once it is installed, I now have a totally customized UI for editing the conferences on the site available right on the production site.
Netlify CMS doesn’t do anything forceful or weird, like attempt to edit the HTML on the production site directly. It works right into the workflow in the same exact way that you would if you were editing files in a code editor and committing in Git.
Auth & Git
You use Netlify CMS on your production site, which means you need authentication so that just you (and the people you want) have access to it. Netlify Identity makes that a snap. You just flip it on from your Netlify settings and it works.
The Git magic happens through a technology called Git Gateway. You don’t have to understand it (I don’t really), you just enable it in Netlify as part of Netlify Identity, and it forms the connection between your site and the Git repository.
Now when you create/edit content, actual Markdown files are created and edited (and whatever else is involved, like images!) and the change happens right in the Git repository.
I made this the footer of the site cause heck yeah.
When making the switch from WordPress to Hugo, not having some sort of back-end was kind of scary, but when I discovered Netlify CMS… I was a happy camper. It’s so easy and efficient, I almost feel like I don’t deserve to use it.
Yay for Headless CMS!
Forestry is also simple to plug to your Git repository and does also a very good job at creating Front Matter templates and editing documents, it should support 11ty soon :)
I can’t wait to test this out for our next project. We have been getting too dependant on WordPress lately.
Hello Chris. I recently published an npm package to CRUD domain data entries generated from Mardown/JS files, using the CLI. I was thinking about next features like a React component to edit content in browser on front end with instant update, and also a feature to handle “versions” of an entry. I comitted the latter this week. I was handling another feature to cache endpoints using a content based hash in their filenames, and I was also anticipating the need to publicly show differences between edits of an entry, and naturally thought that Git and/or Github and its API already are giving that.
I choosed to develop this “sub-versions” feature anyway because requiring and interacting with Git doesn’t seems to be the best/easiest path, and because of the following in the Github Pages terms of use: “GitHub Pages is not intended for or allowed to be used as a free web hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS).”
Storing data on Github and use it from your own website seems similar as what’s described above but it concerns Github Pages, not Repositories. Did you check that this usage is authorized? There’s also the limit on requests to Github API but it might be high enough to handle low/medium trafic websites.