Back to templates

Template details

Eleventy Simple

A blog starter template with 11ty and Simple.css.

About this template

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 with srcset and optional sizes, and automatically adds width, height, loading="lazy", and decoding="async" attributes.
  • Per-page CSS bundling — Uses eleventy-plugin-bundle so 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: true in front matter; drafts are included only during --serve or --watch and omitted from production builds.
  • Content-driven navigation — The Eleventy Navigation plugin builds the top-level menu from the eleventyNavigation front 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 the posts tag, 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, and post.njk for easy modification.
  • Enforce a Content Security Policy — The README explains how to swap the inline CSS bundle for an external stylesheet to satisfy style-src directives.

How does it work?

  1. Clone the repository into your project directory.
  2. Review eleventy.config.js and _data/metadata.js to configure your site's options and data.
  3. Run npm install to install dependencies.
  4. Run npx @11ty/eleventy to generate a production build in _site, or npx @11ty/eleventy --serve for 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.

screenshot of Eleventy Simple on template0.com