I’m in the process of converting a couple of sites that I built a few years ago using Jekyll to use Eleventy instead. Both tools are static site generators that work very similarly, but Eleventy gives me more flexibility and, given that it’s based in JavaScript—a language I use daily—rather than Ruby—a language I know almost nothing about—Eleventy is much easier for me to extend and customize to my needs.

Jekyll has a unique feature that Eleventy does not: the drafts folder. In Jekyll, you can add content that isn’t ready for public consumption to a directory named _drafts , and when you build the site, this content will be ignored. To include the content, you add a --drafts argument to the jekyll build or jekyll serve command.

While I never really made much use of this feature, the site I’m converting now does have a drafts directory with a couple of in-progress pages. Eleventy doesn’t have the concept of draft content, so I wanted to find a workaround, at least for the time being.

Eleventy has a few ways to ignore files from being processed. First, anything inside node_modules is automatically ignored. Then, anything in .gitignore (at least by default) or .eleventyignore files gets excluded, but adding the _drafts directory to one of these would mean it would never be processed. I need a way to selectively tell Eleventy to build the draft content when I want it and ignore it when I don’t.

Fortunately, there is a simple solution: Eleventy’s ignores collection, which is automatically populated from the files above. Eleventy conveniently provides an API for adding or removing paths from the collection on a programatic basis. To make the drafts folder work, I added the following inside the module.exports in my site’s .eleventy.js file:

if(process.env.ELEVENTY_ENV === "production") {
    eleventyConfig.ignores.add("_drafts")
}

This looks for an environment variable named ELEVENTY_ENV with the value production and, if found, adds the file glob “_drafts” to the list of ignored content. This has the effect of ignoring anything located in any directory named _drafts located anywhere within the site when that environment value is present. If the ELEVENTY_ENV variable is not set, or it contains a different value, the draft content will be processed.

I’m already using ELEVENTY_ENV to manage minification and map file creation for CSS and client-side JavaScript assets, so this works well for me. In fact, I don’t really have to think much about it because I’ve incorporated it into the npm run scripts in my `package.json`:

"scripts": {
    "build": "npm run clean; ELEVENTY_ENV=production npx @11ty/eleventy",
    "build-test": "npx @11ty/eleventy",
    "watch": "npx @11ty/eleventy --watch",
    "serve": "npx @11ty/eleventy --serve",
    "clean": "rm -rf _site/*"
}

This means that drafts will be excluded if I nmp run build the site, but not during development when I’m most likely using npm run serve. If I want to exclude that content during development for some reason, it’s just a matter of running ELEVENTY_ENV=production npm run serve.