Eleventy Excellent is an open-source Eleventy starter that packages CUBE CSS, Every Layout, and global design tokens into a single workflow for building accessible, resilient static websites.
What is Eleventy Excellent?
Eleventy Excellent is a starter template for Eleventy (11ty), created by Lene Saile, and based on the workflow recommended by Andy Bell's buildexcellentwebsit.es. It takes Markdown content and Nunjucks templates as input and produces a fully static website with RSS feeds, an XML sitemap, Open Graph images, and minified HTML, CSS, and JavaScript. The starter is designed to be deployed on Netlify and includes Netlify-specific redirects and a carbon.txt file for green-hosting verification.
Key Features
- CUBE CSS boilerplate — Includes Andy Bell's CUBE CSS boilerplate (MIT License), which provides a methodology for composition, utility, block, and exception layers.
- Tailwind CSS in an unexpected role — Tailwind CSS is used as a PostCSS plugin for generating design tokens and utility classes, not as the dominant styling framework.
- Automatic image optimization — Uses Eleventy-img to generate responsive images, handle lazy loading, and convert formats without manual setup.
- Resource fetching — The starter integrates eleventy-fetch to retrieve and cache external data at build time, enabling content pulling from APIs or other websites.
- Syntax highlighting — Code blocks are highlighted with eleventy-plugin-syntaxhighlight, supporting many languages out of the box.
- Generated Open Graph images — Blog posts get automatically generated Open Graph images, based on templates referenced in the documentation.
- 301 redirects for Netlify — A redirect setup (inspired by Aleksandr Hovhannisyan's article) lets you manage 301 redirects directly in the project.
- Accessible dark and light mode — Theme toggle respects user preference and allows manual switching, built with accessibility guidance from Sara Soueidan's Practical Accessibility course.
Who is it for?
- Eleventy developers who want a well-structured, feature-rich starter instead of configuring plugins and build tools from scratch.
- Front-end designers who want to apply CUBE CSS and Every Layout principles without building the toolchain themselves.
- Blog authors who need a site with tags, accessible pagination, RSS, and social-ready Open Graph images immediately after setup.
- Freelancers delivering small- to medium-sized static sites for clients, with accessible navigation and theme switching included.
What can you do with Eleventy Excellent?
- Set up a blog quickly: You get blog pagination, tags, multiple RSS feeds, and Open Graph images preconfigured, so you only need to add Markdown posts.
- Fetch content from external sources: Use the eleventy-fetch integration to pull in content from APIs or other sites and display it in your pages.
- Embed YouTube videos without a performance hit: The included lite-youtube component loads videos only when the user clicks play.
- Create a style guide: A built-in styleguide page documents your design tokens and components, useful for client handoff or personal reference.
How does it work?
The starter uses a standard Eleventy build pipeline. After cloning, run npm install to install dependencies. npm start starts a local development server with watch tasks that recompile on changes. npm run build produces a production-ready build with minified JavaScript, CSS, and HTML. Content lives in Markdown files, and site structure is defined with Nunjucks templates and data files such as src/_data/navigation.js.
Pricing
Eleventy Excellent is free and open source. You can download or fork the repository from GitHub without a license fee.
FAQ
Is Eleventy Excellent free?
Yes, it is a free and open-source starter. You can use it for personal or commercial projects without paying anything.
What tech stack does Eleventy Excellent use?
It uses Eleventy as the static site generator, Nunjucks for templating, Tailwind CSS and PostCSS for styling, esbuild for bundling, and dayjs for date handling. The site is optimized for Netlify deployment.
Can I deploy Eleventy Excellent to other hosts?
Yes, it produces a standard static site that works on any hosting provider. The Netlify-specific parts, such as the 301 redirects and _redirects file, are optional and can be removed.
Does Eleventy Excellent support dark mode?
Yes, it includes an accessible dark and light mode that follows the user's system preference and provides a custom toggle to override it.
How do I add a new blog post?
Write a new Markdown file in the appropriate content directory with front matter for the date, title, and tags. The starter's build pipeline will automatically include it in the blog listing, pagination, RSS feed, and generated Open Graph image.
