Eleventy + Stylus Blog theme

Netlify Status Build Status Vercel Status

A theme repository that contains a blog built with Eleventy and Stylus

Features

  • 100% Lighthouse scores
  • Toggleable dark theme (PS. theme preference is also stored in localStorage)
  • Tags as taxonomy
  • Stylus CSS preprocessor
  • Integrated with Eleventy's official navigation plugin
  • Also generates Atom RSS Feed with Eleventy's official RSS plugin
  • Sitemap generation
  • Non-post pages support (eg. About page, Contact page)
  • Modular type scale implemented in with Stylus

Demos

Screenshots

Light theme light theme website homepage screenshot

Dark theme dark theme website homepage screenshot

Deploy this template to your own site

Get your site up and running with a few clicks

Prerequisites for local development

Node.js 8 or above

Yarn package manager

Getting started locally

  1. Clone this repo
git clone https://github.com/ar363/eleventy-stylus-blog-theme my-blog
  1. Navigate to the blog directory
cd my-blog
  1. Install dependencies with yarn
yarn
  1. Edit _data/site.js according to your site preferences

  2. Also optionally modify stylus/abstracts/variables.styl according to your preference

To watch for changes in Eleventy and Stylus, use yarn dev

To build without watching for changes, use yarn build