Eleventy is a simpler static site generator.

FOSDEM 2021

by André Jaenisch on 6th February 2021

jaenis.ch/hobbies/speaking/fosdem2021-javascript-eleventy/

Eleventy is a simpler static site generator. by André Jaenisch is licensed under Creative Commons Attribution 4.0 International Attribution 4.0 International

Welcome. This is my first time I'm talking at FOSDEM. You can follow along with the slides via the link.

By the time this airs, I hope to be able to provide subtitles for download. The content will be close to speaker notes you can find behind the link.

My name is André Jaenisch. I'm currently working as Software engineer at Jambit. It's a medium-sized software provider from Germany. This talk has no relationship with my work. Instead, it's a topic I'm highly interested in.

Since this reveal.js presentation is pre-recorded using OBS Studio, please ask your questions at the end. I would welcome if you would allow me to add your comments to the presentation slides afterwards. Please tell me if you want to opt-in.

Unless otherwise noted, the content is made available under the Creative Commons Attribution 4.0 International license.

What does Eleventy mean?

When Mr. Biblo Baggings celebrated his eleventy-first birthday with a party of special magnificience, it was the talk of the Shire.

Why a possum?

What is a Static Site Generator?

Think of a static site generator as a script which takes in data, content and templates, processes them, and outputs a folder full of all the resultant pages and assets.

— Phil Hawksworth at Netlify

What makes Eleventy special?

Flexibility

Betting on JavaScript

Not a JavaScript framework

Introduction blog post

Flexibility

Mix and match template engines.

Define input and output.

Or use it as one-off script.

Betting on JavaScript

Chart showing NPM modules outrunning different others

Source: Modulecounts

Not a JavaScript framework

Where is it used?

Leaderboard

What do people say about it?

Eleventy is almost fascinatingly simple.

– Chris Coyier

Eleventy is a killer static site generator. That’s all.

– Sara Soueidan

Jekyll is dead to me

– Andy Bell

Eleventy supporters

Join 250+ supporters on Open Collective

What can you build with it?

Blogs

Conference pages

Conference events

Leveraging 11ty in Healthcare by Dr. Dan Fascia [Jamstack Toronto]

Why is it so popular?

Easy to get started!

npx eleventy

Full power of NPM ecosystem

Plugins (filter, shortcodes, transforms)

Authoring in Markdown (mainly)

Support for different template languages

HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug

Collections

There is a default collection built from tags. But you also have different ways to define your own.

Data Directory files!

You can pull in async data using this feature

Pagination

Can be used to create pages from data

Let's shortly recap, what makes Eleventy special.

It's easy to get started. You have the NPM behind you.

Plugins fall into three categories. Filters take some content and transform it into something else to be used in-place. Shortcodes can be thought of as macros. So a placeholder for a larger code snippet. Transforms operate on a whole file.

You can write your content in Markdown. Or plain HTML. (One of the pillars of Static Site Generators!)

Next to the default collection generated from tags you can use a file glob. Or filter an existing collection.

The async data used for directory files can be on disk. I'm curating an events list for example. Or you can fetch it over the wire. I'm pulling my tweets onto my website this way.

Community activity

Exchange of ideas

on Twitter or GitHub or Discord

Voting for issues

Voting for issues to determine implementation order

Lodash-style issue management might be a cure

Basically close most issues and use a GitHub issue filter.

Blogging

Turn Jekyll up to Eleventy by Paul Lloyd

Cloudinary Fetch with Eleventy (Respecting Local Development) by Chris Coyier

Give your Eleventy Site Superpowers with Environment Variables by Andy Bell

Architecting data in Eleventy by Sia Karamalegos

Rich Link Previews in Eleventy by Jens-Fabian Goetzmann

Developing plugins

Random collection of user provided plugins

Providing starter repos

Picture credits

Screenshot of Eleventy logo - MIT licensed

Avatar of Zach Leatherman - MIT licensed

Picture of Bilbo's birthday party taken from J.R.R. Tolkien's The Lord of the Rings Vol. I

Flickr: short tailed opossum by Mark Dumont ( CC BY-NC )

Flickr: possum by Tires 8 ( CC BY-NC )

Flickr: Opossum by Florida Fish and Wildlife ( CC BY-ND )

Picture credits (continued)

Flickr: Opossum by Dandelion Salad ( CC BY-NC-ND )

Flickr: opossum by Alexander Plushev ( CC BY )

Flickr: possum with babies crossing street - Lynchburg, Virginia by Kipp Teague ( CC BY-NC-ND )

Flickr: knit opossum by normanack ( CC BY )

Flickr: baby opossums by Kathy ( CC BY )

Questions?

Thanks for listening!

Eleventy is a simpler static site generator.

What does Eleventy mean?

What is a Static Site Generator?

What makes Eleventy special?

Flexibility

Betting on JavaScript

Not a JavaScript framework

Where is it used?

What do people say about it?

What can you build with it?

Why is it so popular?

Community activity

Exchange of ideas

Voting for issues

Blogging

Developing plugins

Providing starter repos

Curating examples

Talks

Training course

Donating

Picture credits

Picture credits (continued)

Questions?