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:
---
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:
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:
<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:
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:
<link rel="stylesheet" href="/assets/css/style.css" />
And images saved to assets/img can be inserted into the markdown files as follows:
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.
Top comments (0)