Home

Add a Static Directory to an Eleventy Project

Copy static files from a directory into the root of the build directory with Eleventy.

Some static site generators, like Gatsby, have the concept of a static folder, in which anything you drop into that folder makes its way (unprocessed) to the build directory during the build process.

With Eleventy, a similar feature is trivial to achieve, but not so straightforward out of the box.

The simplest way to setup a static folder is to use the manual passthrough file copy. After reading the docs, it seems like it would be as simple as adding this code to your Eleventy config file:

.eleventy.js

module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("static");
};

But that would actually nest everything in static/ under _site/static/, assuming your output directory is _site (which is the default).

But what we really want is to copy everything in static directly to _site. To do that we can use an option in which we change the output directory. That code looks like this:

.eleventy.js

module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy({ static: "/" });
};

This tells Eleventy to take everything in the static/ directory and copy it to the root of your build directory (e.g. static/sitemap.xml to _site/sitemap.xml).

Let's Connect

Keep Reading

Ignore _site Build Directory in Eleventy

How to ignore the build output when adding it to gitignore causes problems.

May 04, 2020

Add Netlify Redirects and Headers to an Eleventy Project

What seems like a simple task can be a little tricky to get right with Eleventy. Learn how to add a _redirects file to Eleventy projects deployed with Netlify.

Sep 24, 2020

The Jamstack Journey: A Guide on Transforming an Idea into a Website

It takes a lot to bring an idea to life on the web, even for the simplest of sites. Follow this guide for a detailed look at moving from concept to a website deployed to your domain.

Sep 08, 2021