A vibrant, fast, and accessible starter theme for building static websites with Eleventy, TailwindCSS v4, and Alpine.js.
- Eleventy v3 - Fast static site generation with ES modules
- TailwindCSS v4 - Utility-first CSS framework
- Alpine.js - Lightweight JavaScript for interactivity
- Pagefind - Static search with zero configuration
- Shiki - Beautiful syntax highlighting for code blocks
- eleventy-img - Automatic image optimization (AVIF, WebP, JPEG)
- Phosphor Icons - 6,000+ icons with multiple weights
- Speculation Rules - Instant page loads with prefetching
- Accessibility - WCAG 2.1 AA compliant with automated testing
- SEO Ready - Sitemap, RSS feed, meta tags, Open Graph
- LLM Ready - llms.txt and llms-full.txt for AI assistants
- Node.js 24 or higher (see
.nvmrc) - npm
# Clone the repository
git clone https://github.com/freshjuice-dev/electric-lime-11ty-starter.git
cd electric-lime-11ty-starter
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:8080 to view your site.
| Command | Description |
|---|---|
npm run dev |
Start development server with hot reload |
npm run build |
Build for production |
npm run clean |
Remove _site folder |
electric-lime-11ty-starter/
├── src/
│ ├── _data/ # Global data files
│ │ ├── build.js # Build info (git hash, timestamp)
│ │ ├── metadata.yaml # Site metadata
│ │ ├── header.yaml # Navigation config
│ │ ├── footer.yaml # Footer configuration
│ │ └── socials.yaml # Social media links
│ ├── _includes/
│ │ ├── layouts/ # Page layouts
│ │ │ ├── base.njk # Base HTML layout
│ │ │ ├── page.njk # Standard page layout
│ │ │ ├── post.njk # Blog post layout
│ │ │ ├── author.njk # Author page layout
│ │ │ ├── legal.njk # Legal pages layout
│ │ │ └── error.njk # Error pages layout
│ │ ├── partials/ # Reusable partials
│ │ │ ├── header.njk
│ │ │ ├── footer.njk
│ │ │ └── metatags.njk
│ │ └── _components/ # Nunjucks component macros
│ │ └── index.njk
│ ├── assets/
│ │ ├── css/
│ │ │ ├── main.css # Entry point
│ │ │ ├── _base.css # CSS variables, reset
│ │ │ ├── _typography.css
│ │ │ ├── _buttons.css
│ │ │ ├── _forms.css
│ │ │ ├── _utilities.css
│ │ │ ├── _pagefind.css
│ │ │ ├── _youtube.css
│ │ │ └── _high-contrast.css
│ │ └── js/
│ │ ├── main.js
│ │ └── components/
│ │ └── contrast-toggle.js
│ ├── authors/ # Author profiles
│ ├── blog/ # Blog posts
│ ├── legal/ # Legal pages
│ ├── pages/ # Site pages
│ └── static/ # Static files (favicons, etc.)
├── config/ # Eleventy configuration
│ ├── collections.js
│ ├── filters.js
│ ├── shortcodes.js
│ ├── transforms.js
│ └── plugins.js
└── eleventy.config.js
Import and use Nunjucks macros in your templates:
{% from "_components/index.njk" import button, card, badge, authorCard %}
{# Buttons #}
{{ button({ text: "Get Started", url: "/contact/", variant: "primary" }) }}
{{ button({ text: "Learn More", variant: "secondary" }) }}
{{ button({ text: "Cancel", variant: "outline" }) }}
{# Cards #}
{{ card({
title: "Post Title",
description: "Description text",
image: "/assets/images/photo.jpg",
url: "/blog/post/",
date: page.date,
author: "john-doe"
}) }}
{# Badges #}
{{ badge({ text: "New", variant: "primary" }) }}| Class | Description |
|---|---|
.btn |
Primary lime button |
.btn--secondary |
Light background |
.btn--outline |
Transparent with border |
.btn--ghost |
No background or border |
Sizes: .btn--sm, .btn--md, .btn--lg
{% youTube "dQw4w9WgXcQ", "Video Title" %}Uses lite-youtube-embed for fast, privacy-friendly embeds (youtube-nocookie.com).
{% year %}Edit src/_data/metadata.yaml:
title: "Your Site Name"
description: "Your site description for SEO"
url: "https://yoursite.com"
language: "en"
author: "Your Name"
email: "hello@example.com"
twitter: "@yourhandle"
image: "/assets/images/og-image.png"
themeColor: "#65a30d"Edit src/_data/header.yaml:
navigation:
- label: "Home"
url: "/"
- label: "About"
url: "/about/"
- label: "Blog"
url: "/blog/"Edit src/_data/footer.yaml to configure footer columns and links.
Pagefind provides instant static search. It runs automatically after build and indexes all pages.
The search UI is at /search/.
| File | Description |
|---|---|
/sitemap.xml |
XML sitemap for search engines |
/sitemap.xsl |
Visual sitemap stylesheet |
/robots.txt |
Robots directives |
/feed.xml |
RSS feed for blog posts |
/llms.txt |
LLM-friendly site index |
/llms-full.txt |
Full content export for LLMs |
/_headers |
Security headers (Netlify/Cloudflare) |
/_redirects |
Redirect rules (Netlify/Cloudflare) |
---
title: "Page Title"
description: "Page description for SEO"
image: "/assets/images/og-image.jpg"
noindex: true # Exclude from sitemap
llms_exclude: true # Exclude from llms.txt
---Demo images are royalty-free from Pexels:
| Image | Photographer | Link |
|---|---|---|
| Author: Jane Smith | Daniel Xavier | View |
| Author: John Doe | Andrea Piacquadio | View |
| Lime/Citrus | Juan Salamanca | View |
| Strawberries | Susanne Jutzeler | View |
| Orange | Pixabay | View |
| Raspberries | Pixabay | View |
| Pineapples | Pineapple Supply Co. | View |
| Cherries | Wendy Aros-Routman | View |
Placeholder logos from Logoipsum.
Contributions are welcome! Please open an issue first to discuss what you'd like to change.
MIT License - use this starter for any project.
Built by Alex Zappa at FreshJuice