Topics


Pages


Content

Byline:

Eleventy is a simpler static site generator

Key links

Uncategorized Links

Tutorials

About

Also known as “11ty”.

From the docs:

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options.

Eleventy works with your project’s existing directory structure.

From GitHub:

A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.

A simpler static site generator. An alternative to Jekyll. Transforms a directory of templates (of varying types) into HTML.

They don’t use Vue in their branding but it appears in their package.json file.

Eleventy works with multiple template languages.

Installation

$ npm install -D @11ty/eleventy

Notes

Quoted include paths

See Quotes include paths in the Liquid section of the docs.

Quoted includes. If dynamicPartials: true is set then looks for _includes/user.*, otherwise looks for exact match of 'user'.

{% include 'user' %}

Non-quoted includes. Looks for _includes/user.*.

{% include user %}

When I was stuck with errors, two things fixed it for me.

Remove quotes.

<head>
    {% include partials/head.html %}
</head>

Or keep quotes and set dynamic partials to be true.

<head>
    {% include 'partials/head.html' %}
</head>
  • .eleventy.js 
      module.exports = function (config) {
    config.setLiquidOptions({
      dynamicPartials: true,
    });

    return {
      dir: {
        input: 'src',
      }
    };
  };