ar363 / eleventy-stylus-blog-theme

Repository for a template blog website built out using Eleventy static site generator and Stylus CSS preprocessor

Eleventy + Stylus Blog theme

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

• Vercel: https://eleventy-stylus-blog-theme.vercel.app/
• Netlify: https://eleventy-stylus-blog-theme.netlify.app/
• Github Pages: https://ar363.github.io/eleventy-stylus-blog-theme/

Screenshots

Light theme

Dark theme

Deploy this template to your own site

Get your site up and running with a few clicks

• Deploy on Netlify
• Deploy on Vercel

Prerequisites for local development

Node.js LTS

Getting started locally

1. Clone this repo

git clone https://github.com/ar363/eleventy-stylus-blog-theme my-blog

2. Navigate to the blog directory

cd my-blog

3. Install dependencies

npm i

4. Edit _data/site.js according to your site preferences

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

To watch for changes in Eleventy and Stylus, use npm run dev

To build without watching for changes, use npm run build