---
title: "Learn Eleventy Part 1: Installation"
author: "James 'Dante' Midzi "
published: "2022-05-23T00:00:00.000Z"
updated: "2026-09-25T14:42:20.055Z"
url: "https://zyvop.com/learn-eleventy-part-1-12zhr"
canonical: "https://zyvop.com/learn-eleventy-part-1-12zhr"
tags: []
---

# Learn Eleventy Part 1: Installation

Scaffold the project 

![Cover image](<https://pub-03c883138afa4f88bc40a259a9109c50.r2.dev/posts/covers/learn-eleventy-part-1-4ynluwud.webp>)

> ### UPDATE: September 2026
> 
> This series has been updated to more newer version. It was merely authored years ago.

In this article, I said that we will be doing a complete tutorial of Eleventy - from scratch to deployment. Before we get into that, let's talk a bit more about Eleventy.

## How Eleventy Works

Eleventy aims to ship as little javascript as possible. It does this by rendering your source files into html and serving those static files.

### Templates

Templates is the way you create your various pages in Eleventy. It supports over 3 template languages. Some of them notably:

-   html
    
-   markdown
    
-   liquid
    
-   nunjucks
    

What this means is that you have several options to how you choose to author your site. In this tutorial, we will be using **markdown** and **nunjucks** for our templates.

### Requirements

At this stage, you'll need only 3 things:

1.  Node
    
2.  A text editor
    
3.  Willingness to learn p
    

Make sure you have node installed , then continue with this tutorial

* * *

## Setup

1.  Create an empty folder anywhere on your computer and navigate into it
    

```bash
mkdir learneleventy
cd  learneleventy
```

1.  Initialise an empty `package.json` file with
    

```bash
pnpm init
```

1.  Install eleventy
    

```bash
pnpm install @11ty/eleventy
```

* * *

## Configure Project

By default Eleventy uses files your project root to generate your site - you could place all your files there and it would work. I prefer a more ordered approach - having an `src` folder. Luckily for us Eleventy allows us to modify the path where it looks for source files

In your project root, create a file called `eleventy.config.js` and place this in it:

```javascript
exprort default function (eleventyConfig) {
  return {
    dir: {
      input: "src",
      data: "_data",
      includes: "_includes",
      layouts: "_layouts",
    },
  };
};
```

This is our configuration file for our project. In it we define how we want a our project to behave. For now:

-   We have set our input directory to `src`
    
-   Our includes folder to `_includes` - Eleventy will look for this folder
    
-   Our layouts folder to `_layouts`
    
-   We will talk about the data folder later
    

With that done, we make an `src` in our root and that's where our files will go. Let's make two more folders in `src` that we will use later: `_layouts` and `_includes`

Let's make a `index.md` file in the root of our `src` and lets put some dummy content

```markdown
# My Eleventy Site

I am a site made with Eleventy
```

* * *

## Running Our Project

To run our site, type this command in your terminal

```bash
pnpm exec eleventy
```

Your site will be running in development on `http://localhost:8080/`. You will also notice that a `_site` folder has been generated, this is where our rendered files will go.

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

We don't want to always have to write this when we run our project, so let's add a script in `package.json`

```json
"scripts": {
    "dev": "exec eleventy --serve",
  },
```

> ### Gotcha
> 
> If we were to change anything in our index.md, those changes would not show unless reloaded the page. Eleventy requires a valid html document structure to facilitate that.

## Your First Template

Let's now implement templates in our Eleventy project. In `src/_layouts` make a file called `base.njk`

```xml
<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>My Eleventy Site</title>
  </head>
  <body>
    {{content | safe}}
  </body>
</html>
```

As you can see it's just an `html` document. The thing that's different is `{{content | safe}}`. This is where any content wrapped by our base will go.  
The `| safe` part is a filter that tells Eleventy that the content is safe to render.

Then modify index to look like this:

```md
---
layout: base
---

# My Eleventy Site

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

We added YAML frontmatter and specify the layout that is supposed to wrap this file.

Now any changes we make to our source files will automatically update. Also, our page now has a title and doesn't say `localhost:8080`

> **NOTE** : You can override the template languages in your project if you want to use anything other than markdown and nunjucks.

### Using Variables In Templates

Usually each page on a site has a unique title. We have hardcoded the title. Let's improve that so that the page title is applied dynamically.

Modify our base with this

```xml
<title>My Eleventy Site - {{title}}</title>
```

Then our index.md YAML with thiis

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

Now when we hover over the tab we see **My Eleventy Site - Home**

* * *

## Conclusion

Without doing a lot, we have built a website. It may not look nice right now, but it is valid webpage.

Join me in the next part as we add more to this site.

The working repository for this series can be found here: [Part 1: Installation](<https://github.com/Psypher1/learneleventy/tree/part1-installation>)

While You wait

-   Check out the docs: [https://www.11ty.dev/docs/](<https://www.11ty.dev/docs/>)
    
-   Join the Discord, a lot of helpful people in there
    
-   The working repository for this series can be found here: [https://github.com/Psypher1/learneleventy](<https://github.com/Psypher1/learneleventy>)
    

* * *

#### 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>)
    

-   <a hrer="[https://discord.com/users/Pharaoh#5441/](<https://discord.com/users/Pharaoh#5441/>)" target="\_blank">Discord</a>
    
-   [LinkedIn](<https://www.linkedin.com/in/jamesmidzi/>)