Eleventy Walk Through

Output Path

Eleventy can be customized to match the way you prefer to work. For example, you can change the output folder from _site to dist. Configuration is done by creating the .eleventy.js file (note the dot at the beginning) :

module.exports = {
    dir: {
        output: "dist"
    }
};
			

Delete the _site folder, re-run Eleventy. A new dist folder should appear.

Source Path

Instead of placing templates in the project root, Eleventy can process from a source folder, e.g. src. Edit .eleventy.js :

module.exports = {
    dir: {
        output: "dist",
        input: "src"
    }
};
			

Move the *.njk and *.md files, and posts, _includes and _data folders all into src. Delete the output folder, re-run Eleventy, and dist should re-appear with the same structure as before.

Global Data Path

To change the folder for global data file to jsondata, edit .eleventy.js (and rename _data to jsondata) :

module.exports = {
    dir: {
        output: "dist",
        input: "src",
        data: "jsondata"
    }
};
			

Includes Path

To change the folder for includes to partials_layout, edit .eleventy.js (and rename _includes to partials_layouts) :

module.exports = {
    dir: {
        output: "dist",
        input: "src",
        data: "jsondata",
        includes: "partials_layouts"
    }
};
			

Template Formats

There should currently be *.md and *.njk files in the eleventy-test project folder. To tell Eleventy to only process *.njk and *.md files, edit .eleventy.js :

module.exports = {

    dir: {
        output: "dist",
        input: "src",
        data: "jsondata",
        includes: "partials_layouts"
    },

    templateFormats: ["njk", "md"]

};
			

This can can be used to prevent any other template file types in the project folder from being rendered. It can also be used to have non-template files sent to the output folder. Create a css/main.css folder and file, and create a js/main.js folder and file. Add their extensions into the templateFormats :

module.exports = {

    dir: {
        output: "dist",
        input: "src",
        data: "jsondata",
        includes: "partials_layouts"
    },

    templateFormats: ["njk", "md", "css", "js"]

};
		

The folders dist/css and dist/js should now appear in dist. Note that this is due to the file extensions, not the folder names. If the folder was empty, it would not end up in dist.

Note: This is not necessarily the best way to manage and transfer non-template/content assets (e.g. js, css, images). Further down this page is a article that addresses how to copy over complete folders of assets.

Including Functions in the Configuration

Eleventy's configuration can do more than just change defaults. It can use JavaScrpt to add funcionality like Filters, Shortcodes, custom created Collections, and more. This is done by passing Elevety's configuration object into the .eleventy.js module.

To make Eleventy data available to the config file, the module.exports must be changed into a function. It can then accept the Eleventy config object, in this manner :

module.exports = (function(eleventyConfig) {

}
		

module.exports = (function(eleventyConfig) {

    return {

        dir: {
            output: "dist",
            input: "src",
            data: "jsondata",
            includes: "partials_layouts"
        },

        templateFormats: ["njk", "md", "css", "js"]
    };

});
		

Passthrough File Copying

When Eleventy is run, it renders the template formats it either defaults to or is configured to, and writes the results to the output folder. But a project may require additional assets such as css files, image files, or non-data/non-template js files. Eleventy provides a method to copy those over without treating them like templates.

This is done in the configuration file by adding addPassthroughCopy. First, delete the dist folder, then edit .eleventy.js to remove "css" and "js" from templateFormats, and to add two addPassthroughCopy functions :

module.exports = (function(eleventyConfig) {

    eleventyConfig.addPassthroughCopy("src/js");
    eleventyConfig.addPassthroughCopy("src/css");

    return {

        dir: {
            output: "dist",
            input: "src",
            data: "jsondata",
            includes: "partials_layouts"
        },

        templateFormats: ["njk", "md"]
    };

});
	

The folders dist/css and dist/js should again be found, containing all the files and folders that src/css and src/js contain.

There are more configuration options available, check out the Eleventy documentation for more details.