Clean Up Your Config File

Your Eleventy configuration file is, from a certain point of view, the heart and soul of your site. It directs all the build functions to produce the beauty you're proud of. There's a problem with this though isn't there? It does so so much that this one file can become unruly, unreadable, crowded and a mile long.

I was inspired by this very talented developer to explore what they did not: cleaning up your filters and shortcodes in pursuit of easier work through superior organization.

On To The Show

Conceptually, here's where you're going. All those functions in your config file can be pulled out into a directory structure of your making. Specifically, adding a new directory within your src directory. I've called it _eleventy, originally enough, but you're free to go where your talents take you.

│
├── src
│  │
│  ├── _data
|  ├── _eleventy
|       ├── filters
|       ├── shortcodes
│  ├── _includes
│  ├── js
│  ├── pages
│  ├── posts
│  ├── sass
│

You are changing the config file from a workhorse to a true configuration file, pulling in work from other sources: easier to maintain and easier to read.

I'm a huge fan of in-lining my vanilla javascripts into the resulting html files, less network requests and all that, but it needs to be minified when printed to the html documents. My previous, and not untypical, .eleventy.js function looked like this:

const { minify } = require("terser");

module.exports = function(eleventyConfig) {

  // minify inline js codes on the fly
  eleventyConfig.addNunjucksAsyncFilter("jsmin", async function (code, callback) {
    try {
      const minified = await minify(code);
      callback(null, minified.code);
    } catch (err) {
      console.error("Terser error: ", err);
      // Fail gracefully.
      callback(null, code);
    }
  });

};

And its use:

<!-- scroll button behavior -->
{% set js %}
  {% include "../../js/inline/scroll-top.js" %}
{% endset %}
<script>
  {{ js | jsmin | safe }}
</script>

Let us create a new file within src/_eleventy/filters/ named minify-javascript.js. Copy and paste the working code within your configuration function addNunjucksAsyncFilter into your new file thusly:

const { minify } = require("terser");

module.exports = async function(code, callback) {
  try {
    const minified = await minify(code);
    callback(null, minified.code);
  } catch (err) {
    console.error("Terser error: ", err);
    // Fail gracefully.
    callback(null, code);
  }
};

And change the .eleventy.js like so:

const jsMinifier = require("./src/_eleventy/filters/minify-javascript.js");

module.exports = function(eleventyConfig) {

  // minify inline js codes on the fly
  eleventyConfig.addNunjucksAsyncFilter("jsmin", jsMinifier);

};

This simple example only takes 9 lines of code down to 1, an 11% reduction, but the big picture seems clear. Apply these few steps to all your filters and shortcodes, and marvel at the simplicity of your Eleventy configuration file. I've used this to reduce this file from ~200 lines of code down to ~90, a 45% reduction!! With zero disruption to the build process.

So To Recap

• Your configuration file is pretty darned ginormous, largely unreadable and difficult to maintain
• Let javascript modules rescue your sanity by reducing the amount of code in just one file
• Your creation and maintenance tasks become easier with less friction
• It may even end up looking like this one