Skep's Place

Saturday Morning

My first order of business today was to slap some of my own site into the _input folder and make sure Eleventy would output everything exactly 1:1 (since I don't have any templates set up, it should look at the file, see there's nothing to do, and copy it to _output). Naturally, this was too much to expect.

I had used my Pride & Prejudice section for this, which contained a folder of the character images I'd used to... "embellish" my summaries, let's say. When I ran Eleventy at this point using the standard npx @11ty/eleventy, this folder nor these images were in the output. The justification is, since Eleventy didn't process these files, it didn't need to output them.

Personally, it's going to be easier for me to think of this whole process as "what goes in input comes out in output". Eleventy has accounted for this with Passthroughs. Basically, in the config file, you can tell Eleventy "if any of these criteria match, copy 'em straight to output". The linked doc page has some sample code, which I modified for my purposes:

export default function (eleventyConfig) {

  // Pass through any folder named "images"
  eleventyConfig.addPassthroughCopy("_input/**/images");
  
  // Pass through image files not in a folder named "images"
  eleventyConfig.addPassthroughCopy("_input/**/*.{png,jpg,jpeg,gif,webp}");
  
}

(You'll see that the first line of this code is export default function (eleventyConfig){ }, which is the same as the same as the code I got from GitHub yesterday. Since we're already using it in our config, we don't need to call it a second time—we can just place the new lines inside the braces of this function.)

I have this set up to do two things:

1. If a folder named images is found anywhere within the _input folder, copy it over to _output. This will keep the file structure consistent. The * wildcards help to find these folders regardless of where in the file structure they sit.
2. If a file has an extension like .png, .jpg, etc., do the same as the above. This will be a catch-all in case there are images not in a folder called "images". Theoretically you wouldn't even need the first line of code if you have this one, but reading the docs I got the impression that the first one doesn't take as long for Eleventy to do. Even if this is true, it's probably not going to be terribly noticeable, but hey.

I also took this time to set up passthroughs for some additional file types, like .txt, .pdf, and .xml. I'm not actually using all of these, but I figured trying to think of all the ones I might ever possibly want to use might save me the trouble of updating the config later on.

So, a bit of a snag this morning, but this part of the documentation was pretty straightforward and helping to build my confidence in this thing. I'll take it.