The main configuration file is called .eleventy.js and is in the root folder. The important bits are the special collections based on existing folders.

// only content in the `posts/` directory
eleventyConfig.addCollection('courses', function(collection) {
return collection.getFilteredByGlob('./_site/courses/*.md').reverse()

eleventyConfig.addCollection('searchable', function(collection) {
return collection.getFilteredByGlob(['./_site/courses/*.md', './_site/posts/*.md']).reverse()

These commands set up collections, which are used to build the site. The first example corresponds to folders in the _site folder that are the main sections of the site. The commands here will look for a certain folder in the _sites folder and build a collection out of everything in there.

The last one adds folders to a new collection which our Vue.js search component uses. If you add a new collection, make sure you add it here. Check the 11.ty documentation to learn how to use the getFilteredByGlob command.


This code is used to copy whatever is in these folders, if you happen to move the locations of images, then update this.

I hate messy root folders, so I've reconfigured where eleventy places files.

dir: {
input: "_site",
includes: "_templates",
data: "_data",
output: "dist"

If you move stuff around, remember to update these. Also, the build processes refer to some of these locations, so if you move things, remember to update these.

    "start": "npm-run-all --parallel dev:*",
"dev:del": "rimraf dist",
"dev:eleventy": "ELEVENTY_ENV=development eleventy --serve --quiet",
"dev:webpack": "webpack --config",

"build": "run-s prod:*",
"now-build": "run-s prod:*",
"prod:del": "rimraf build",
"prod:webpack": "webpack -p --config",
"prod:serve": "ELEVENTY_ENV=production eleventy --output=./build"