Netlify CMS for your Jekyll site

A few weeks ago I was wondering if I could build a static site for someone, while enabling them to add content to it without working in the terminal, preferably without using a proprietary or needlessly bulky solution.

I then wondered if there is any CMS tool for Jekyll, the static site generator I’m using for this blog - and it turns out that yes, indeed there is a great one! This means that it’s super easy to set up a blog, portfolio or landing site, the content of which the owner can manage, going forward, on a visual admin interface.

This CMS is made by the awesome team at Netlify (where this site is hosted, by coincidence!), and it’s available here.

It has fantastic straight-to-the point docs for integrating it with Jeykll. I won’t provide a step-by-step tutorial here, as they do it better already, but the TLDR is that you only have to:

include a few lines of Javasript in your default HTML template

add an admin directory in the root folder of your site, with

an admin/index.html file, with a script tag that imports the Netlify CMS app

an admin/config.yml file, specifying some settings for the admin site

authorise the admin app of your blog on GitHub.

Then, if you go to <your site url>/admin, you will be presented with a screen like this:

And after successful login with your GitHub account, you will see an admin UI where you can easily create and edit articles:

Editing an existing post shows you a rich text editor by default:

The CMS is highly customisable - I am barely scratching the surface of its full potential with my basic usage.
There are a ton of widgets that you can use - these are additional pieces of interfaces that you (and your editors and publishers) can use to interact with the content. There are widgets for inputting numbers, strings, dates, uploading a file (eg. an image for the cover of the post), and there is also a widget for interactive maps - very cool!

As an example, here is what admin/config.yml looks like for this blog:

All in all this is a great, flexible and lightweight approach of adding a CMS to a statically generated site. The Netlify CMS supports many popular site generators besides Jekyll - Hugo, Gatsby, NextJS and Nuxt being some examples.