---
type: Article
title: Cleaning up the 11ty config
description: Learn how to organize your 11ty config file by creating separate plugin files. Improve maintainability and readability of your Eleventy project structure.
resource: https://www.simoncox.com/short-articles/2023-10-29-cleaning-up-the-11ty-config/
tags: [Shorticles, Eleventy]
timestamp: 2023-10-29
---

I read a couple of articles this week on cleaning up your 11ty config file, the initial one that I found from [Robin Hoover](https://moosedog.io/posts/clean-configuration-file-in-eleventy.html) and the second from [Lene Saile](https://www.lenesaile.com/en/blog/organizing-the-eleventy-config-file/) 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:

```javascript
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!

[Read full article](https://www.simoncox.com/short-articles/2023-10-29-cleaning-up-the-11ty-config/)