Hi, I'm Gift Egwuenu

I’m passionate about web technologies and constantly learning and improving my skills. I enjoy creating solutions to complex problems.

Getting Started with Eleventy

Due to the ever evolving nature of the web, there’s always a buzzword here and there or new tech popping, leaving us as developers in awe of what to actually learn and get a hang of.

In a previous post I talked about JamStack and how it is one of the best things that happened to the web and also reason why you should try it out. This post is going to introduce you to a static site generator called Eleventy also known as 11ty. We’ll take a look at how to get started with it and also explore its use cases.

11ty

Eleventy is a simpler static site generator. – tag word simpler stating that it is going to be a breeze to work it. Eleventy is quite similar to Jekyll, but instead of Ruby it was written in JavaScript and requires a zero-config setup how interesting can this get? It is still quite a new kid on the block in terms of how long other static sites have been going it was released early 2018

Eleventy is quite flexible to work with. It allows you pick a template to work with and you can choose one or use all together in a project. It supports the following templating languages:

  • HTML
  • Nunjucks
  • EJS
  • Markdown
  • Liquid
  • Handlebars
  • Mustache
  • Haml
  • Pug
  • JavaScript Template Literals (ES2015)

One great deal with 11ty is every template files in your directory is a page on it’s own leading to great structure of codebase.

Prerequisites

This tutorial requires that you have version 8 of Node.js or higher and basic knowledge of JavaScript.

Installation

// you can choose to install globally

  npm install -g @11ty/eleventy

// install locally within the project directory

  npm install --save-dev @11ty/eleventy

Running the app

// initialize a new project and navigate to the directory

mkdir eleventy-site
cd eleventy-site

// run to start the app
eleventy

img

After running the _eleventy_ command we get the above report because we currently don’t have any files for it to process. Let’s add more content to our site.

  // create a README.md file and run the app

  ### Eleventy Site tutorial

  > I'm just testing out it's awesomeness

Now we see an actual difference in the output with the file processed into an html file within the ___site/__ folder.

img

One of the benefits of using Static sites is really for efficiency and performance. Take note of how fast the file was processed in the output above.

Layout

Layouts are templates that can be used to wrap other content. In order to denote that a content should be wrapped within a template, we simply add the layout key to the front matter.

<-- layout.md-->

---
layout: layout.njk
title: New Blog Post
---

# New Blog Post

This content will be passed into the layout file as specified above

<-- _includes/layout.njk -->

<!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>

The output for this template will now be populated with the data from the content file like so.

<-- _site/layout/index.html -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Blog Post</title>
  </head>
  <body>
    <h1>New Blog Post </h1>
  </body>
</html>

Configuration

With Eleventy we can have a custom configuration that fits our need such that you override the default configuration settings by creating a _.eleventy.js_ file. We can leverage this by creating a custom configuration by modifying the default input and output directory like so.

<-- .eleventy.js -->

module.exports = {
  dir: {
      input: "views",
        output: "dist"
    }
};

A lot can be achieved with the custom configuration file. Here’s a list of some configuration options that you can look up and add to the list within the config file.

Consuming Data

Eleventy can use data from different sources on a template. The order in which it populates data from it sources ranges from highest priority to lowest priority. These are the sources according to that range.

Deployment

A number of options are available for deploying 11ty sites. For one I really love using Netlify for the job. But I reckon anyone has the option of choosing to go with other choices for deploying, which works great too.

Wrapping Up

One of the ways in which we can embrace a new tech is by trying it out. This is a quick introduction to 11ty. Quite a number of developers are already building blogs, websites, documentation sites with eleventy and I think you should give it a try.

comments powered by Disqus

Subscribe to my Newsletter

Don't miss out on new articles from me. Get notified when a new article is published.