First Published 02/12/2019

Contents

What is Eleventy?

Eleventy is a static site generator designed to be a Javascript alternative to Jekyll - it works with multiple languages and ships with it's own server for local development.

Installing Eleventy

Eleventy can be downloaded via the command line. Create a new project directory mkdir [project_name] and cd into it. Once in there install eleventy - npm install -g @11ty/eleventy.

Eleventy is now installed in this directory and can be tested by creating a test.md file and then running the command eleventy. You'll know eleventy is working as it'll show you this: Writing _site/temp/index.html from ./temp.md.

Basic Structure

Eleventy uses a pretty basic file structure and all files, unless indicated otherwise, in the root will be compiled in to the _site directory.

Site directory

This directory is served to the web and is essentially your live site. It holds the compiled pages along with and css and media files you may have.

Includes directory

Template files are stored here - I typically have the meta, nav, header, footer and any layout files in here.

Pages

Usually I create any of the major pages as in html, using the templating to pull in any global modules. For example, in the boilerplate I have the index.html file and a blog.html file - each of these pulls in the meta, nav and footer includes via their page template, we'll cover more on this in the next section.

Subpages, such as blog posts, should be held in a directory created in the root of the site. This directory should not have an underscore before it.

eleventyignore

Use this file to let eleventy know which files you do not want to compile - a README.md file for example.

Templating