🧝in 1.9.2-alpha


Part of Elfin is a specific file structure. Some of this is required by the build process(es); some of it is to help you organize your logic and your thoughts. Here we’re going to over some of the high-level concepts and some of the low-level details to help make sense of things.


In the root of your Elfin projects, you’ll see several directories:

There are also some files worth paying attention to. These are used to configure the various parts of an Elfin site.


A sufficiently customized Eleventy project will often result in a very long main configuration file since out of the box there’s no system for spread that configuration out. Fortunately for you, Elfin has just such a system, and it’s found in the 11ty directory!

There are several different directories here, but they can really be anything. What’s important is the pattern they follow. It works like this:

In practice, that looks like this:

// eleventy.config.js
module.exports = function (conf) {
// ...
// 11ty/loader.js
module.exports = conf => {
// 11ty/filters/loader.js
module.exports = conf => {
conf.addFilter('do_the_thing', string => do_the_thing(string))

You can expand this to just about any configuration use-case.

Most things stored in 11ty/ are configuration related, but by convention there is one other directory: 11ty/shared/. This directory doesn’t follow the loader convention: Instead it serves as a repository for logic or components that need to be shared between other configuration logic–a Markdown configuration, for instance.