Configuration

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.

  eleventyConfig.addPassthroughCopy("./_site/images");

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 webpack.dev.js",

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