11r is an open-source Eleventy (11ty) blog template that builds a static website from markdown posts, styled with Tailwind CSS and templated with Nunjucks.
What is 11r?
11r is an Eleventy-based static site generator template that takes markdown content and a global configuration from src/globals/site.json and outputs a complete HTML blog with tags, pagination, and a nested table of contents. It is maintained by Reese Schultz and describes itself as America's favorite Eleventy blog template. The template is licensed under MIT and includes a deployment pipeline for GitHub Pages via a gh-pages branch.
Key Features
- Eleventy static site generation — Uses Eleventy as the static site generator, configured in .eleventy.js, to convert markdown into static HTML.
- TailwindCSS utility-first styling — Styles are written with Tailwind CSS using configuration in tailwind.config.js and custom CSS in src/styles/tailwind.css.
- Nunjucks templating — Layouts and partials are written in Nunjucks, providing template inheritance and reusable components.
- Table of contents from headings — markdown-it-anchor generates IDs for headings and eleventy-plugin-nesting-toc builds a nested table of contents from those anchors.
- Prism syntax highlighting with copy button — Code blocks are highlighted by Prism and a copy button is included via clipboard.js, with logic in src/scripts/copy.js.
- Rollup JavaScript bundling — Scripts are bundled and compiled with Rollup according to rollup.config.js.
- Tags and pagination — Uses Eleventy collections to generate tag pages and supports pagination for splitting posts across multiple pages.
- GitHub Pages deployment script — deploy.sh builds the site and pushes output to the gh-pages branch (edit the script for your repository first).
- Privacy policy notice dismissal — A JavaScript handler in src/scripts/privacy-policy.js lets visitors dismiss the privacy notice.
Who is it for?
- Bloggers and writers — who want a fast, static blog with no server-side dependencies and a clean Tailwind-based design.
- Eleventy beginners — who want a well-structured reference project demonstrating tags, pagination, and custom CSS with a modern JS build.
- JAMstack developers — who need a deploy-ready template for GitHub Pages with Tailwind and Rollup integrated from day one.
What can you do with 11r?
- Publish a blog — Write posts in markdown and define tags in front matter; 11r automatically builds tag pages, paginated indexes, and per-post tables of contents.
- Customize tag colors — Style individual tags using Tailwind utility classes in src/styles/tags.css, such as .tag.beer with bg-blue-500.
- Deploy to GitHub Pages — Run ./deploy.sh to build and publish the site to the gh-pages branch, after updating the script for your own repository.
How does 11r work?
Setup is a five-step process: clone the repository, run npm install, run npm run dev to serve locally, run npm run build for a production build, and execute ./deploy.sh to deploy to GitHub Pages (which includes the build step). Configuration lives in .eleventy.js, and site-wide data is stored in src/globals/site.json, including the images in public/ that you should replace for your own site.
FAQ
Is 11r free to use?
Yes, the entire template is licensed under the MIT license, so you can use, modify, and distribute it freely, including for commercial projects.
What static site generator does 11r use?
11r uses Eleventy (11ty) as its static site generator. It converts markdown to HTML, with Nunjucks as the templating engine.
Does 11r include syntax highlighting?
Yes. Code blocks are highlighted with Prism, and a copy button is provided via clipboard.js. The theme is set in src/styles/base.css, and the copy logic is in src/scripts/copy.js.
How do I deploy 11r to GitHub Pages?
Run ./deploy.sh from the project root; it will build the site and push the result to the gh-pages branch. Before doing so, you must edit the script to point to your own repository and configure the repository settings appropriately.
