Eleventy Project File Structure

This is how I currently structure my Eleventy project files. It is by no means the only way. I'll update this as I learn more.

File Structure

| dist
| node–modules
| gulp-tasks
| src
|___| _data
|___|___| navigation.json
|___|___| site.json
|___|___| global.js
|___| _includes
|___|___| css
|___|___| layouts
|___|___|___| base.html
|___|___|___| home.html
|___|___|___| posts.html
|___|___| partials
|___|___|___| post-list.html
|___|___|___| site-head.html
|___| css
|___|___| blocks
|___|___| utilities
|___|___| critical.css
|___|___| fonts.css
|___|___| reset.css
|___| fonts
|___| images
|___| posts
|___|___| eleventy-project-setup.md
|___|___| posts.json
|___| index.md
|___| about.md
| .eleventy.js
| .eleventyignore
| .gitignore
| gulpfile.js
| package-lock.json
| package.json


1 — There are files inside the dist and node_modules folders, but I'm not including them here.

2 — This is not an extensive list of files and folders. The specific files are examples of what is possible. Guaranteed most projects will have more layouts, more data files, more partials, more collections, more pages.

3 — Posts is a collection. Any new collection would get it's own folder within src.

4 — Each page (not part of a specific collection) gets a file inside the main src folder. In this example, there are two pages (index.md and about.md).

5 — node_modules, package.json, and package-lock.json are created during project setup. We edit package.json but as far as I know just leave the other two.

6 — gulpfile.js, .eleventyignore, _includes/css, and gulp-tasks are all related to my Gulp setup and related tasks (such as my CSS Production Line).