DEV Community

Khaled Garbaya
Khaled Garbaya

Posted on • Originally published at khaledgarbaya.net on

An introduction to start using Eleventy

Update: I released a Course on 11ty and the jamstack. You can get it now by clicking here.

Eleventy, or 11ty, is a powerful yet straightforward static site generator. It does not require any config to get started. This what it will take you to get an 11ty project running:

npm install -g @11ty/eleventy
echo '# Page header' > README.md 
eleventy
Enter fullscreen mode Exit fullscreen mode

Bootstrap an eleventy project

We'll start from an empty directory, initialize it as an npm package by calling npm init -y. Install @11ty/eleventy, npm i -D @11ty/eleventy, package and create the website entry point. Eleventy can compile multiple file formats, HTML, markdown, liquid, and njk.

Eleventy Layouts

Eleventy Layouts are special templates that you can use to wrap other content. For more information, check the layouts docs.

Layouts will live in an _includes folder at the root of your project. For example, if you want to share a standard structure through all your blog posts page first, you need to create a file inside the _includes folder and give it a name; let's call it mylayout.njk.

Add the wrapping HTML code.

--------
title: My Website
--------
<!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>
    <!-- any page content that uses this layout goes here--> 
    {{ content | safe}}
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

To use a layout, you need to specify the frontmatter layout property inside the desired file. In this case, it will post.md at the root level of the project.

--------
layout: mainlayout.njk
title: My First Post
tags: post
--------

## My First Post
Enter fullscreen mode Exit fullscreen mode

Layouts in eleventy can use other layouts. You can also use a different template engine across layouts. This feature is convenient if we want to wrap some pages with extra markup but not all the pages.

Create pages from data in Eleventy

Eleventy supports a few data sources, JSON, and js files. Let's take the example of creating pages from a list of pokemon in a JSON file.

First, create a _data folder at the root of your project, then create a pokemons.json file inside the newly created folder.

[
  {
    "name": "Pikachu",
    "power": "Static"
  },
  {
    "name": "Charizard",
    "power": "fire"
  }
]
Enter fullscreen mode Exit fullscreen mode

Now create a file pokemon-page.njk at the root of your project. To make use of the data, you can use the frontmatter property pagination. Pagination has some sub-props:

  • data this can the name of the file inside the _data directory; in your case, it should be pokemons
  • size where you can specify the size of the page it is usually 1
  • alias, which will be the name of a current item in the list.

Every page will need a unique slug to construct the final URL. You can achieve that by using the permalink property. You can use the pokemon.name and pass it through the slug eleventy filter.

--------
pagination:
  data: pokemons
  size: 1
  alias: pokemon
permalink: "pokemons/{{ pokemon.name | slug}}/"
tags: pokemonPage
title: {{ pokemon.name }}
--------
<p> Name: {{ pokemon.name }} </p>
<p> Power: {{ pokemon.power }} </p>
Enter fullscreen mode Exit fullscreen mode

Where to go from here

Top comments (0)

Read next

amenibensaada profile image

Client-Side Rendering and SPAs in Web Development🌐

Ameni Ben Saada -

kubeha_18 profile image

Creating a Culture of Continuous Improvement in Support Teams

kubeha -

muhammed_zaid_afreed profile image

Mastering Authorization in Umbraco 14/15: Real-World Management API Challenges and Solutions

Afreed -

alaminkarno profile image

How Prepared for an Optimizely Interview: A Journey from Nervous to Confident

Md. Al-Amin -