#AD "Ten++ Ways to Make Money as a Developer" eBook by Florin Pop

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

Last modified September 30th 2020 | #eleventy | GitHub Source Code [GitHub]

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
Code 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 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.
Code language: Markdown (markdown)

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

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

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:


--- layout: layout.njk title: About --- # {{ title }} This is the about page.
Code language: Markdown (markdown)


--- layout: layout.njk title: Contact --- # {{ title }} This is the contact page.
Code language: Markdown (markdown)

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",}, ];
Code language: JavaScript (javascript)

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

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

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

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'); };
Code language: JavaScript (javascript)

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

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.

Related Posts