Eleventy + Stylus Blog Theme

Eleventy + Stylus Blog Theme is a starter blog template for the Eleventy static site generator that pairs with the Stylus CSS preprocessor, bundling a toggleable dark theme, tags taxonomy, Atom RSS feed, sitemap, and non-post page support, and it reports 100% Lighthouse scores out of the box.

What is Eleventy + Stylus Blog Theme?

Eleventy + Stylus Blog Theme is a GitHub repository (ar363/eleventy-stylus-blog-theme) containing a complete blog built with Eleventy and Stylus. It takes blog posts and site configuration data as input and outputs a static HTML site ready to deploy to any static host. The template integrates Eleventy's official navigation and RSS plugins and also generates a sitemap, so the resulting site includes working navigation, an Atom feed, and search-engine-friendly XML. Live demos are hosted on Vercel, Netlify, and GitHub Pages, and the theme is maintained by the GitHub user ar363.

Key Features

• 100% Lighthouse scores — The template is built to achieve perfect performance, accessibility, best practices, and SEO scores in Lighthouse, as stated in the repository.
• Toggleable dark theme — Visitors can switch between light and dark themes, and the preference is stored in localStorage so it persists across sessions.
• Tags as taxonomy — Posts can be tagged, and the template organizes content by tags, giving readers a way to browse related posts.
• Stylus CSS preprocessor — Styling is written in Stylus, a preprocessor that compiles to plain CSS; you can adjust global styles in stylus/abstracts/variables.styl.
• Eleventy navigation plugin — The template uses Eleventy's official navigation plugin to manage site menus.
• Atom RSS feed — Eleventy's official RSS plugin generates an Atom feed, giving readers a way to subscribe to new posts.
• Sitemap generation — An XML sitemap is generated automatically, helping search engines index the blog.
• Non-post pages support — Besides blog posts, you can create static pages such as About or Contact by adding new content files.

Who is it for?

• Bloggers — Anyone who wants a fast, static blog with a clean reading experience, dark mode, and an RSS feed for readers.
• Front-end developers — Developers who prefer the Stylus preprocessor and want a small, dependency-light starter to hack on.
• Eleventy learners — People learning Eleventy can use this template as a working example of navigation, RSS, sitemap, and content collections.
• Jamstack enthusiasts — Developers who want a one-click deployable blog to Netlify, Vercel, or GitHub Pages with minimal setup.

What can you do with it?

• Start a personal blog — Clone the repo, edit _data/site.js with your site preferences, write posts, and publish to static hosting.
• Deploy to multiple platforms — Use the one-click deploy buttons for Netlify and Vercel, or push to GitHub Pages using the provided workflow.
• Customize the design — Modify the Stylus variables in stylus/abstracts/variables.styl to change colors, type scale, and other design tokens.
• Add extra pages — Create non-post pages like About or Contact by adding new markdown files alongside the blog posts.

How does it work?

To use the template locally, you clone the repository, run npm i to install dependencies, then edit _data/site.js to set your site name and metadata. You can optionally edit stylus/abstracts/variables.styl to adjust the design. Run npm run dev to watch for changes in Eleventy and Stylus, or npm run build to build the site once.