How to create a simple static website with Eleventy (11ty)
Tags: javascript, eleventy, webdev, tutorial
Published: 2020-07-29 07:13:01

[Eleventy](https://www.michaelburrows.xyz/create-static-website-eleventy/) is static site generator with and emphasis on flexibility and performance.

In this article I’ll cover the process involved in setting up a simple 3 page site using Eleventy.

Let’s get started by opening a terminal window and creating the directory for our project:

```
mkdir hello-world
cd hello-world
```

Eleventy requires a package.json file so let’s create one (defaults are ok):

```
npm init -y
```

Now we can install Eleventy and save the dev dependency in our package.json:

```
npm install --save-dev @11ty/eleventy
```

Next let’s create a layout file which will act as a wrapper for the content.

We’ll call the layout file `layout.njk` and save it to a folder named `_includes`:

```html
---
title: Hello World
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    {{ content | safe }}   
  </body>
</html>
```

Eleventy supports a number of different templating languages here we are using Nunjucks.

Next create an `index.md` file in the project’s root folder with the following markdown code:

```
---
layout: layout.njk
title: Welcome to Eleventy
---
# {{ title }}

This is some content written in markdown.
```

We can now run Eleventy and start up a hot-reloading local web server:

```
npx @11ty/eleventy --serve
```

There is now a `_site` folder that contains a compiled `index.html` ready for deployment.

With our index page setup let’s also create an about page and contact page:

###about.md
```
---
layout: layout.njk
title: About
---
# {{ title }}

This is the about page.
```

###contact.md
```
---
layout: layout.njk
title: Contact
---
# {{ title }}

This is the contact page.
```

So we can navigate between the 3 pages let’s add a menu to our layout.

Create a new file called `nav.js` and save it to a folder called `_data` with the following code:

```javascript
module.exports = [
  {label: "Home", url: "/",},
  {label: "About", url: "/about",},
  {label: "Contact", url: "/contact",},
];
```

Then create a file called `header.njk` in the `_includes` folder that’ll load the data from `nav.js`:

```html
<nav>
  <ul>
    {% for item in nav %}
      <li><a href="{{ item.url }}">{{ item.label }}</a></li>
    {% endfor %}
  </ul>
</nav>
```

And finally include `header.njk` in the `<body>` of `layout.njk` so it’ll display on all pages:

```
{% include "header.njk" %}
```

At this point you should have a fully functioning website with navigation between each page.

##Adding images & CSS

By default images and CSS don’t get copied to the `_site` folder.

Because of this we’ll need to save all our CSS and images in a folder called `assets`.

Then in a file named `.eleventy.js` we can tell Eleventy to copy the `assets` folder to the `_site` folder when run:

```javascript
module.exports = function (eleventyConfig) {    
    eleventyConfig.addPassthroughCopy('assets');
};
```

Now if you add a `style.css` file to `assets/css` it can be loaded in `layout.njk` as follows:

```html
<link rel="stylesheet" href="/assets/css/style.css" />
```

And images saved to `assets/img` can be inserted into the markdown files as follows:

```
![Logo](assets/img/logo.webp)
```

You should now have enough of an understanding to build a simple website with Eleventy.

It doesn’t have to stop there though as Eleventy can also be used to build blogs and more complex web apps.