Cleaning up the 11ty config

I read a couple of articles this week on cleaning up your 11ty config file, the initial one that I found from Robin Hoover and the second from Lene Saile in which Lene had added a 3rd method, adding another config file as a plugin which I then understood what I could do. Yes takes me a bit of time sometimes.

I created a new folder named _11ty in my source folder and in that added new .js files for each of the plugins, functions, filters and collections I needed, and in each added the code for them. This included the module.exports section but with slightly changed code.

plugin.js code example:

const CleanCSS = require("clean-css");

module.exports = eleventyConfig => {
  eleventyConfig.addFilter("cssmin", function(code) {
    return new CleanCSS({}).minify(code).styles;
  });
};

The module.exports line has changed from:

module.exports = function(eleventyConfig) {

to

module.exports = eleventyConfig => {

With all the plugin and filter code tucked into its own file for convenience and ease of maintenance my .eleventy.js file now looks like this:

module.exports = function(eleventyConfig) {
  // Plugins
  eleventyConfig.addPlugin(require("./src/_11ty/cssmini.js")); // CSS minification
  eleventyConfig.addPlugin(require("./src/_11ty/rss.js")); // RSS feed plugin
  eleventyConfig.addPlugin(require("./src/_11ty/datetime.js")); // Date Time plugin
  eleventyConfig.addPlugin(require("./src/_11ty/collections.js")); // Collections
  eleventyConfig.addPlugin(require("./src/_11ty/image.js")); // Image plugin
  eleventyConfig.addPlugin(require("./src/_11ty/passthroughs.js")); // passthroughs

  return {
    dir: {
      input: "src",
      output: "public"
    }
  }
};

You can see the paths to each plug in I have used.

Yes, this is more of a note to myself for the next time I need to do this but I hope it helps someone else too!

By Simon Cox Published: Sun, Oct 29, 2023

Next short: Tracking 404 broken links with Fathom Analytics

Previous short: 11ty draft posts