Remove Whitespace from Rendered Templates in 11ty

Intro

The default behavour of 11ty is to just remove the template tags from rendered templates and leave behind white space in its place. This is probably mostly fine but for me it was causing large amounts of white space in my rendered templates and needless changes in git diffs.

11ty uses Nunjucks as its default templating engine. 11ty is inspired by Jinja2 from Python land and with Jinja2 you can create a custom environment that allows you to edit the behavour of how template tags are removed from rendered templates.

Luckily Nunjucks has a very simlilar concept and in this post I will show you how to create a custom Nunjucks environment to remove white space created by template tags.

Edit 11ty Config

Firstly edit the .eleventy.js config file. See the inline comments in the snippet below for more details.

# .eleventy.js

// Import Nunjucks   
const Nunjucks = require("nunjucks");

module.exports = function(eleventyConfig) {

  // Create a Nunjucks environment.
  const nunjucksEnvironment = new Nunjucks.Environment(

    // Specify the directories where your templates reside.
    new Nunjucks.FileSystemLoader(["./", "_includes", "_layouts"]),

    // Apply rendering options
    { 
      lstripBlocks: true,
      trimBlocks: true,
    }
  );

  // other
  // eleventyConfig
  // configs

  // Apply Nunjuks environment config
  eleventyConfig.setLibrary("njk", nunjucksEnvironment);

  return {
    dir: {
      // These values are both relative to your input directory.
      includes: "_includes",
      layouts: "_layouts"
    },
  };
};

Job done ... Not quite.

Update Templates

The issue I came accross once changing the Nunjucks environment is that templates in the _layouts directory could no longer see the templates in the _includes directory. In order to fix this I needed to update my templates under the _layouts directory to point to the _includes directory. (See below)

# _layouts/some-layout-file.njk

# From this
{% include "navbar.njk" %}

# To this
{% include "_includes/navbar.njk" %}

Reload Server

Once that is done reload your server and your output files will be regenerated free of the frivolous white space caused by template tags.

Outro

In this post we learned how to create a custom Nunjucks environment for 11ty to remove that pesky white space created by template tags. Isn't life grand :)