Eleventy in a Box—just add water

I like that Eleventy doesn’t force me into someone else’s idea of a theming system. I never got my head around WordPress, so I avoid it like a colonoscopy. With Eleventy, I have absolute control over HTML, CSS, and JavaScript. It’s simple to build with, and simple for clients to use. Most don’t need the complexity of a full CMS anyway. Hosted on Netlify with their editor, they can update content, and nothing else.

The more websites I’ve developed with Eleventy, the more I’ve written the same code over and over. Every new project started the same way: copying files, rewriting patterns, rebuilding features I’d already built dozens of times.

This wasn’t necessarily a deal-breaker, but it was a waste. And honestly, I’d rather spend my time coming up with a great design. So I stopped treating projects as one-offs and started building a system instead. I call it Eleventy in a Box.

I built my system reusing the parts I use on almost every project: boilerplate CSS, layout systems, and a consistent set of naming conventions. That consistency matters. I can move between projects, share code without rewriting it, and switch layouts without renaming components. Now, instead of spending half my time designing and the other half writing code, I’ve reduced development time and can spend more time on design.

Using the same codebase doesn’t mean my designs look the same. If anything, it frees me up to push them further. These websites for Bego Pereda, Mountain Duck, Shared Homeland, and Verkehrsteiner all started from the same core, but they don’t look anything alike.

When clients needed extra functionality like a blog, changelog, FAQs, portfolio, services, or team pages, I stopped baking them into the core. Instead, I broke them out into feature packs. Each pack contains everything it needs—templates, content, styles, and configuration—and knows how to install itself into a project.

Then, I built an “installer” which copies the packs I need into a project, including specific folders, Markdown files, stylesheets, and templates.

So instead of manually setting up every project, I describe what I need and let the system do the work. A prompt like this gets things up and running.

node scripts/add-feature.js <feature>

Using this setup means I can spend less time on repetitive code and more time designing, which matters not just for client projects but also for me. After all, there’s absolutely no fun in doing the same thing day in and day out.

For now, Eleventy in a Box is just for me. I might one day package it and share it more widely.