A modern, fast, and accessible documentation built with Eleventy and Tailwind CSS.
- 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
- Accessible - Keyboard navigation, focus states, WCAG compliant
- SEO Ready - Sitemap, RSS, Open Graph, Twitter Cards
- AI Ready - llms.txt for AI-readable documentation
# Clone the repository
git clone https://github.com/alwaysdata/documentation.git
cd documentation
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildWarning
The task npm run dev runs a NodeJS http-server but it doesn't understand the .htaccess file (Apache server only) which contains a redirection from the root http://localhost:8080 to /fr/ or /en/.
So expect an empty (404) root page then go manually to /fr/ or /en/
- Node.js 24+ (see
.nvmrc)
├── 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)
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...Adds automatically anchors (id) on headings for precise sharable URLs
Adds footnotes feature:
Here is a footnote reference,[^1] and another.[^longnote]
[^1]: Here is the footnote.
[^longnote]: Here's one with multiple blocks.
Subsequent paragraphs are indented to show that they
belong to the previous footnote.Here is an inline note.^[Inlines notes are easier to write, since
you don't have to pick an identifier and move down to type the
note.]Adds flavours to blockquotes.
Available types: NOTE, TIP, WARNING, CAUTION, IMPORTANT
> [!NOTE]
> This is a note, to add context
> [!TIP]
> This is a tip, to share an optional pro tip
> [!WARNING]
> This is a warning notice, for potentially breaking stuff
> [!CAUTION]
> This is a caution notice, for dangers and breaking stuff
> [!IMPORTANT]
> This is a important notice, for really important information to read| Command | Description |
|---|---|
npm run dev |
Start development server at localhost:8080 |
npm run build |
Build for production |
npm run clean |
Remove build artifacts |
Eleventy generates static files in _site/, then deploy this folder any static hosting.
For production builds with minification:
ELEVENTY_ENV=production npm run build- JuicyDocs - 11ty Starter
- Eleventy - Static site generator
- Tailwind CSS - Utility-first CSS
- Pagefind - Static search
- Shiki - Syntax highlighting
- Phosphor Icons - Icon set
- General Sans - Typography
- table-saw - Responsive tables
MIT License