Eleventy Themes Logo Eleventy Themes
Eleventy Stylus Blog Theme screenshot

Eleventy Stylus Blog Theme

Author Avatar Theme by Ar363
Updated: 29 Aug 2023
63 Stars

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

Github Live Preview

Categories

Blog Templates & themes

Overview

The Eleventy + Stylus Blog theme is a theme repository that contains a blog built with Eleventy and Stylus. It offers a range of features including 100% Lighthouse scores, a toggleable dark theme, tags as taxonomy, integrated navigation plugin, Atom RSS Feed generation, sitemap generation, support for non-post pages, and a modular type scale implemented with Stylus.

Features

  • 100% Lighthouse scores: The theme ensures high performance, accessibility, best practices, and SEO optimizations, resulting in a perfect Lighthouse score.
  • Toggleable dark theme: Users have the option to switch between a light and dark theme. The theme preference is stored in localStorage, allowing the selection to persist between page loads.
  • Tags as taxonomy: The theme utilizes tags as a taxonomy system, categorizing blog posts based on relevant topics.
  • Stylus CSS preprocessor: Stylus is integrated as the CSS preprocessor, enabling easier and more efficient styling of the blog theme.
  • Integrated with Eleventy’s official navigation plugin: The theme seamlessly integrates with Eleventy’s official navigation plugin, facilitating easy navigation between different sections of the blog.
  • Atom RSS Feed generation: The theme generates an Atom RSS Feed using Eleventy’s official RSS plugin, making it easier for users to stay updated with the blog content.
  • Sitemap generation: The theme automatically generates a sitemap, improving search engine visibility and ensuring that all pages are easily discoverable.
  • Non-post pages support: In addition to blog posts, the theme supports non-post pages such as an About page or a Contact page, allowing for a versatile and comprehensive website.
  • Modular type scale implemented with Stylus: The theme implements a modular type scale using Stylus, ensuring consistent and visually appealing typography throughout the blog.

Installation

To install and set up the Eleventy + Stylus Blog theme, follow these steps:

  1. Ensure you have Node.js LTS installed on your machine.
  2. Clone the repository to your local environment.
  3. Navigate to the blog directory.
  4. Install the dependencies by running the command: npm install.
  5. Edit the \_data/site.js file according to your site preferences.
  6. Optionally modify the stylus/abstracts/variables.styl file according to your preference.
  7. To watch for changes in Eleventy and Stylus, use the command: npm run dev.
  8. To build the theme without watching for changes, use the command: npm run build.

Summary

The Eleventy + Stylus Blog theme is a feature-rich and customizable theme for building a blog using Eleventy and Stylus. It offers a range of features including high Lighthouse scores, a toggleable dark theme, tags as taxonomy, integrated navigation, RSS Feed and sitemap generation, support for non-post pages, and a modular type scale. With easy installation and setup instructions, this theme provides a convenient solution for creating a visually appealing and fully functional blog.