Copy unprocessed static files, including HTML, to output directory

[robindotis]

I have a folder "old" which contains some static versions of older sites of mine. I would like 11ty to copy this to the output directory as is, untouched, without processing them. They contain a mix of files, including images, css, html and possibly others I don't know about (they are old sites). I just want them copied to the output directory, "_site" in my case.

So I've added something like this to my elventy.js file:

eleventyConfig.addPassthroughCopy("old");

Which I was hoping would simply copy "old" and everything in it to "_site/old". But I am not having much luck getting this to work.

Before digging deeper into what I have done, could someone please confirm whether this is what addPassThroughCopy is supposed to do?

Thanks.

[pdehaan]

I think this largely depends on how your project is set up, and where your "old/" folder lives.
The one gotcha I always forget about is: https://www.11ty.dev/docs/copy/#manual-passthrough-file-copy-(faster)

Passthrough File Copy entries are relative to the root of your project and not your Eleventy input directory.

Here's what my sample project looks like:

tree -aI node_modules
.
├── .eleventy.js
├── old/
│   ├── site.css
│   ├── site.html
│   ├── site.js
│   └── site.png
├── package-lock.json
├── package.json
├── src/      ########## My input directory
│   ├── assets/
│   │   ├── foo.css
│   │   ├── foo.js
│   │   └── foo.png
│   └── index.njk
└── www/      ######### My output directory
    ├── assets/
    │   ├── foo.css
    │   ├── foo.js
    │   └── foo.png
    ├── index.html
    └── old/
        ├── site.css
        ├── site.html
        ├── site.js
        └── site.png

6 directories, 19 files

Any my .eleventy.js config file looks like this:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("old");
  eleventyConfig.addPassthroughCopy("src/assets");

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

Note that my site's files are all in the src/ directory, and my old/ directory is at the same level (mainly since I don't want Eleventy processing anything in that old/ directory). So my passthrough copy for old/ looks like:

// This will copy everything from `./old/*` to `./www/old/*`.
eleventyConfig.addPassthroughCopy("old");

In the case of copying my site's static assets, I use the following:

// This will copy everything from `./src/assets/*` to `./www/assets/*`.
// Note that "since passthrough file copy entries are relative to the root of your project
// and not your Eleventy input directory", we need to explicitly specify the `src/` bit here.
eleventyConfig.addPassthroughCopy("src/assets");

[robindotis]

Thanks for the reply. The problem I have is that, taking your example, the site.html file actually ends up like this in my output directory:

www/old/site/index.html

And this means some that relative links in index.html to CSS and JS files no longer work. How do I stop 11ty from doing this? My output directory is the default "_site".

Thanks.

[pdehaan]

Do you have a public repo? I think I’d need to see the folder structure and your config file to see if we can come up with a solution.
My guess is that if the “old/“ folder is within your input directory, Eleventy is processing the files.

[robindotis]

After you explained how it should work, I dug around a bit more and cleaned up some files and code. I had made a mistake in the code. I was using code like this:

  eleventyConfig.addPassthroughCopy(
    "src/assets",
    "old")

After I changed it to this, as in your example (and the official docs!):

  eleventyConfig.addPassthroughCopy("src/assets");
  eleventyConfig.addPassthroughCopy("old");

It worked. I don't know why I ended up with the first case.

So thanks for your help on this, it solved the problem for me.