---
title: "Learn Eleventy Part 2: Partials, Styling and Images"
author: "James 'Dante' Midzi "
published: "2022-05-25T00:00:00.000Z"
updated: "2026-09-25T14:41:47.719Z"
url: "https://zyvop.com/learn-eleventy-part-2-partials-styling-and-images-lm6yk"
canonical: "https://dantedecodes.vercel.app/articles/eleventy/lets-learn-11ty-part-2-partials-styling-images-84m"
tags: ["tutorial","eleventy","SSG"]
---

# Learn Eleventy Part 2: Partials, Styling and Images

Partials, Styling and Images

![Cover image](<https://pub-03c883138afa4f88bc40a259a9109c50.r2.dev/posts/covers/learn-eleventy-part-2-partials-styling-and-images-utqmuhcd.webp>)

In the last article we setup the basis for our site. It's bare bones, but it is a valid site. We are now going to add more to it to make it a bit nicer

## Partials

Partials are those files that contain information/data repeated across the site that doesn't change a lot - navigation, footer.

It's now time to structure our site a bit better. Let's make our navigation first

-   In our `src` folder make `about.md` file and place this in it
    

```md
---
layout: base
title: About
---

# About Page
```

-   Now in the `_includes` folder make a **partials** folder and then a `_navigation.njk` file in it
    

```xml
<!-- _includes/partials/_navigation.njk-->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>
```

> Later on we will improve this navigation, but for now it's fine

-   Next, we'll include this navigation file in our `base.njk`
    

```xml
<body>
  {% include "partials/_navigation.njk" %}
  <main>{{content | safe}}</main>
</body>
```

> We can repeat the same steps for the `_footer.njk` file

Let's run our server and see what we have so far

```bash
pnpm dev
```

![](<https://pub-03c883138afa4f88bc40a259a9109c50.r2.dev/posts/covers/styles-r7px5jet.webp>)

* * *

## Styling

Let's now make our site look a bit nicer. Starting with a font. We'll add a google font in our head:

```xml
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2? 
     family=Sora:wght@300;400;500;600&display=swap"
    rel="stylesheet"
  />
  <title>My Eleventy Site - {{title}}</title>
</head>
```

### The CSS File

We also need to add a CSS file to apply style changes. Let's make an **assets** folder, in it a **css** and then in it a `style.css` file

```css
/* src/assets/css/style.css*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Sora", sans-serif;
}
```

Above is a general reset that I use for my CSS.

We then have to add it to our head tag as well

```xml
<link rel="stylesheet" href="{{ '/assets/css/style.css' | url }}" />
```

After doing all that, and checking our site, you are going to notice something peculiar - our styles are not being applied.

If we checked our `_site` folder, where our site files are generated to, there is no CSS file in there

But why is that?

### Pass Through Copy

If you recall when we started, I mentioned that Eleventy supports several templating languages - ways to author your site. With those file types, Eleventy automatically converts them to html.

CSS and JavaScript are not part of these languages. With them we actually have to tell Eleventy to copy those files to our output directory through a process called **Pass Through Copy**

Open the `eleventy.config.js` file and modify it to look like this:

```javascript
export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/assets/css/style.css");

  return {
    dir: {
      input: "src",
      data: "_data",
      includes: "_includes",
      layouts: "_layouts",
    },
  };
}
```

> **NOTE**: Any files that are not part of the template languages that you want to be present on the site will need to have a Pass Through Copy - that goes for images, local fonts, icons etc

Now, if we check our site, our styles are being applied.

![](<https://dantedecodes.vercel.app/images/articles/content/3fdcc44b-c245-4c61-b9ed-990bc5191725.png>)

We can now add more styles to our style sheet

```css
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Sora", sans-serif;
  line-height: 1.5;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 3.5rem;
  width: 100%;
  background-color: black;
  color: lightgray;
}

nav > a {
  display: block;
  padding: 1rem 2rem;
  color: lightgray;
}
nav > a:hover {
  color: aqua;
}

main {
  max-width: 50rem;
  margin: 0 auto;
  padding: 3rem 2rem;
  min-height: 100vh;
}

main > h1 {
  margin: 2rem 0 0.5rem;
}

main > img {
  border-radius: 5px;
}

footer {
  background-color: black;
  color: lightgray;
  padding: 2rem;
}
```

![](<https://dantedecodes.vercel.app/images/articles/content/53ec6d24-9be6-437b-a111-af7179f2705e.png>)

* * *

# Images

Lets add an image to our site to it doesn't look so plain

-   Create an images folder in assets and add an image of your choice in there
    
-   Add a Pass through copy for our images folder in `eleventy.config.js`
    

```javascript
eleventyConfig.addPassthroughCopy("src/assets/images");
```

-   Add the image to our `index.md`
    

```md
---
layout: base
title: Home
---

![hero image](assets/images/learn.png)

# My Eleventy Site

I am a site built with [Eleventy](https://www.11ty.io/).
```

And here we go:

![](<https://dantedecodes.vercel.app/images/articles/content/59816557-2c70-4b3d-94d3-b691df9a3315.png>)

* * *

## More Info

-   The pipe **|** that we used in `{{content | safe }}` and `{{ '/assets/css/style.css' | url }}` is called a filter, and we use them to decide how we want certain information to render.
    
-   Like with anything in Eleventy, how you decide to style your site is completely up to you. If you choose to write them manually like I did, I recommend you use SASS. whitep4nth3r's site is styled this way
    

* * *

We have done a good deal this time:

-   Added navigation and footer
    
-   Added styling to our site and made sure they work
    
-   Added an image to our site and made sure that works also
    

For now:

-   Here is our working repo: [Part 2: Partials](<https://github.com/Psypher1/learneleventy/tree/part2-partials-styling-images>)
    
-   Check out the docs: [https://www.11ty.dev/docs/](<https://www.11ty.dev/docs/>)
    
-   Join the discord: [https://www.11ty.dev/blog/discord/](<https://www.11ty.dev/blog/discord/>)
    

* * *

### Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. My email and DMs are always open; if you want to chat or collaborate on something, [shoot me a email](<mailto:jamesmidzi@gmail.com>)

Where you can get hold of me:

-   [Twitter](<https://twitter.com/Psypher1>)
    
-   Discord
    
-   [LinkedIn](<https://www.linkedin.com/in/jamesmidzi/>)