Getting Started with Eleventy

#eleventy #staticsites #11ty #jamstack

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 the 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.

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 to pick a template to work with and you can choose one or use altogether 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 its own leading to the 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

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 its awesomeness

Now we see an actual difference in the output with the file processed into an HTML file within the __site/_ folder.

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.