Important Links

Official Site

Contrite setup

  1. Make dir, setup npm, install 11ty
mkdir /tmp/test
cd /tmp/test
npm init -y
npm install --save-dev @11ty/eleventy
  1. Create some content, and serve
echo "# This is index" > index.md
npx @11ty/eleventy --serve
  1. PROFIT!

NOTE: Add npm start script as so: "start": "npx @11ty/eleventy --serve"

Working setup


The main "content" of any cms


Layouts are "templates" that give structure to the "content"

To create a "home" layout:

// _includes/home.js

exports.data = {};

exports.render = (data) => `<html> ${data.page.content} </html>`;

then include it in content file home.md:

layout: home

# This is a home page

NOTE: To have home layout use a default layout, just add it in the exports.data section.


Collections are used to group related content

To create a collection x, use yaml array in front-matter:

tags: x

To access collection x:

exports.render = (d) => `${data.collections.x.map((p) => p.url).join("\n")}`;

NOTE: The word "tags" is a reserved keyword.


Output multiple HTML files from a single template.

To create a paginated list of x collection, add following front-matter to List.md:

  data: collections.x
  size: 1
  alias: posts



Data Files

json, js, yaml, toml et al

To create a data of say, some planets, we would add following in _data/planets.json:

  { "name": "Mercury" },
  { "name": "Venus" },
  { "name": "Earth" },
  { "name": "Mars" },
  { "name": "Saturn" }

And the data is used by adding a "data" key in front-matter. Here we create a page for each planet using pagination:

  data: planets
  size: 1
  alias: planet
permalink: "planets/undefined/"

# This is a page for 

NOTE: json, js are built-in. yaml & toml require external packages


Discount renders

To add a shortcode that takes first & last name and returns a div card:

// .eleventy.js

module.exports = function (config) {
  config.addShortcode("user", (f, l) => `<div class="card"> ${f} ${l} </div>`);

To use above shortcode in say, user.js:

module.render = ({ first, last }) => `${this.user(first, last)}`;