Eleven Reasons to Love Eleventy

On November 29th I gave a talk at the CambridgeJS meetup on a favourite topic of mine: the static site generator Eleventy. I gave it the listicle-adjacent title “Eleven Reasons to Love Eleventy” but I didn’t go to great lengths to declare what each of these were.

Slides and notes from my presentation are available but I wanted to spell out the bones of my talk and record the magnificent Eleven for posterity.

Simple & Flexible

Eleventy is a super simple static site generator. In short it takes input files like Markdown and converts it into website. Critically no boilerplate or JavaScript code is included by default which give a really great base to add whatever bits and pieces you wish to add to your site.

Unopinionated Templates

Unlike other static site generators, Eleventy supports many template languages out of the box. My preference is Nunjucks, a reasonably intuitive language to do a sort of meta-programming on top of whatever file you wish to generate.

Eleventy allows you to use a blend of different templating languages in one site. One benefit of this flexibility is that it makes the process of migrating over from a alternative generator a cinch: you can “progressively” migrate content and formats as needed.

Written in JavaScript

Eleventy is written in JavaScript and it’s easy to use the language to do core configuration of your site. Custom shortcodes – snippets that can be expanded into wider markup from a small string can also be written in JavaScript along with transforms. These allow you to transform your HTML before being output in your application.

The Eleventy documentation takes care to note it is not a JavaScript framework itself. By being in the JavaScript ecosystem, Eleventy allows you to leverage the depth and breadth of packages available on NPM.

As you define every bit of code and markup that ends up on your website you it’s not uncommon to find yourself writing more JavaScript used to generate your site than actually deployed to end users.

Pagination

Eleventy pagination makes it easy to split collections of materials into chunks for your site. It can also be used to create multiple outputs for the same input – I use it to generate OpenGraph images for social sharing and email markup for my newsletter.

Data Cascade

Underpinning every Eleventy configuration is a flow of data from a variety of different sources and blended together according to a hierarchy of inheritance. For the best summary of what this means check out Ben Myer’s full coverage.

Extensible

Eleventy doesn’t care about the other libraries and tooling you may wish to use. There are countless starter templates covering a wide variety, from Gulp to PostCSS, Tailwind to Vite. As an extra bonus many of these have full marks over on Google Lighthouse.

Plugins

There are a wealth of fantastically useful plugins for Eleventy. Many plugins are official ones solving real problems in convenient and modular packages.

To give two examples: Eleventy Image makes it easy to generate modern image formats and necessary markup. Eleventy Syntax Highlighting makes it easy to add language highlighting in code snippets without requiring client-side JavaScript.

Accessibility

The documentation and ethos of Eleventy prioritises and promotes accessibility when building websites. Official plugins like Inclusive Language normalize considering accessible language when writing content for an Eleventy site. As per the documentation (emphasis mine):

It’s very important that we take responsibility for the code we publish and deliver and strive to correct accessibility issues with the same veracity as a full service outage.

Fast

I’m a nosy web browser – whenever I come across a site that impresses me I reach for one of my favourite Firefox extensions: Wappalyzer. This takes an educated guess at the technologies used to build sites. A site built with Eleventy will have very few “tells” that give away it’s generator and it’s invariably the fastest sites that don’t have anything in their Wappalyzer results.

On the other (server) side – Eleventy builds are very quick to run and will provide pointers if particular configurations start to slow down the build.

Community

My experience with the Eleventy ecosystem is that of collaboration and camaraderie in the name of making great websites. The Eleventy community Discord is friendly and the regular Eleventy meetups are supportive and welcoming.

It’s Fun

Finally I find that the documentation and general ethos of Eleventy is fun – from the reassuring possum mascot to irreverant humor sprinkled around the documentation.

I like to say that Eleventy sites are “hand-crafted but not by hand.” By being in full control of the process outputs it’s fun to build sites that have everything you need and nothing you don’t.