#AD Top Online Web Development & Programming Courses | Udemy
Newsletter Screenshot

How to create a simple static website with Eleventy (11ty)

Last modified September 29th 2021 | GitHub Source Code [GitHub] | #eleventy

In this tutorial I’ll run through the process involved in setting up a simple static website using Eleventy. If you’ve never heard of Eleventy it was created to be a JavaScript alternative to Jekyll with a focus on flexibility and perfomance.

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

mkdir eleventy
cd eleventy

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

npm init -y

Now we can install Eleventy saving as dependency in the package.json:

npm install --save-dev @11ty/eleventyCode language: plaintext (plaintext)

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:

---
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>Code language: HTML, XML (xml)

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

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

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

This is some content written in markdown.Code language: Markdown (markdown)

We can now run Eleventy to compile the project and start up a hot-reloading local server:

npx @11ty/eleventy --serveCode language: CSS (css)

This compiles an index.html file to the _site folder.

With the index page created let’s also create an “about” and “contact” page:

about.md

---
layout: layout.njk
title: About
---
# {{ title }}

This is the about page.Code language: Markdown (markdown)

contact.md

---
layout: layout.njk
title: Contact
---
# {{ title }}

This is the contact page.Code language: Markdown (markdown)

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

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

module.exports = [
  {label: "Home", url: "/",},
  {label: "About", url: "/about",},
  {label: "Contact", url: "/contact",},
];Code language: JavaScript (javascript)

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

<nav>
  <ul>
    {% for item in nav %}
      <li><a href="{{ item.url }}">{{ item.label }}</a></li>
    {% endfor %}
  </ul>
</nav>Code language: HTML, XML (xml)

And finally include header.njk in layout.njk above the content:

{% include "header.njk" %}Code language: PHP (php)

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

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:

module.exports = function (eleventyConfig) {    
    eleventyConfig.addPassthroughCopy('assets');
};Code language: JavaScript (javascript)

Now if you add a style.css file to assets/css it can be loaded into the <head> of layout.njk as follows:

<link rel="stylesheet" href="/assets/css/style.css" />Code language: HTML, XML (xml)

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. To see what Eleventy is capable of you can view a gallery of websites created using it here, we’ll also be publishing more Eleventy tutorials in the future here.

Related Posts

#AD Shop Web Developer T-Shirts