Intros to Eleventy and This Guide
Intro to Eleventy
Eleventy is what is known as a Static Site Generator. It can use various files to assemble finished web pages utilizing templates, data, markdown, etc. You then post these pages to your web hosting.
Eleventy can use various template languages:
- HTML *.html
- Markdown *.md
- JavaScript *.11ty.js
- Liquid *.liquid
- Nunjucks *.njk
- Mustache *.mustache
- EJS *.ejs
- Haml *.haml
- Pug *.pug
- JavaScript Template Literals *.jstl
Eleventy will cycle through all the source files in a project that it's configured to, gathering up data from markdown, YAML front matter, JSON, or JavaScript, and making it available to the appropriate templates, all automatically. Eleventy then generates the resulting folders with their respective *.html files into a target output folder, to provide a flat, static website that requires no server-side processing.
Intro to This Guide
This guide is meant to provide some step by step instructions for using Eleventy, and provide additional reference information. It is not itself meant to be reference, though it might work as one to some extent. It does not build a project, but goes through steps to demonstrate various features. It is not meant to cover all options in all template languages, it is recommended that you refer to the official documentation for more details.
It is called a walkthrough because each section presumes the previous sections have been completed.
As noted above, Eleventy can use various template languages, but it defaults to Liquid. This guide will use that syntax until specifically noting a change, such as in the article where all the templates are switched to Nunjucks.
This guide is based on Eleventy version 0.10.0.
For this guide we are using NodeJS and NPM. It's assumed you have some experience in HTML, CSS, and JavaScript (including JSON, NodeJS and NPM). It is not assumed that you are familiar with template languages or other Static Site Generators. What is presented here isn't the only way to use Eleventy; if you want to do things differently, go for it.
Beyond this sentence, the words "simple" and "simply" will not be used, because generally it will be obvious.