Intro to Eleventy

Installation

Lazy and/or Fast

npx @11ty/eleventy

Install Globally?

npm i -g @11ty/eleventy

Depends on your opinions about global modules, and how you manage node versions.

¯\_(ツ)_/¯

Safer

npm i --save @11ty/eleventy

{
  "scripts": {
    "build": "eleventy",
    "start": "eleventy --serve"
  }
}

Eleventy Config

module.exports = eleventyConfig => {
  return {
    dir: {}
  };
};

Setting Up Content

Markdown Files

---
title: My Page Title
author: My Name
permalink: /this-page-url/
layout: post
date: 2020-10-19
tags:
  - news
---
Markdown content here.

Collections

Create an array from .md Collections

eleventyConfig.addCollection(
  'nav',
  collection => collection.getAll()
    .filter(item => {})
    .sort((a, b) => {})
  }
);

Collections

{% for link in collections.nav %}
  <li>
    <a href="{{ link.url }}">
      {{ link.title }}
    </a>
  </li>
{% endfor %}

Content from an API

Get an array from an API Data from an API

// _data/posts.js
module.exports = () => {
  return new Promise(() => {
    // Make a request
    // `resolve` the returned data
  });
};

Content from an API

{% for p in posts %}
  <li>
    <a href="{{ p.url }}">
      {{ p.title }}
    </a>
  </li>
{% endfor %}

Content from an API

Turn an array into pages Data to Pages

---
permalink: p.permalink
pagination:
  data: posts
  size: 1
  alias: p
---

Eleventy Defaults

Directories

11ty dir key Folder
input .
output _site
includes _includes
layouts dir.includes
data _data

Permalinks

  • Front matter permalink Permalinks
  • Fallback: filename (minus extension) becomes path
    • contact.md becomes /contact/index.html
    • tags/css.md becomes /tags/css/index.html

Templating

  • Default: Liquid
  • Included alternatives:
    • ejs, hbs, mustache, haml, pug, njk

Templating

Layouts

---
layout: home
---

This page will be rendered with _includes/home.liquid.

  • Or other template extension, e.g. home.njk

Chaining Templates

Reduce repetition Layout Chaining

<!-- index.md -->
---
layout: home
---

<!-- home.liquid -->
---
layout: global
---

Layout Aliases

Custom layout names mapped to files Layout Aliases

eleventyConfig.addLayoutAlias(
  'home',
  'views/homeTemplate.njk'
);

Partials (Components)

{% include header %}

maps to

_includes/header.liquid

Shortcodes

eleventyConfig.addShortcode(
  'link',
  (title, url) => {
    return `<a href="${url}" class="link">${title}</a>`;
  }
);

Shortcodes

## Section

Content including a {% link
"cool hyperlink"
"https://jdsteinbach.com" %}

Asset Pipeline

Asset Options

  • Gulp / Webpack / etc, running alongside Eleventy
  • .11ty.js template files

.11ty.js Template

  • Export a class JS Template Classes
    • data() function returns a data object (front matter)
    • render() function returns file contents

.11ty.js Template

Watching Files Watch Targets

eleventyConfig.addWatchTarget(
  './src/assets/js/**/*.js'
);
eleventyConfig.addWatchTarget(
  './src/assets/scss/**/*.scss'
);

File Passthrough Passthrough Copy

eleventyConfig.addPassthroughCopy(
  'src/fonts'
);
eleventyConfig.addPassthroughCopy({
  'src/assets/site.js': 'js/site.js'
});

Images

  • .addPassthroughCopy() + extra plugin
  • images.11ty.js file running imagemin Imagemin Processing

Deploying

Jamstack Hosts

Building

More Topics

Form Submission

Page Transitions

Resources

Thanks, Y’all!

James Steinbach

Senior UX Developer

jdsteinbach

Twitter | GitHub | Blog