Link Search Menu Expand Document

Quickstart

npm install -g @11ty/eleventy

eleventy --serve

CLI

npx eleventy --input=README.md --formats=md

Jekyll

Create Configuration

module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: "./",      // Equivalent to Jekyll's source property
      output: "./_site" // Equivalent to Jekyll's destination property
    }
  };
};
  • Whereas Jekyll allows you to list folders and files to ignore under its exclude property, Eleventy looks for these values inside a file called .eleventyignore (in addition to .gitignore).
  • By default, Eleventy uses markdown-it to parse Markdown. If your content uses advanced syntax features (such as abbreviations, definition lists and footnotes), you’ll need to pass Eleventy an instance of this (or another) Markdown library configured with the relevant options and plugins.

Layouts

  • must reside within the _includes directory (

Variables

Site variables

  • add our site-wide values to a JSON file inside a folder called _data and name this file site.json, we can keep the site.* namespace and leave our variables unchanged.
{
  "title": "Markdown Guide",
  "url": "https://www.markdownguide.org",
  "baseurl": "",
  "repo": "http://github.com/mattcone/markdown-guide",
  "comments": false,
  "author": {
    "name": "Matt Cone"
  },
  "og_locale": "en_US"
}

Page variables

The table below shows a mapping of common page variables. As a rule, frontmatter properties are accessed directly, whereas derived metadata values (things like URLs, dates etc.) get prefixed with the page.* namespace:

page.url	page.url
page.date	page.date
page.path	page.inputPath
page.id	page.outputPath
page.name	page.fileSlug
page.content	content
page.title	title
page.foobar	foobar

When iterating through pages, frontmatter values are available via the data object while content is available via templateContent:


Jekyll	Eleventy
item.url	item.url
item.date	item.date
item.path	item.inputPath
item.name	item.fileSlug
item.id	item.outputPath
item.content	item.templateContent
item.title	item.data.title
item.foobar	item.data.foobar

Includes

If you’re not passing variables to your includes, everything should work without modification. Otherwise, note that whereas with Jekyll you would do this:

Other

Using directory data to manage defaults

Assets

  • no support for asset compilation or bundling scripts

Copyright © 2020 Thence LLC