JuicyDocs

A modern, fast, and accessible documentation starter template built with Eleventy and Tailwind CSS.

View Demo

Screenshots

Desktop

Light Mode	Dark Mode

Mobile

Light Mode	Dark Mode

Features

• Fast - Static site generation with Eleventy v3
• Modern Styling - Tailwind CSS v4 with dark mode support
• Search - Command palette search powered by Pagefind
• Syntax Highlighting - Beautiful code blocks with Shiki
• Responsive Tables - Auto-wrapped with table-saw for mobile
• Lazy YouTube Embeds - lite-youtube-embed for fast page loads
• Accessible - Keyboard navigation, focus states, WCAG compliant
• SEO Ready - Sitemap, RSS, Open Graph, Twitter Cards
• AI Ready - llms.txt for AI-readable documentation

Quick Start

# Clone the repository
git clone https://github.com/freshjuice-dev/juicydocs-11ty-starter.git
cd juicydocs-11ty-starter

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

Requirements

• Node.js 24+ (see .nvmrc)

Project Structure

├── config/             # Eleventy configuration modules
│   ├── collections.js  # Custom collections
│   ├── filters.js      # Template filters
│   ├── plugins.js      # Eleventy plugins
│   ├── shortcodes.js   # Custom shortcodes
│   └── transforms.js   # Output transforms
├── src/
│   ├── _data/          # Global data files
│   ├── _includes/      # Layouts and partials
│   ├── assets/         # CSS, JS, fonts, images
│   └── content/        # Documentation content (Markdown)
└── _site/              # Build output (generated)

Writing Documentation

Create Markdown files in src/content/docs/ with front matter:

---
title: Page Title
description: Page description for SEO
eleventyNavigation:
  key: Page Title
  parent: Parent Page  # optional, for nesting
  order: 10            # optional, for sorting
---

Your content here...

Available Shortcodes

Alerts

{% alert "This is an info message", "info" %}
{% alert "Warning message", "warning", "Heads Up" %}

Types: info, warning, success, danger

YouTube (Lazy Loading)

{% youtube "dQw4w9WgXcQ" %}
{% youtube "https://www.youtube.com/watch?v=VIDEO_ID", "Video Title" %}

Embed (iframes)

{% embed "https://www.youtube.com/embed/VIDEO_ID" %}

Configuration

Edit src/_data/metadata.yaml for site settings:

title: Your Site Name
description: Your site description
url: https://your-site.com
language: en
author: Your Name
email: [email protected]
twitter: "@YourTwitter"
ogImage: /og-default.png

Edit src/_data/navigation.yaml for navigation links.

Scripts

Command	Description
npm run dev	Start development server at localhost:8080
npm run build	Build for production
npm run clean	Remove build artifacts

Deployment

JuicyDocs generates static files in _site/. Deploy to any static hosting:

• Netlify - _redirects and _headers included
• Cloudflare Pages - Same files work here too
• Vercel, GitHub Pages, etc.

For production builds with minification:

ELEVENTY_ENV=production npm run build

Credits

Libraries & Tools

• Eleventy - Static site generator
• Tailwind CSS - Utility-first CSS
• Pagefind - Static search
• Shiki - Syntax highlighting
• Phosphor Icons - Icon set
• General Sans - Typography
• lite-youtube-embed - Lazy YouTube
• table-saw - Responsive tables

Images

Sample images from Pexels (free to use):

Image	Photographer	Link
pexels-jsalamanca-61127.jpg	Juan Salamanca	Banana
pexels-nietjuhart-2820144.jpg	Susanne Jutzeler	Strawberries
pexels-pixabay-51958.jpg	Pixabay	Orange
pexels-pixabay-52536.jpg	Pixabay	Raspberries
pexels-psco-27269.jpg	Pineapple Supply Co.	Pineapples
pexels-wendyaffieplaas-1178610.jpg	Wendy Aros-Routman	Cherries

License

MIT License - see LICENSE for details.

---

Made with 🍊 by FreshJuice