Eleventy (11ty) + Nunjucks static site template with build output to the docs/ directory
EleventyStarter
starter-project-eleventy — Eleventy Starter Template
By FrankUsqAbant
A static site starter template built on Eleventy (11ty) and Nunjucks, featuring light/dark themes, a blog with live search, and a Markdown reading progress bar. Builds output to the docs/ directory and is MIT licensed.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Author preview
Author-provided preview
Preview provided in the project README.
One original preview is available. Open the full image to inspect the design.
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-09-30View source
What stands out
A quick read of the recorded project description.
Built-in dark/light theme toggle with the selection saved in localStorage
Blog supports real-time filtering search by text and category
Markdown posts include a reading progress bar
Styling uses glassmorphism effects and the Plus Jakarta Sans font
Images are stored in WebP format under code/img/
Template Details
This is an Eleventy (11ty) starter template using Nunjucks as the templating language, with pages and posts written in .njk and Markdown respectively. The repository README describes it as a static site base template; build output goes to the docs/ directory, making it straightforward to deploy on GitHub Pages, and a deployed demo site link is provided.
Feature-wise, the template includes a dark/light theme toggle (with the choice saved in localStorage), blog search that filters in real time by text and category (such as books and movies), a reading progress bar for Markdown posts, glassmorphism styling, and the Plus Jakarta Sans font. Image assets are stored in WebP format under code/img/.
In terms of project structure, the code/ directory contains _includes (components such as header, menu, footer, and layouts), css, js, img, and the page and post files, while .eleventy.js at the root is the 11ty configuration. npm scripts provide start (local development with live reload), deploy (compile to docs/), and clean (clean docs/).
Limitations and caveats: README statements about perfect Lighthouse scores, performance, and being "production-ready" are the author's own claims and were not independently verified in this material; specific dependency versions are not listed in the material and should be confirmed against the repository's package.json. Regarding licensing, the code is MIT licensed, allowing free use, modification, commercial use, and distribution, provided copyright and license notices are retained; third-party assets such as demo images, fonts, and icons require separate license checks, and external services such as domains and hosting may incur additional charges.
EleventyStarter
Is it right for your project?
Use Cases
- Building a personal blog or content site with content written in Markdown
- Needing a static site starting point that can be deployed directly to GitHub Pages
- Preparing a showcase site with light/dark themes and live search for a project
Suitable For
- Developers familiar with Eleventy and Nunjucks template syntax
- Individual site authors who want to manage posts in Markdown and output pure static files
- Projects that need to publish build output to GitHub Pages
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
After cloning the repository, run npm install to install dependencies
- 2
Run npm run start to launch the local development server with live reload
- 3
Run npm run deploy to compile static files into the docs/ directory
- 4
Run npm run clean to remove compiled output from docs/
- 5
The performance and production-readiness descriptions in the README are unverified; confirm dependency versions against the repository's package.json
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis listing covers the free version in the public repository under the MIT license; the free scope applies to that version's code and does not mean external services or third-party assets are free.
Must comply with when using
- The code in this version may be used, modified, used commercially, and distributed free of charge.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- README claims of perfect Lighthouse scores and being "production-ready" are the author's own statements, were not independently verified in the material, and should not be treated as guarantees of performance or production readiness.
- The code is MIT licensed and may be used, modified, used commercially, and distributed free of charge, but copyright and license notices must be retained.
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; the code's MIT license alone does not determine this.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Diseñada para ofrecer la máxima puntuación de rendimiento (100/100 en Lighthouse)
Original README
https://github.com/FrankUsqAbant/starter-project-eleventy/blob/main/LICENSEhttps://github.com/FrankUsqAbant/starter-project-eleventy/blob/main/README.mdDistribuido bajo la licencia [MIT](LICENSE).
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-01. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- Partly documented · 71 / 100
- Technologies
- Eleventy
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-08-29
- Screenshot last checked
- 2026-10-01
No demo link is recorded. Use the repository instructions to evaluate the project locally; the screenshot alone cannot establish interactive behavior.
The catalog identifies Eleventy as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: 140a4730a06d4879fd9e42b42ca83eb0295422a7cee07cb0c2cbc30f2116367a
2026-10-01T13:36:57.636Z
Source file / repository# 🦡 Starter Project Eleventy (11ty)
<p align="center">
<a href="https://frankusqabant.github.io/starter-project-eleventy/" target="_blank" rel="noopener noreferrer">
<img src="code/img/preview.webp" alt="Vista Previa de Eleventy Starter — Clic para abrir el sitio en vivo" width="100%" style="border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);">
</a>
</p>
<p align="center">
<a href="https://frankusqabant.github.io/starter-project-eleventy/">
<img src="https://img.shields.io/badge/Demo_en_Vivo-Sitio_Web-10b981?style=for-the-badge&logo=githubpages&logoColor=white" alt="Demo en Vivo">
</a>
<img src="https://img.shields.io/badge/Eleventy-v2.0+-5c46eb?style=for-the-badge&logo=eleventy" alt="11ty">
<img src="https://img.shields.io/badge/Diseño-Modern_CSS-00F5D4?style=for-the-badge&logo=css3&logoColor=black" alt="Modern CSS">
<img src="https://img.shields.io/badge/Temas-Dark_%26_Light-8b5cf6?style=for-the-badge" alt="Temas">
<img src="https://img.shields.io/badge/Imágenes-WebP_Ultra_Fast-10b981?style=for-the-badge" alt="WebP Ready">
</p>
<p align="center">
🌐 <b>Sitio Web Desplegado:</b> <a href="https://frankusqabant.github.io/starter-project-eleventy/">https://frankusqabant.github.io/starter-project-eleventy/</a>
</p>
---
## ⚡ ¿Qué es este proyecto?
Una plantilla base moderna, ultraligera y lista para producción, creada con **Eleventy (11ty)** y **Nunjucks**. Diseñada para ofrecer la máxima puntuación de rendimiento (100/100 en Lighthouse), estética cinematográfica y cero sobrecarga de JavaScript innecesario.
---
## ✨ Características Principales
- 🚀 **Ultrarrápido & Ligero:** Salida 100% estática optimizada con imágenes en formato WebP (~30-80 KB).
- 🌓 **Modo Oscuro / Claro:** Alternador accesible con persistencia en `localStorage`.
- 🔍 **Blog con Búsqueda en Vivo:** Filtrado en tiempo real por texto y categorías (*Libros*, *Películas*).
- 📖 **Barra de Lectura:** Indicador dinámico de avance en artículos Markdown.
- 🎨 **Diseño Moderno:** Efectos *glassmorphism*, iluminación iridiscente y tipografía *Plus Jakarta Sans*.
---
## 🚀 Inicio Rápido (Desarrollo)
```bash
# 1. Clonar e ingresar
git clone https://github.com/FrankUsqAbant/starter-project-eleventy.git
cd starter-project-eleventy
# 2. Instalar dependencias
npm install
# 3. Iniciar servidor de desarrollo
npm run start
```
---
## 🛠️ Comandos Principales
| Comando | Descripción |
| :--- | :--- |
| `npm run start` | Inicia el entorno local con recarga en vivo. |
| `npm run deploy` | Compila los archivos estáticos en la carpeta `docs/`. |
| `npm run clean` | Limpia los archivos compilados en `docs/`. |
---
## 📁 Estructura del Proyecto
```text
├── code/
│ ├── _includes/ # Componentes modulares (header, menu, footer, layouts)
│ ├── css/ # Estilos modernos con variables y temas (styles.css)
│ ├── js/ # Interactividad ligera y buscador (main.js)
│ ├── img/ # Imágenes optimizadas en WebP
│ └── *.njk / *.md # Páginas y publicaciones en Markdown
├── docs/ # Salida estática compilada para GitHub Pages
└── .eleventy.js # Configuración de 11ty
```
---
## 📄 Licencia
Distribuido bajo la licencia [MIT](LICENSE).
Explore similar templates
Compare previews and descriptions within the same stack and category.
eleventy-base-blog
The officially maintained Eleventy blog starter template, MIT licensed, includes posts, tag pages, archives, an about page, a 404 page, an Atom feed, and sitemap.xml, with per-page CSS bundling, syntax highlighting, and image optimization.
Eleventy · Blog
eleventy-garden
An Eleventy-based digital garden starter template for building a personal knowledge site organized through hyperlinks. It supports Roam-style double-bracket links, backlink display, and hover cards for backlinks.
Eleventy · Starter
eleventastic
Eleventastic is an Eleventy starter kit by Max Böck, used as the base for new 11ty projects. It integrates Sass, Webpack, SVG icon sprites, critical CSS, and HTML minification into the 11ty build without external steps.
Eleventy · Starter
neat-starter
An Eleventy-based static site starter template integrating Netlify CMS, Alpine.js, and Tailwind CSS. It provides a ready-to-run example site, a one-click Netlify deploy button, and an MIT-licensed codebase.
Eleventy · Starter
Eleventy-Starter-Boilerplate
An Eleventy-based blog starter template with Tailwind CSS, Webpack, PostCSS, ESLint, and Prettier, optional Netlify CMS, and built-in SEO metadata, sitemap, and 404 page.
Eleventy · Blog
eleventy-plus-vite
A static site starter combining Eleventy and Vite, with a live-reloading development server, Vite-based production post-processing, a PostCSS pipeline with Autoprefixer and cssnano, critical CSS inlining and asynchronous CSS loading, a web font loading strategy example, fluid typography, basic dark mode, an…
Eleventy · Starter