Eleventy Stylus Blog Theme

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

Full Stack Web DevelopmentNunjucksMIT

Abstract

Eleventy Stylus Blog Theme is an open-source Full Stack Web Development project. Repository for a template blog website built out using Eleventy static site generator and Stylus CSS preprocessor. A theme repository that contains a blog built with Eleventy and Stylus. It is built using Nunjucks. Key capabilities include: 100% Lighthouse scores; Toggleable dark theme (PS. theme preference is also stored in localStorage); Tags as taxonomy. The complete source code is publicly available on GitHub under the MIT License, making it a useful reference for students building a Full Stack Web Development mini project or final-year project.

1. Introduction

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

2. Objective

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

This project demonstrates how Nunjucks can be applied to a real-world Full Stack Web Development problem.

3. Key Features / Modules

  • 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

4. Technology Stack

Nunjucks

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

  • See the project README for exact requirements
  • Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/ar363/eleventy-stylus-blog-theme.git
cd eleventy-stylus-blog-theme
  1. Deploy on Netlify
  2. Deploy on Vercel
  3. Clone this repo
  4. Navigate to the blog directory
  5. Install dependencies
  6. Edit _data/site.js according to your site preferences
  7. Also optionally modify stylus/abstracts/variables.styl according to your preference
git clone https://github.com/ar363/eleventy-stylus-blog-theme my-blog
cd my-blog
npm i

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

  • Add role-based access control
  • Deploy on a VPS or cPanel hosting with a custom domain
  • Add automated tests and a CI pipeline

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

  1. Explain the frontend, backend and database layers of this application.
  2. How is user authentication and authorisation implemented?
  3. Describe the main database tables / collections and their relationships.
  4. Which REST APIs or routes are exposed and what do they return?
  5. How would you deploy this application to production?

9. Source Code & License

This project is developed by ar363 and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.

View Source on GitHubDownload ZIP

Want to build this as your internship project?

Work on a Full Stack Web Development project like this with mentor guidance, weekly reviews and an internship certificate from Training Trains, Erode — online or offline.

Apply for Full Stack Web Development Internship