Static Site Generators

Introducing Eleventy

screenshot of

Built with JavaScript

... but not a JavaScript framework

Betting on JavaScript

Simple & Flexible

Only outputs what you ask


Eleventy doesn't care...

Eleventy doesn't care...

what you're building

Eleventy doesn't care...

what other tools you're using

screenshot of


screenshot of

Eleventy doesn't care...

about your folder structure

Eleventy doesn't care...

where your data is from

screenshot of
const Cache = require('@11ty/eleventy-cache-assets');

module.exports = {
async newsletter() {
try {
const items = await Cache('', {
duration: '1w',
type: 'json',
return => {
return {
url: edition.url,
title: `source/target ${edition.title}`,
isNewsletter: true,
} catch (ex) {
return [];
eleventyConfig.addCollection('recently', async (collection) => {
const allContent = collection.getFilteredByGlob(`./src/content/**/*.md`);
const newsletterEditions = await newsletter();

return [...allContent, ...newsletterEditions]
.slice(0, 6);

Eleventy doesn't care...

which template language you use

screenshot of
<!DOCTYPE html>
<html lang="en">
{% include "meta-info.njk" %}

<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml"/>

<link rel="stylesheet" href="{{ '/css/fonts.css' | url }}">
<link rel="stylesheet" href="{{ '/css/style.css' | url }}">

{% svgsprite %}
{% include "nav.njk" %}
{{ content | latex | safe }}
<p>&emsp;{{ meta.authorName }} <a href="/meta" class="meta">meta</a> </p>

Universal Shortcodes

 {% screenshot "" %} 
screenshot of


screenshot of


Inclusive Language

screenshot of


"It’s very important that we take responsibility for the code we publish and deliver and strive to correct accessibility issues with the same veracity as a full service outage."

Syntax Highlighting

Why no JS?

Hand-crafted but not by hand

But now: this website is my own little corner of the internet, where I know how everything works, and I know all of its little idiosyncrasies.

Everything that I love about it is my fault.

Everything that I hate about it is my fault.

Brian Lovin - The shape of software

Thank you!


⁂ @cjlmiles