#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 29th 2021 | #eleventy | GitHub Source Code [GitHub]

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/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 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 --serve
Code 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