Going back to 11ty

written by druskus
on the 23rd of March 2025

11ty

I decided to switch back from Zola to 11ty for my blog. Here are some of the reasons why:

# 1. Zola lacks batteries

Zola is supposed to be a "batteries included" SSG. While using it, however, it felt more like I had to work around my problems with a mix of shortcodes and custom templates. Even things like adding relative static files to a post was a significant hassle.

Zola's templating engine felt young and incomplete. I believe I should be able to extend it with rust, and I still want to write my own SSG at some point, but that's a whole rabbit hole to get into.

# 2. 11ty has changed since I last used it

With the release of 11ty's v3 many of the things that I missed in 11ty are now available. A lot of the rough edges have been smoothed out and overall it seems like a much more mature project.

Speaking of rough edges, I decided to go against what I just said and write my blog using Web components (which are much less polished).

# 3. Web components!

Yes! This is what I have always wanted and it seemed like most Markdown based SSGs did not support it. Web components allow me to write and reuse custom HTML,CSS and JS bundles.

# 4. Flexibility

Being able to fall back to JS code generation whenever I need to write something complex, instead of coming up with a hacky solution in the templating language is a huge plus. Mixed with Web Components, I can, for example, easily write my own "heading" component that supports anchors, multiple levels and more.

I can even override how markdown-it (the markdown parser 11ty uses) renders elements, to insert my own webc components for links, images etc.

11ty's implementation of webc is still very early and there are lot of edge cases. For example:

  1. Rendering webc templates is behaves slightly different in: layouts, includes, and content files. Specially when combined with <slot> elements, webc:root, and when using @html.
  2. Soft refreshing sometimes is not enough. Eleventy's dev server sometimes needs a hard refresh to pick up changes in webc templates.
  3. Nesting <slots> has a lot of problems. See this issue.

To learn more about web components (specifically the webc package that 11ty uses, which is, from what I gather, quite different from the standard web components API) check out the following sources: