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.
| 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
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.
Posts is a collection. Any new collection would get it's own folder within
4 — Each page (not part of a specific collection) gets a file inside the main
src folder. In this example, there are two pages (
package-lock.json are created during project setup. We edit
package.json but as far as I know just leave the other two.
gulp-tasks are all related to my Gulp setup and related tasks (such as my CSS Production Line).