Structure

The canonical directory structure for all projects.

On this page

Directory Layout

project/
├── src/                          # All source files
│   ├── _data/                    # Global data files
│   │   ├── site.json             # Site metadata
│   │   └── navigation.json       # Navigation structure
│   │
│   ├── _includes/                # Reusable templates
│   │   ├── layouts/              # Page layouts
│   │   │   ├── base.njk          # Root layout (HTML shell)
│   │   │   ├── page.njk          # Standard page layout
│   │   │   └── docs.njk          # Documentation layout
│   │   │
│   │   └── partials/             # Includable components
│   │       ├── head.njk          # <head> contents
│   │       ├── nav.njk           # Navigation
│   │       ├── footer.njk        # Footer
│   │       └── scripts.njk       # JS includes
│   │
│   ├── assets/                   # Static assets
│   │   ├── css/
│   │   │   └── main.css          # Tailwind entry point
│   │   │
│   │   ├── js/
│   │   │   ├── application.js    # Stimulus setup
│   │   │   └── controllers/      # Stimulus controllers
│   │   │
│   │   ├── images/
│   │   └── fonts/
│   │
│   └── index.njk                 # Homepage
│
├── dist/                         # Build output (gitignored)
│
├── .github/
│   └── workflows/
│       └── deploy.yml            # GitHub Pages deployment
│
├── eleventy.config.js
├── package.json
└── README.md

Naming Conventions

Item Convention Example
Directories lowercase, hyphens _includes, my-section
Layouts lowercase, .njk base.njk, page.njk
Data files lowercase, .json site.json
Stimulus controllers [name]_controller.js toggle_controller.js
Images lowercase, hyphens hero-background.jpg

What Goes Where

Content Type Location
HTML structure, meta tags src/_includes/partials/head.njk
Navigation markup src/_includes/partials/nav.njk
Site-wide data src/_data/site.json
Tailwind config src/assets/css/main.css
Stimulus setup src/assets/js/application.js
Interactive behaviors src/assets/js/controllers/*.js