Lesson 5 - Passthrough basics

Course
Learn Eleventy From Scratch
Module
Let’s build a website

A quick tutorial on telling Eleventy to copy files over to your website output.


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.

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 permalink

If you go to http://localhost:8080 now, it should look like this:

Some structured HTML content with a broken image that reveals the alt text

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 permalink

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:

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

Now, if you open up http://localhost:8080, it should look like this:

The same homepage with an image of toast that’s now successfully loaded

Wrapping up permalink

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.

Next up: Lesson 6 - Partials basics

A quick tour of partials and how we can include them by adding our site header.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I’m a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.