Lesson 5: Passthrough basics

This content is likely out of date

The content of this course was written in May 2020, so parts will be outdated. There’s no immediate plan to do a full update, but this course is now open source, so if you see an issue, please raise an issue.

Head over to the project and follow the contribution guide if you would like to help.

In our project folder we have an src folder and a dist folder. The src folder contains source files, which are mainly code, but also include static files like images.

We’re going to want some of those static files in our output folder and luckily, Eleventy makes this pretty straightforward with Passthrough file copy (opens new window).

In this lesson, we’re going to make our images work by telling Eleventy to copy our image files over to our dist folder.

Our current state

If you go to http://localhost:8080 (opens new window) now, it should look like this:

There’s an image in there, but you’ll notice it’s not rendering, and it’s showing the image alternative text instead.

This is because our images never got copied over to our dist folder, which is where this localhost:8080 serves the local site from.

Adding passthrough

Open up eleventy-from-scratch/.eleventy.js in your text editor and on the first line of the function (right below module.exports = config => { ) add this line:

// Set directories to pass through to the dist folder
config.addPassthroughCopy('./src/images/');

Now, if you open up http://localhost:8080 (opens new window), it should look like this:

Wrapping up

A short but sweet lesson!

You can copy anything you like over with passthrough copy. It’s how I usually do stuff like CSS for very simple projects to reduce the need for further build steps.

Let’s move on and write some more code.