Eleventy: A Static Site Generator That Plays Well With Others
This episode of The Smashing Podcast digs into Eleventy, a static site generator that has been gaining traction in the Jamstack world. Host Drew McLellan sits down with David Darnes, a developer and Eleventy enthusiast, to unpack what makes this tool tick and where it fits in a modern web workflow. The conversation covers its JavaScript-based templating approach, its compatibility with multiple template languages, and its no-frills philosophy that lets developers build sites without being locked into a single framework's conventions.
The Core of Eleventy
Eleventy, often written as 11ty, is a static site generator built on Node.js. Unlike some of its peers that ship with a prescriptive front-end framework bundled in, Eleventy intentionally stays agnostic. It takes content — Markdown, HTML, or other formats — and transforms it into static files via a variety of template engines. This means you can write your templates in Nunjucks, Liquid, Handlebars, or plain JavaScript, and switch between them as needed, even within the same project.
Darnes highlights this flexibility as one of Eleventy's biggest draws. Since it isn't tied to a specific JavaScript framework, developers can pair it with React, Vue, or no framework at all. The output is plain HTML, CSS, and JavaScript, so there's no client-side runtime to worry about unless you choose to add one yourself. For teams that value simplicity and performance, this separation of concerns is a meaningful advantage over all-in-one solutions that impose a particular way of building.
One of the key architectural principles Eleventy follows is zero-configuration by default. You can point it at a folder of content, run a command, and get a working site. As projects grow, configuration is added incrementally via a JavaScript config file, but the barrier to entry remains low. Darnes notes that this makes it particularly approachable for developers who want to move fast or for those coming from non-JavaScript backgrounds, as the output is just familiar HTML.
Jamstack Fit and Data Handling
When it comes to the Jamstack, Eleventy sits comfortably in the "static site generator" layer. It handles the build process, turning templates and content into static files, which can then be served from a CDN. A common usage pattern involves using Eleventy for the site architecture, while pulling dynamic data from external sources during the build. For instance, you might feed it a JSON file from a headless CMS or a fetch a remote API endpoint at build time to generate pages for blog posts or products.
Darnes clarifies how Eleventy handles data. It supports front matter in content files for local data, but also lets developers define global data files that can be accessed across templates. These can be serialized data like JSON, or static data, but importantly, data can also be generated programmatically via JavaScript files. That allows developers to write a function that fetches data from an API and make it available as part of the site's global data set. This pattern enables powerful use cases, such as building a site that incorporates GitHub stars, conference schedules, or any other API-driven content, all at build time so the resulting site remains fast and static.
A point of clarity that Darnes emphasizes: while you can use JavaScript to pull data, the site itself doesn't depend on JavaScript to deliver content in the browser unless that's something you've deliberately added. This keeps the core output accessible and resilient.
Practical Setup and Use
Getting started with Eleventy is straightforward, particularly if you're already comfortable with the command line. After initializing a project and installing @11ty/eleventy as a dependency, you can run it to generate a site from a source directory. As Darnes explains, Eleventy's directory structure — with inputs for templates and content, plus outputs for built files — is something you define or that template projects provide.
The shows a typical project without a config file, where Eleventy will take everything from a default directory and output to a _site folder. From there, you can view it locally with a development server that supports live reload. Once ready, the generated _site folder can be deployed to any static host.
One of the things that makes Eleventy appealing within the broader community is the growing ecosystem around it. The documentation at 11ty.dev is comprehensive, and resources like Learn Eleventy From Scratch by Andy Bell and 11ty Rocks! by Stephanie Eckles, which curates starters, plugins and projects, help ease the onboarding process. For video learners, an egghead course called “Build An Eleventy (11ty) Site From Scratch” specifically covers getting up to speed with.
The Smashing Community Week in Review
As is customary for the show, the episode wraps up with a roundup of recent Smashing Magazine publications. This week features contributions on Framer Motion, Vue authentication, running online workshops, building a GraphQL server with Next.js API routes, and the principles of visual communication. Each offers hands-on guidance for developers seeking to enhance their skill set.
Eleventy in Context
Eleventy sits in the same family as Jekyll, but with a crucial difference: it's JavaScript-based rather than Ruby-based. That distinction matters for more than just the JAMstack acronym working out neatly — JavaScript, APIs, and Markup — it makes the tool approachable for developers who already live in the JS ecosystem.
The project is a labor of love from Zach Leatherman, built to fit his own needs. That origin story shows in the design. Eleventy is less opinionated than many competing static site generators, and it doesn't force a particular templating language or project structure on you. The core appeal is that you can write regular JavaScript throughout, including in the configuration file, whether you're pulling content from an API or setting up a collection.
Fit and Flexibility
For developers choosing tooling, matching the languages they already use matters. If you work in Go, Hugo makes sense. If you're building with React, Gatsby is the natural pick. Eleventy targets the plain JavaScript, HTML, and CSS crowd — a comfortable space for many front-end developers.
That position also makes Eleventy a strong fit for the wider JAMstack ecosystem. It works neatly with existing tooling and hosting platforms that run build processes. Drew McLellan, hosting the Smashing Podcast conversation, described Eleventy as fitting into that space "to a T."
David Darnes, the episode's guest, offered an analogy: large frameworks are like flying to a destination city, then taking taxis to reach your precise location. Eleventy is a more direct journey that gets you economically to approximately the right spot, even if you need to handle a bit more of the work yourself.
Content Sources and Collections
Markdown files remain the default content source for most static site generators, and Eleventy handles them out of the box. But the tool shines when pulling content from external sources. Ghost's headless option, WordPress, and any CMS with an API can feed content into Eleventy.
The mechanical process for API-sourced content typically involves using node-fetch or a CMS-specific JavaScript API to retrieve JSON, then converting that into JavaScript objects. Eleventy's collection system then lets you group those items — blog posts, pages, or products — and iterate through them with the default templating language to build out individual HTML files and listing views.
This approach means content teams can keep working in a familiar CMS while the site itself stays static. It also allows mixing sources: marketing might maintain a blog in WordPress while technical documentation lives in Markdown, all combined into a single Eleventy build.
Templating Options
Eleventy is as close to unopinionated on templating as a framework can reasonably get. You can use Nunjucks — the default — or switch to Handlebars, Liquid, Mustache, EJS, Haml, or Pug. If you want, you can even apply templating inside CSS files. The configuration file is where you set your preferred language, and the HTML extension can be whatever you want it to be.
For Darnes, that flexibility was a key draw. Templating languages make looping and content rendering more readable than raw PHP, and Eleventy's range of options means developers can work in whatever syntax they find most comfortable.
Build Speed and Scale
Eleventy is among the fastest static site generators, markedly quicker than Jekyll. It's not the absolute fastest — Hugo, running on Go, holds that title — but it's strong enough that JavaScript engines improving over time will likely close the gap further.
Large content sets don't bog Eleventy down the way they can with some other generators. Darnes noted that while he hasn't personally used Eleventy with massive content volumes, there are reports of fast build times for sites with thousands of pages. He compared it favorably to Gatsby, which carries more overhead from its React tooling and therefore lags noticeably on big projects. Eleventy can run at different levels of sophistication — from simply processing existing HTML files to handling complex builds — which keeps it fast when the project is simple.
Versioning and Community
Eleventy has been available for a while but remains at version 0.11. That pre-1.0 status gives some developers pause when recommending it for commercial work. The concern is semantic versioning: at 0.x, APIs can change with any release. In practice, Eleventy appears more stable than that convention suggests, but Darnes noted he'd be more comfortable presenting it to clients once it officially reaches 1.0.
The community around Eleventy is welcoming and encouraging, with contributors creating example projects, blog templates, and starting points for newcomers. The project benefits from Zach Leatherman's approachable attitude toward community involvement. Starter packs range from simple setups handling CSS compilation to more complex configurations with image resizing and Lighthouse-optimized builds. There are perhaps too many blog-focused starters, with less variety in e-commerce or other commercial applications, though Darnes hopes that may shift when 1.0 lands.
Documentation is comprehensive but has navigation quirks. Finding specific topics can occasionally require understanding how Eleventy structures itself before things click into place. As with many open source projects, the documentation is open for community contribution and likely to improve over time.
Ideal Use Cases
Eleventy works best for marketing websites — the classic .com presence with home, about, and contact pages — as well as documentation and blogs. It can grow with the site, pulling in content from different sources as the project expands. Other use cases, like PWAs or more application-style builds, are possible, but the front-of-house website is where the tool's strengths align most directly with the types of projects agencies and freelancers commonly take on.
Getting Started
The starting point is 11ty.dev. Andy Bell's Eleventy From Scratch course is another recommended resource.
