A simpler stack: my experience with 11ty and Netlify CMS

Intro

For a new project, I tried out the new and popular static site generator (SSG) 11ty and the git-based CMS from Netlify. I also decided not to use any build tools like Webpack, Babel or PostCSS. The HTML, JavaScript and CSS that I write are as close as possible to the production code. Here's the finished project: www.comingsoon.ch

Building that website was an interesting and great overall experience. It also made me question my current stack.

Disclaimer: This is my personal experience

Current Stack

My go-to stack is Nuxt for the front end and Sanity for the CMS. I like this stack very much, but I have to admit that it is relatively complex and JS heavy, especially when knowing that I mostly build simple static sites with almost no interactivity. The problem stems from the way that I was introduced to web development as a self-taught developer. I build my first website with Angular 1, then moved to Vue 2. So I all knew was to build SPAs.
Then I read that SPAs are not SEO friendly and slow to start up because of all the JS that they ship. I logically decided to learn Nuxt because it was designed to solve these exact issues. Around that time, the JAMstack started to get really popular, so I configured Nuxt to behave exactly like a static site generator. It works, but the config is not pretty.

Nuxt introduces a layer of complexity because the code is executed server-side and then client-side after the site has hydrated into a SPA. Nuxt wants to provide the best of both worlds: SSR + SPA. But do I really need a SPA? It depends on the website, but for most of them, I don't think so.

As for Sanity CMS, I love working with it, but I wanted to try a git-based CMS since I like the idea of having both the content and the code stored and version-controlled alongside in GitHub. Also working with Sanity requires knowledge of GraphQL, which again is, in my opinion, overkill for basic websites.

11ty

I found it quite easy to get started with 11ty. As a tutorial, I just watch that video with the creator of 11ty. Then I realized that the best way to learn about 11ty is to explore the projects and starters. This exploration is especially useful for deciding about the folder structure. Actually everything about 11ty is left for you to choose from. While I enjoyed the freedom, I still prefer to be given a default way of doing things, as Nuxt does.

I chose Nunjuncks for the templating language as this seemed to be the most popular choice among 11ty users. Nunjuncks is good, but adding a markdown front matter completely messes up my auto-formatting in VS code. After hours of battling with VS Code, I just turned off that setting.
I have to say that I'm not a fan of the Nunjuncks syntax. I much prefer working with Vue.

CSS

I usually reach for Tailwind. However, Tailwind requires a build setup which I didn't want to set up. Moreover, almost all the content of that particular project comes from the CMS and Tailwind loses its main argument when it comes to styling CMS-generated content because I can't use its utility classes directly in the HTML.
It felt nice writing Vanilla CSS, but with the latest additions like CSS variables and CSS Grid.
Had the project been slightly bigger, I would have taken the time to set up Tailwind.

Netlify CMS

So after I finished building the frond end with my pages written in markdown, I connected to Netlify CMS. It took some trials and errors to make it work, but then WOW! All my pages magically appeared in the CMS admin UI! And when I save changes to a document, it opens a pull request on the repo, which in turn generates a Netlify Preview! This is so simple and yet so powerful! No need to write extra code to handle previews and the Netlify Preview is exactly what the content editor is going to get (no bad surprise). Plus, he can easily share the preview link with anybody (no limitations with auth tokens).

The downside is that it takes some time to generate the preview. That time can vary a lot depending on the size of the website, but in my case, it was about 20 seconds, which I think is very short, but still difficult to justify for a client who has been using Wordpress. Also since Netlify started charging for built time, it's no longer totally free.

Netlify CMS is an open-source project created by Netlify that relies heavily on the community for its development. It's not a proprietary product like Netlify Analytics or Netlify Forms. You can immediately see that difference by looking at the homepage.
This means that the dev experience is not what you usually can expect from Netlify. I personally didn't really mind, because I like to explore and figure things out. However, content editing is clearly centered around "tech people" with knowledge of markdown (and HTML). If your client is not tech-savvy, is not interested in learning markdown and wants an easy-to-use rich text editor, Netlify CMS is definitely not a good fit!

Simple, but with powerful serverless services

The final website is just a couple of HTML files with zero JavaScript (except for the admin area), but it makes use of Netlify Identity, Netlify Forms and Netlify Functions!

The form on the newsletter page is a Netlify Form that, on form submission, triggers a cloud function that adds the submitted email to the Mailchimp newsletter! I set up Netlify Form in front of the cloud function to take advantage of the spam protection that is included in Netlify Form.

Conclusion

Am I going to drop Nuxt and Sanity for 11ty and Netlify CMS?

Although I really like the concept and the open-source nature of Netlify CMS, I don't plan on using it for other projects, but I will keep an eye on it. Working with Netlify CMS both as a developer and as a content editor is just not a great experience, especially compared to Sanity.
I do want to try other git-based CMS, like Forestry. I'm also intrigued by TinaCMS. But in the meantime and for the foreseeable future, I'll happily continue to use Sanity as my go-to CMS. With it, I feel like I can take on any projects, no matter how complex the data structure is. I also subscribe to its structured content approach.

As for 11ty, I enjoyed it very much, and I would like to use it for other projects. The combo 11ty + Sanity could be an interesting one.
I'll keep Nuxt as my main SSG, especially since Nuxt 3 will bring some welcome improvements and simplifications in that regard. And no matter the project, it's always good to have the full power of Vue at hand.