Eleventy — Use Passthrough File Copy to Add Assets

In Eleventy, static assets like CSS and JavaScript aren't automatically copied to the output directory as 11ty only processes template files (e.g., Nunjucks, Liquid, or Markdown) out-of-the-box.

Depending on your project setup, you may not need a bundler or build pipeline to process the website assets (e.g., CSS, JS, images, fonts, and videos) and want them copied in the Eleventy output folder.

For example, if you write native CSS rather than SCSS. Or, if you manually optimize images and fonts. In such cases, a simple copy and paste of assets from the input to the output directory is what's required.

Luckily, Eleventy comes with a feature that allows copying additional files and folders that are not Eleventy templates to the output directory — called Passthrough File Copy.

Let's take a look at it and how to use it in an 11ty project.

Eleventy Passthrough File Copy

Using Passthrough File Copy, you can specify additional files and folders that Eleventy should copy to the output folder each time the site is built.

To do so, specify the name of files or folders in the Eleventy config file (e.g., .eleventy.js or eleventy.config.js) using the addPassthroughCopy() method as mentioned below:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy('./assets');
};

Here, the "assets" folder (relative to the root project folder) is copied as-is to the 11ty output folder (_site by default) each time Eleventy is run.

Note that Passthrough File Copy looks for files and folders within the project root directory (not the Eleventy input directory).

Copying Other Content Type

In addition to static assets, you can also add another type of content, such as robots.txt or sitemap.xml files, document files like PDF, and more.

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy('./docs/overview.pdf');
  eleventyConfig.addPassthroughCopy('./robots.txt');
  eleventyConfig.addPassthroughCopy('./sitemap.xml');
};

Copying Individual Assets — CSS, JS, Images, and More

For some reason, if you want to passthrough copy certain asset types, simply specify the file or folder path relative to the project root.

For instance, if you use webpack to process JavaScript files and want Eleventy to add CSS and images to the output directory, this is how you'd do it:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy('./assets/css');
  eleventyConfig.addPassthroughCopy('./assets/images');
};

The Configuration API options above only move the ~/assets/css and ~/assets/images folders to the output folder.

Wrapping Up

That's it. We looked at how to use the addPassthroughCopy() method to copy static assets in the output folder in an Eleventy project. ✨

In addition, we also saw how to passthrough copy other content files like PDFs. 📄

Let me know if you have any questions or feedback via email at [email protected]. 🙂