Project structure

This page covers the directory layout of the scaffolded project and what each directory is for. Use it as a map for finding what to edit.

Overview

The scaffolded project looks like this:

.
├── dist
├── eleventy.config.js
├── package.json
└── src
    ├── _data
    ├── _includes
    │   └── partials
    └── public

Everything you write or implement lives under src/. dist/ is the build output, and eleventy.config.js is a thin layer that just calls the preset.

dist

The build output. You never edit this by hand. It is in .gitignore and gets removed by pnpm clean.

src

The root Eleventy treats as its template input. Pages (MDX), partials, static assets, and global data all live here.

src/_data

Where global data goes. The file name becomes the data key, readable from any template. The scaffold includes site.js (site-wide metadata) and nav.json (navigation).

src/_includes

Where layouts for layout chaining live. Pages find the layout they refer to (layout: "...") here. The scaffold's base.mdx holds the HTML skeleton and post.mdx holds the article wrapper.

src/_includes/partials

Where JSX and MDX partials called from templates live. The scaffold ships header.mdx, footer.mdx, and ogp.mdx.

src/public

Where static assets (favicon, robots.txt, images, and so on) live. Everything here is copied to the root of dist/ at build time.

Next

Once the layout clicks, continue to Architecture for the overall design and to Preset Conventions for day-to-day writing.