Eleventy Theme Wintergreen

A modern, customizable Eleventy template for creating personal websites and blogs. Built with Eleventy, Alpine.js, and Sass, Wintergreen offers a clean, IDE-inspired design with excellent typography and performance.

Features

✅ Fast and lightweight static site generation
✅ Responsive design for all screen sizes
✅ Dark mode support with IDE-inspired color schemes
✅ Customizable via simple configuration
✅ Excellent Markdown support with syntax highlighting
✅ Client-side search functionality
✅ Tag-based content organization
✅ Wikilinks and backlinks support
✅ Minimal JavaScript for better performance
✅ Multilingual support with optimized font stacks

Getting Started

Prerequisites

Node.js (v16+ recommended)
npm or yarn

Installation

Clone the repository

git clone https://github.com/yourusername/eleventy-theme-wintergreen.git
cd eleventy-theme-wintergreen

Install dependencies

npm install

Start the development server

npm start

This will start a local development server at http://localhost:8080.

Build for production

npm run build

This will generate static files in the dist directory.

Customization

Configuration

Edit the app.mjs file in the root directory to customize your site:

title: Your website title
description: Your website description
lang: Your website language
sidebar.links: Navigation links in the sidebar
And more!

Adding Content

Create new Markdown files in the root directory or in subdirectories. Each file should include front matter:

---
title: My First Post
layout: note
parent: /posts
tags: [tutorial, example]
date: 2024-01-01
---

# Content goes here

Customizing Styles

Modify the SCSS files in the .app/css directory to customize the theme’s appearance:

.app/css/1-tokens/ - Color schemes and design tokens
.app/css/4-components/ - Component-specific styles
.app/css/app.scss - Main stylesheet

Deployment

Wintergreen generates static files that can be deployed to any static hosting service:

Project Structure

├── .app/               # Core application files
│   ├── _data/          # Eleventy data files
│   ├── css/            # SCSS stylesheets
│   ├── js/             # JavaScript files
│   ├── lib/            # Application modules
│   ├── pages/          # Eleventy page templates
│   └── scripts/        # Build scripts
├── posts/              # Example blog posts
├── public/             # Static assets
├── app.mjs             # Main configuration
├── package.json        # Project dependencies
└── README.md           # This file

Technologies Used

Eleventy - Static site generator
Alpine.js - Minimal JavaScript framework
Sass - CSS preprocessor
Lucide - Icon library
Pagefind - Client-side search
Prism - Syntax highlighting

License

BSD 2-Clause License

Acknowledgements

Wintergreen is based on the excellent eleventy-notes template by Sandro Roth.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

Support

If you encounter any issues or have questions, please open an issue on Codeberg or Gitee.

Author: Exyone Kodoreanto