Return to Home

Step 2. Creating Material

Let's create a few pieces of sample content for 11ty to work on. Let's pretend this is for a personal website and we want to add a résumé. Let's create a file resume.md in the project root. Since we are working on this site actively, let's run our other script with the command bun dev. A local server will be started up at the URL http://localhost:8080. You can see the content we just created by vistiting http://localhost:8080/resume/.

Wow, that's pretty cool. This makes it pretty quick to develop simple pages. Maybe we might want to add a blog to the site, so we create a subdirectory, /blog and create an article1.md in it. Write a couple sample paragraphs. Let's also create an article2.md and write the same.

Let's add one more type of simple page, a photo gallery. I create the root directory /gallery and add 4 photos, ie_1.jpg through ie_4.jpg. When you want to create a default page on a web server, you make a file called index.html. So let's make a file in our /gallery directory called index.md. We link up our images with a simple markdown setup like…

![bridge](ie_1.jpg)

![barn](ie_2.jpg)


![building](ie_3.jpg)


![box](ie_4.jpg)

We visit http://localhost:8080/gallery and hmmm… The images don't seem to be working. If you have the development terminal open, you won't see any errors. Let's look at our output folder, _site. Oh, there's no images in _site/gallery/ at all.

See, images are not one of those default file formats that 11ty knows about by default. We'll talk about 1st party plugins later and there is a powerful one that helps with more robust image usage but for now we just want to copy these files over so we can reference them. We can do this via a function in EleventyConfig.

To create a standard 11ty config, add eleventy.config.js to your project root. The core structure of this file is function (eleventyConfig) {}. We can add our firt piece of setup to this file by using the function .addPassthroughCopy().

export default function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy("**/*.jpg");
}

If you close your development server (Ctrl + C) and restart it, you can see the files are copied into _site keeping their directories and the page will work. Let's do one last piece of configuration in our 11ty config before we commit and move on to the next lesson. If we make a change to a file, let's say we change /gallery to /photos and restart the dev server so the passthrough copy will work again, we will see in our /_site directory that both the old gallery directory and the new photos directory live side by side. The folder is not being cleared on run.

Let's close the dev server, run bun i -D del and use it in the 11ty config. Add the following to your config:

import { deleteSync } from 'del';

export default function (eleventyConfig) {
deleteSync("_site", {dot: true});

Now when either dev or build runs, /_site is guaranteed to have only the newest version of files.

Return to Home