11tyCMS

🎯 Key achievements:

  • Developed a FOSS, local, subscription free CMS for 11ty, powered by React, Zustand & Electron.

  • Presented live on THE Eleventy Meetup and gained 100+ Mastodon followers.

  • Surveyed 11ty users to integrate new features and plan development, design and improve user experience.

What is 11ty?

Eleventy is a static site generator (SSG). An SSG is a program that takes in content (markdown files in 11ty's case), and uses it to output a flat HTML file to upload to a web server. This is in contrast to WordPress, which dynamically generates a page with PHP code from templates and post data in an SQL database.

Why use an SSG like 11ty?

Because hosting a CMS is resource intensive, requires maintenance and its a security risk! If I have a WordPress website, I have to have a database, I need to make sure its configured securely, that all the settings are correct and that everything's locked down. But with an SSG site? All I have to worry about is that my HTML files are on the web server.

Whenever a user visits a SSG site, the web server just chucks them the HTML file. Much more efficient, far less security woes!

What is 11tyCMS?

11tyCMS is a local, serverless, and FOSS content management system for 11ty websites. You simply install 11tyCMS, open the source folder of your 11ty site, and 11tyCMS will give you a fully fledged CMS, right inside an electron app! No need for servers, or complicated database setups... Just you, your writing and the indie web (and beyond!).

Why did you start 11tyCMS?

I fell in love with 11ty last year. Its so fast to work with, and unbelievably flexible. You can do anything with it. But I noticed something: when I started my 11ty blog, I was writing all my Markdown posts in VS Code. It was a grim experience. No rich text editor, and... I was spending all day at work in VS Code, I didn't want to do my recreational writing in it!

So I began my search for an 11ty CMS. I couldn't find anything I wanted. I didn't want any databases or servers to deal with. Most of the solutions out there relied on servers or paid subscriptions. No good! I wanted something FOSS. And thus, 11tyCMS was born.

I'm so excited for 11tyCMS's future, as there's barely anything like it. My goal is to empower the indie web. The internet has become so centralised to a select few platforms, and I think we've strayed too far away from what made the internet so great: weird, quirky little websites where people gush about their hyperfixations. If 11tyCMS can be a part of making that easier for people, I'll have done my job right.

What technology does it use?

Electron

I didn't want to do this. People hate Electron, and I understand why: its very resource intensive, basically every other app on your computer is probably powered by it. Its a massive ram sink. However, it uses one of the most popular languages, it's cross platform and has rich resources and documentation.

I'm a JavaScript developer primarily, so it felt like the natural fit. I would have preferred Tauri otherwise. I don't mind learning Rust, but this is a side project and I don't have a lot of time. That and so many people know JavaScript, which means more developers can donate their time and skills to the project. That and JS has a rich range of frameworks and libraries to use.

React

This one's a no brainer. I've been making projects with React since 2017. I know it like the back of my hand, it has a fantastic library ecosystem and most JS devs are familiar with it.

Zustand

For my state management, I opted for Zustand. I didn't want to use Redux because it felt way overkill and far too heavy and complicated to learn for newcomer contributors. I want the codebase for this project to be as simple and easy to navigate for beginner contributors as possible. Zustand fits this bill!

Its fantastically easy to work with, super fast, super lightweight and very agile.

Milkdown

For the Markdown editor, I'm currently using Milkdown. It's a fantastic FOSS Markdown editor, with amazing rich text support and a thriving plugin ecosystem. I chose this editor for its performance and the ability to configure it to take images from my custom eleventy protocol (I made a protocol in Electron to give access to the 11ty site's assets folder). It feels amazing to work in and gives a great UX!

SQLite

When I said that 11tyCMS didn't use databases... I kind of lied. It does. But its not central to its function. It needs it to allow you to search through your posts by metadata. When you open your site in 11tyCMS, all the posts/files along with their metadata get cached into a SQLite db in memory. This allows you to paginate posts easily and search by metadata.

Chokidar

I use Chokidar to monitor file changes, vital for keeping the SQLite cache up to date! I monitor any delete, add or edit activity and update the SQLite cache accordingly with this.

What stage of development is it at?

It's in early beta right now, I just need to publish the builds! The project started off in what I call "MVP mode", which is when I code all the essential functionality, just so I can get a grip on the shape of the app and what it needs to do. After that? I start refactoring things and working on the design etc. But now, we're pretty firmly out of MVP mode, and have entered beta!

The features we have so far:

  • A rich markdown editor

  • The ability to create and delete collections

  • A site data editor, so you can change your site metadata and settings

  • Build and publish support

  • Support for multiple sites

  • Image upload support

  • A fully fledged metadata editor

There's so much more to come though, this is just the beginning.

What's next for 11tyCMS?

I have so many plans!

  • A better website, the current one is just a placeholder!

  • Rewrite all code in TypeScript

  • Integrated terminal

  • Integrated code editor for quick tweaking of your templates and stylesheets

  • Premade build and publish templates

  • Custom color scheme support

  • Responsive design

  • Further accessibility improvements

  • Nested collection support

  • More metadata options

  • Server side version

    • With authentication and permissions support

  • A plugin store


Overall? I'm so excited to see where I can take this project.

Languages:
  • Javascript
  • SQLite
  • CSS
Technologies:
  • Electron
  • React
  • Zustand
  • Markdown
  • 11ty
  • SQLite
  • NodeJS
Link