Eleventeen

Eleventeen is an open-source Eleventy (11ty) blog starter template that builds on the official Eleventy Base Blog and adds a Rainbow Mode color-scheme system powered by Chromagen. It runs on the Eleventy static site generator, authored by Zach Leatherman, and outputs a zero-JavaScript, fully pre-rendered static site. The project is maintained by Ricky de Laveaga for web projects by Famebot and Artist Activist, and is available on GitHub at rdela/eleventeen. As input it takes Markdown (or any configured template format) blog posts and content pages; as output it produces HTML with generated RSS/JSON feeds, a sitemap, tag pages, and optimized images.

What is Eleventeen?

Eleventeen is an evolving variation of the Eleventy Base Blog starter repository, designed to show how to build a blog with Eleventy while adding a distinctive Rainbow Mode. It is built on Eleventy, the open-source static site generator created by Zach Leatherman, and is maintained by Ricky de Laveaga for web projects by Famebot and Artist Activist. The template produces a fully static, zero-JavaScript site: content is exclusively pre-rendered, with all URLs decoupled from the file system and templates configured via the Eleventy Data Cascade. It is distributed on GitHub under the rdela/eleventeen repository and can be deployed to Netlify, Vercel, GitHub Pages, or StackBlitz.

Key Features

• Rainbow Mode — A third color-scheme preference beyond light and dark, powered by Chromagen, and enabled by default; set the mono option to true in _data/metadata.js to disable it.
• Zero-JavaScript output — Content is exclusively pre-rendered, and the template uses Eleventy 3.0 alpha (per the README) to produce static HTML with no client-side JS.
• Perfect Lighthouse score — Scores 100 in performance, accessibility, best-practices, and SEO (400/400), with 0 Cumulative Layout Shift and 0ms Total Blocking Time; a public Lighthouse report is linked from the demo site.
• Automated image optimization — Uses the Eleventy Image plugin to generate AVIF and WebP formats, add srcset/sizes, output <picture> markup when needed, and include width/height attributes, lazy loading, and async decoding.
• Per-page CSS bundles — CSS is bundled per page via eleventy-plugin-bundle, keeping the output lean.
• Draft posts — Mark any post with draft: true to exclude it from production builds; drafts only appear during --serve or --watch.
• Generated pages — Includes Home, Archive, About, Atom and JSON feeds, sitemap.xml, zero-maintenance tag pages, and a 404 page out of the box.
• Deployment presets — One-click deploy buttons for Netlify and Vercel, a GitHub Pages workflow sample in .github/workflows/gh-pages.yml.sample, and StackBlitz support.

Who is it for?

• Developers and front-end engineers who want a fast, accessible blog starter with a modern build pipeline (Eleventy, per-page CSS, automated images) and no JavaScript in the output.
• Designers and creative studios who want to experiment with color schemes — Rainbow Mode or Mono Mode — without adding a CSS framework or theme system.
• Indie bloggers and writers who publish Markdown posts and want drafts, tags, feeds, and a Lighthouse-perfect site without configuring those features manually.
• Teams deploying to Netlify or Vercel who want one-click deployment and optional Lighthouse monitoring via netlify-plugin-lighthouse v6+.

What can you do with Eleventeen?

• Start a blog quickly — Clone the repo, edit _data/metadata.js, run npm install and npm run d to get a local development server with live reload via Eleventy Dev Server.
• Build a content site with drafts — Use draft: true on posts to keep them out of production builds while previewing locally.
• Deploy to multiple hosting platforms — Use the included netlify.toml for Netlify, the Vercel import URL, or the GitHub Pages workflow sample.
• Audit performance — View the linked Lighthouse report for the latest build, or run the Netlify Lighthouse plugin yourself (v6 or higher is required for the included config).

How does Eleventeen work?

Clone the repository, edit _data/metadata.js for site details, and optionally review eleventy.config.js. Install dependencies with npm install, then run npm run d or npm run start for a local server using npx @11ty/eleventy --serve, or npm run build for a production build. Debug mode is available via npm run debug.

Pros and cons

• Pros: Perfect Lighthouse scores, zero-JavaScript output, automatic image optimization to modern formats, per-page CSS bundles, draft post support, and one-click deployment to Netlify/Vercel.
• Cons: Built on an alpha release of Eleventy (3.0) as of the README, and the included Netlify Lighthouse plugin config requires version 6 or higher — older versions cause build failures with the fail_deploy_on_score_thresholds input.

FAQ

What is Rainbow Mode in Eleventeen?

Rainbow Mode is a third color-scheme preference (alongside light and dark) generated by Chromagen. It is the default in Eleventeen and applies a rainbow palette to the site. To disable it, set the mono option to true in _data/metadata.js.

Is Eleventeen free?

Yes, Eleventeen is open source and published on GitHub under the Famebot organization. There is no pricing or paid tier mentioned; you can clone, use, and modify it freely.

Does Eleventeen support draft posts?

Yes. Add draft: true to a post's front matter. Drafts are only included when running with --serve or --watch, and they are excluded from full production builds via the eleventyExcludeFromCollections computed data.

How do I deploy Eleventeen to my own site?

One-click deploy buttons are available for Netlify and Vercel, and a sample GitHub Actions workflow for GitHub Pages is in .github/workflows/gh-pages.yml.sample. You can also try it on StackBlitz.