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:

# admin/config.yml

  name: github
  repo: samuelbalogh/

media_folder: 'assets/uploads'

  - name: 'blog'
    label: 'Blog'
    create: true
    folder: '_posts/'
      - { name: title }
      - { label: "Body", name: "body", widget: "markdown" }

  - name: 'books'
    label: 'Books'
    create: true
    folder: '_books/'
      - { name: title }
      - { name: author }
      - { name: rating, widget: "number" }
      - { label: "Body", name: "body", widget: "markdown" }
      - { label: "Layout", name: "layout", widget: "hidden", default: "post" }
      - { label: "Date", name: "date", widget: "datetime", default: "", dateFormat: "YYYY-MM-DD" }

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.

Check it out at! 🙇‍♂️

Written on May 3, 2020

If you notice anything wrong with this post (factual error, rude tone, bad grammar, typo, etc.), and you feel like giving feedback, please do so by contacting me at Thank you!