NetlifyCMS & 11ty a Story Told in Three Acts

Holding a talk at the #2 Jamstack meetup in Wrocław, was really challenging. We had a knowledgeable public so no general-cutting-corners-gibberish talk would work there. Plus I’d had to match whatever Martin Walker from Contentful had in mind.

With Contentful being one of the best-known API-first headless CMSs that topic was out of bounds so to speak. So, I decided to introduce the crowd to Git-based CMSs, compare them with the API-driven approach, and spice it up with a couple of examples.

Now for the sake of this post, I'll give you a quick rundown of the topic I’ve covered. In case you want more I invite you to take a quick look at the deck I used and listen to the talk shared below.

Headless CMSs

Unlike the CMSs of so-called legacy systems like Wordpress or Joomla, headless CMS (also known as "Decoupled CMS") is not attached to the frontend. Because the CMS is separated from the actual website it is not responsible for serving the website or an app nor does it care where you use the content.

API driven CMS

There is a couple of ways Headless CMS can work. API-driven CMS is a cloud-hosted CMS. It gives developers a rest-like or graphql-like API to fetch content. Good examples are Sanity, Prismic, Storyblok, or Contentful.

Git-based CMS

The 2nd type is git-based CMSs and in the talk, I held I wanted to focus on this category. Git-based CMS is basically a layer on top of Git, it's interacting directly with the git repo. Every action that happens in the CMS like editing, creating, and deleting is an action taken as part of the git workflow.

NetlifyCMS is probably the most popular open-source and community-driven CMS and it works with every static site generator. Of course, there is Forestry which is definitely the most popular closed source git-based CMS which currently supports Hugo, Jekyll, and VuePress.

Of course, there is more to git-based CMSs but you’ll have to turn to the audio of the talk below for that.

Examples

Two actually. Recently, at Bejamas we've developed a simple website for a small Swiss-based company. Under the hood, we use Gatsby as a Static Site Generator, NetlifyCMS to manage the content, and PayPal for payment processing.

The whole setup works really great. It's fully static and crazy fast while the client is able to edit the content, receive orders and payments. Best of all, the hosting costs exactly 0 bucks per month and it is crazy fast.

The second one was for Oslo City Bike a service that allows you to rent a bike via the website or mobile app. Under the hood, Oslo City Bike uses Sanity as the API. Why mentioning it here?

Listen to the talk.

Last Piece Of The Puzzle: 11ty

11ty was created by Zach Leatherman to be a JavaScript alternative to Jekyll. It uses Node.js to transform templates into HTML files and it takes an advantage of a huge JavaScript ecosystem. You can develop a custom plugin, publish it to npm and other developers will be able to use it in their projects.

To dive deeper into how and why we used it please check out the talk below.