Eleventy Simple is a blog starter template that pairs the Eleventy static site generator (v3) with Simple.css to output a zero-JavaScript static blog, built on the official eleventy-base-blog project.
What is Eleventy Simple?
Eleventy Simple is a pre-configured blog starter for Eleventy v3 that renders content exclusively as static HTML with zero client-side JavaScript. It accepts Markdown posts (or any template format supported by Eleventy) and outputs a production-ready site to the _site folder, with an optional live-reloading development server. The template is maintained on GitHub under the 11ty organization and has a live demo at eleventy-simple.pages.dev.
Key Features
- Zero-JavaScript output — All pages are pre-rendered at build time; no JavaScript is shipped to the browser.
- Performance-focused by default — The README reports a 400/400 Lighthouse score out of the box, including 0 Cumulative Layout Shift and 0ms Total Blocking Time.
- Automated image optimization — The Eleventy Image plugin generates AVIF and WebP formats, emits
<picture>markup withsrcsetand optionalsizes, and automatically addswidth,height,loading="lazy", anddecoding="async"attributes. - Per-page CSS bundling — Uses
eleventy-plugin-bundleso each page gets its own CSS bundle instead of a shared global stylesheet. - Built-in syntax highlighting — Code blocks are highlighted at build time via the Eleventy SyntaxHighlight plugin with zero JavaScript.
- Draft content support — Set
draft: truein front matter; drafts are included only during--serveor--watchand omitted from production builds. - Content-driven navigation — The Eleventy Navigation plugin builds the top-level menu from the
eleventyNavigationfront matter key. - Standard blog pages included — Home, Archive, About, 404, zero-maintenance tag pages,
sitemap.xml, and an Atom feed (with a one-line swap to RSS or JSON).
Who is it for?
Eleventy Simple is for developers who want a minimal, accessible blog without a JavaScript framework. Bloggers can write posts in Markdown and get automatic archive, tag, and feed pages. Eleventy learners can study a reference implementation of v3 features like the Data Cascade, addPreprocessor, and addPassthroughCopy. Teams needing a fast, static company blog can deploy it to any static host with no server-side requirements.
What can you do with it?
- Publish a standard blog — Write posts in
content/blog/with thepoststag, and the template generates archive, tag, and Atom feed pages automatically. - Deploy to a subfolder — Use the html-base plugin to host the site under a subfolder without altering content URLs.
- Customize templates — Content can be authored in any supported template format (Markdown, Nunjucks, etc.) and layouts are separated into
base.njk,home.njk, andpost.njkfor easy modification. - Enforce a Content Security Policy — The README explains how to swap the inline CSS bundle for an external stylesheet to satisfy
style-srcdirectives.
How does it work?
- Clone the repository into your project directory.
- Review
eleventy.config.jsand_data/metadata.jsto configure your site's options and data. - Run
npm installto install dependencies. - Run
npx @11ty/eleventyto generate a production build in_site, ornpx @11ty/eleventy --servefor a local development server with live reload.
FAQ
Is Eleventy Simple free?
Yes, Eleventy Simple is an open-source project hosted on GitHub, so you can clone it and use it for your own blog at no cost.
How do I create a draft post?
Add draft: true to a template's front matter. Drafts are only built when you run --serve or --watch, and they are excluded from production builds.
What image formats does the template support?
The image plugin automatically generates modern formats like AVIF and WebP, and switches between <img> and <picture> markup depending on how many formats are needed.
Can I deploy to any static host?
Yes, because the output is purely static HTML. The demo is hosted on Cloudflare Pages, but the _site folder can be uploaded to Netlify, GitHub Pages, or any static file server.
