eleventy tutorial

Eleventy (or 11ty) is a simple, yet powerful static site generator built on JavaScript. It allows you to build static websites from templates and content files such as Markdown, HTML, YAML, JSON, etc. Here’s a step-by-step tutorial to get you started with Eleventy:

1. Installation

First, ensure you have Node.js and npm installed on your system. Then, you can install Eleventy globally or locally within your project:

npm install -g @11ty/eleventy

2. Project Setup

Create a new directory for your Eleventy project and navigate into it:

mkdir my-eleventy-project
cd my-eleventy-project

3. Initialize Project

Initialize your project with npm to create a package.json file:

npm init -y

4. Create Source Files

Eleventy supports multiple formats for content files, including Markdown, HTML, YAML, JSON, etc. Create your content files in the source directory. For example, you can create an index.md file:

---
title: My Eleventy Website
---

# Welcome to Eleventy

This is a simple Eleventy tutorial.

5. Create Templates

Create templates for your website. Eleventy uses template engines like Nunjucks, Liquid, Handlebars, etc. Create a layout file, for example, layouts/base.njk:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <header>
        <h1>{{ title }}</h1>
    </header>
    <main>
        {{ content | safe }}
    </main>
</body>
</html>

6. Configure Eleventy

Create a configuration file, typically named .eleventy.js, to configure Eleventy:

module.exports = function(eleventyConfig) {
    eleventyConfig.addPassthroughCopy("assets"); // Copy assets folder to output
    return {
        dir: {
            input: "src", // Input directory
            output: "dist", // Output directory
            includes: "_includes" // Layouts and includes directory
        }
    };
};

7. Build Your Website

Run Eleventy to build your website:

npx eleventy

This command will process your source files, apply templates, and generate the output in the specified output directory (dist in this case).

8. Explore Output

Explore the generated output in the dist directory to see your transformed files.

9. Customize and Extend

You can customize your Eleventy setup by configuring additional options in the .eleventy.js file, adding filters, and using plugins as needed.

10. Automate

You can automate the build process using npm scripts or tools like Gulp or Grunt. Define scripts in your package.json file to run the Eleventy build command.

That’s a basic overview of getting started with Eleventy. From here, you can explore its extensive features, such as collections, pagination, data files, and more, to build powerful static websites.