11ty Demos

Why every demo has to actually work

2026-02-24T00:00:00Z

Early on I could have written this site as a set of articles explaining Eleventy patterns, with code snippets and screenshots. I didn’t, because I’ve read plenty of tutorials like that and forgotten them a week later.

So every demo here has a “Live Implementation” section that’s the real, working thing: the actual header search, the actual theme toggle, the actual multi-level nav. If a code snippet ever drifts from what’s really running, it’s a bug, not just an out-of-date doc. That’s a much better forcing function for keeping things honest.

Static doesn't mean boring

2026-02-21T00:00:00Z

“Static site” makes people picture something plain: a few pages, no interactivity, done. But nearly everything on this site — the search, the theme toggle, the multi-level nav, the table of contents — runs without a server anywhere in the picture. It’s all just HTML, CSS, and a little JavaScript, generated once and served as flat files.

The constraint turns out to be a feature. When there’s no server to reach for, you end up finding the simplest version of a feature that actually works, and simplest usually means faster too.

Small sites add up to a real skillset

2026-02-18T00:00:00Z

I didn’t really understand collections, pagination, or the data cascade until I’d rebuilt small pieces of them a few times over, in different projects, for different reasons. Reading the docs once didn’t do it. Reading them again after hitting the same wall a second time did.

That’s basically the reason this site exists. Instead of the lesson living in five old repos I never look at again, it lives here, where I can actually find it.

Do it at build time if you can

2026-02-15T00:00:00Z

Most of the demos on this site lean on the same idea: if something can be computed once, at build time, don’t make the browser redo it on every visit. The table of contents, the syntax highlighting, the search index, all of it gets figured out while the site is being built, not while someone’s looking at it.

It’s a small mindset shift if you’re used to frameworks that do everything client-side. Before reaching for JavaScript, it’s worth asking whether the answer was already knowable when you ran npm run build.

Why collections instead of just looping folders

2026-02-12T00:00:00Z

The first time I used Eleventy, I assumed a collection was just “the files in this folder.” It isn’t. A collection is whatever array your addCollection function returns. It can pull from a glob, filter by tag, mix content from two different folders, or compute something that isn’t backed by files at all.

That flexibility is the whole point. Once you stop thinking of collections as folder listings and start thinking of them as “any array I can build in JavaScript,” you stop fighting the tool.

Front matter is just data

2026-02-08T00:00:00Z

Front matter trips people up because it looks like configuration syntax. It’s not. It’s just a YAML (or JSON, or JS) object that Eleventy reads off the top of your file and merges into everything else it knows about that page.

That’s why directory data files work the way they do. demos.json sitting next to a folder of .md files isn’t magic, it’s just more data getting merged in before your own front matter gets a turn. Once that clicks, most of Eleventy’s data cascade stops feeling clever and starts feeling obvious.

Hello, Eleventy

2026-02-05T00:00:00Z

This is a sample post to prove the blog scaffold actually works: the posts collection, the blog-post.njk layout, and the /feed.xml RSS feed all pull from files like this one.

Adding more posts works the same way demos do. Drop a new Markdown file into src/blog/ and it shows up on /blog/ and in the feed on its own. Nothing else to touch.