eleventy-base-blog: The Highly Engineered Art of the Zero-JS Web
How a powerful Node.js build pipeline and a logic-heavy templating engine conspired to ship absolutely nothing to your browser.
- Eleventy achieves perfect performance scores by shifting all framework complexity to a Node.js build step, shipping zero JavaScript to the client.
- The root configuration file acts as a traffic controller to abstract complex data logic away from the HTML templates.
- Layout chaining enables highly reusable UI without requiring heavy component frameworks like React or Vue.
- A clever use of the pagination API automatically generates unique landing pages for every content taxonomy tag.
The Client-Side Fast
The modern web development ecosystem is obsessed with shipping code to the browser. The industry spent a decade building massive Node.js pipelines to bundle megabytes of React or Next.js for the client. The official Eleventy starter kit takes a radically different approach. It uses a sophisticated Node.js build pipeline to ship absolutely zero JavaScript to the user.
This is not a lack of features. Interactivity like dark mode, syntax highlighting, and responsive navigation are handled entirely by modern CSS and build-time HTML generation. It frames Eleventy not as a step backward, but as a deliberate rejection of single-page application bloat for content-heavy sites.
The Brain in the Root
The intelligence of this architecture lives in a single file called .eleventy.js. This configuration acts as a master traffic controller. It defines custom Nunjucks filters, parses Luxon date formatting, and constructs complex data collections before a single page is rendered.
One of the great things about Eleventy is its flexibility and its lack of assumptions about how your projects should be organized.
By abstracting date logic and data sorting into the Node environment, the HTML templates remain incredibly clean. Writers can focus purely on Markdown content while the system automatically handles RSS feeds, sitemaps, and archive pages.
Layout Chaining Without Components
The project achieves reusable UI without React or Vue through a concept called layout chaining. A raw Markdown file is injected into a specific post template shell. That shell is then injected into a global base template shell.
The Pagination Taxonomy Trick
The most elegant piece of code in the repository lives in the tagging system. Instead of using pagination to split a long list of posts across multiple pages, the starter kit paginates over an array of tags.
This dynamically generates a unique HTML landing page for every single tag in the system with just twenty lines of code. It is a brilliant repurposing of a standard API to handle complex taxonomy routing.
The Goldilocks Generator
Eleventy sits in a unique position in the wider static site generator landscape. It represents the sweet spot for pure content publishing.
| Feature | Eleventy | Next.js (App Router) | Jekyll |
|---|---|---|---|
| Core Engine | Node.js | Node.js / React | Ruby |
| Default Client JS | 0KB | ~80KB+ | 0KB |
| Templating | Nunjucks / Liquid | JSX | Liquid |
| Ideal Usecase | Content sites | Web Applications | Legacy blogs |
Fast forward to 2025, and guess what? The new dev server supports `--incremental` mode! This was a pleasant surprise that addressed my original concern.
The framework remains significantly faster and more flexible than older Ruby-based alternatives. At the same time, it is vastly simpler and lighter than modern React-based metaframeworks. The base blog template proves that the boring web is still highly engineered.