# Eleventy

# Installation

Create directory eleventy-site.

mkdir eleventy-site
cd eleventy-site

Create package.json with npm init using default parameters -y and install eleventy locally.

npm init -y
npm install --save-dev @11ty/eleventy

Run local version of eleventy to check if eleventy is installed.

npx @11ty/eleventy

# Creating pages

Create a samples markdown file

echo '# Page header' > sample.md

Run npx @11ty/eleventy to compile the files into output folder (defaults to _site)

npx @11ty/eleventy --serve

sample.md should served through http://localhost:8080/sample. Automatically refresh root file changes.

# Add layout

Add an eleventy layout in liquid template in file _includes/layout.liquid:

<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>My Blog</title>
        </head>
        <body>
            <h1></h1>

            
        </body>
</html>

With Shopify Liquid template, the double curly braces are output variables .

In sample.md, add YAML FRONT Matter section between --- marks.

---
layout: layout.liquid
pageTitle: Here is the Title
---
# This is header

This is text

This tells Eleventy to use layout.liquid template in _includes/ folder, add pageTitle into front matter to be used in layout.

# Folder/Directory Data

Create folder pages in the root directory. Add pages/pages.json;

{
    "layout": "layout.liquid"
}

This .json data file will apply YAML Front Matter to all files in the folder. This work for any .json file name that matches parent folder name. For more details, Template and Directory Data Files.

Make a new page file, pages/page-1.md

---
pageTitle: This is first page
---
This is some text

The layout.liquid should be automatically applied to the file http://localhost:8080/pages/page-1/.

# Collections

We can create a collection by adding tags array to the pages/pages.json data file:

{
    "layout": "layout.liquid"
    "tags": ["pages"]
}

Whenever tags are used, Eleventy will make new collection with the same tags. Now all /pages file will be avaiable under collections.pages. For more details, Eleventy Collections

Display all /pages files in the index.html:

    ---
    layout: layout.liquid
    pageTitle: Showing all pages
    ---
    {% for page in collections.pages %}
        <h2><a href="{{ page.url }}">{{ page.data.pageTitle }}</a></h2>
        <em>{{ page.date | date: "%Y-%m-%d" }}</em>
    {% endfor %}