How to Set Up Eleventy (11ty) Static Site Generator

By Admin · Mar 2, 2026 · Updated Apr 23, 2026 · 26 views · 4 min read

How to Set Up Eleventy (11ty) Static Site Generator

Eleventy (11ty) is a simpler, more flexible static site generator that prides itself on zero-config defaults and a gentle learning curve. Unlike framework-coupled generators, Eleventy works with multiple template languages (Markdown, Nunjucks, Liquid, Handlebars, Pug, and more) and ships zero client-side JavaScript by default, resulting in exceptionally fast websites. This guide covers setting up and deploying an Eleventy site on your Breeze instance.

Why Choose Eleventy

Zero client-side JavaScript — your site is pure HTML/CSS unless you choose to add JS
Template language flexibility — use Markdown, Nunjucks, Liquid, Handlebars, or mix them
Simple data pipeline — pull data from JSON, YAML, APIs, or any JavaScript data source
Incremental builds — only rebuilds changed files for fast iteration
No framework lock-in — output is vanilla HTML with no framework runtime

Prerequisites

A Breeze instance with Ubuntu 22.04 or later
Node.js 18+ installed
A web server (Nginx or Apache) for serving the built site

Step 1 — Install Node.js

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs

Step 2 — Create an Eleventy Project

mkdir my-11ty-site && cd my-11ty-site
npm init -y
npm install @11ty/eleventy --save-dev

Step 3 — Configure Eleventy

Create the configuration file .eleventy.js in the project root:

module.exports = function(eleventyConfig) {
  // Copy static assets
  eleventyConfig.addPassthroughCopy("src/css");
  eleventyConfig.addPassthroughCopy("src/images");

  // Custom date filter for Nunjucks
  eleventyConfig.addFilter("dateFormat", function(date) {
    return new Date(date).toLocaleDateString('en-US', {
      year: 'numeric', month: 'long', day: 'numeric'
    });
  });

  return {
    dir: {
      input: "src",
      output: "_site",
      includes: "_includes",
      data: "_data"
    },
    templateFormats: ["md", "njk", "html"],
    markdownTemplateEngine: "njk"
  };
};

Step 4 — Create Your Site Structure

Set up the source directory structure:

mkdir -p src/{_includes,_data,css,posts}

Create a base layout in src/_includes/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 }} | My Site</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <header><nav><a href="/">Home</a> | <a href="/blog/">Blog</a></nav></header>
    <main>{{ content | safe }}</main>
    <footer><p>Built with Eleventy</p></footer>
</body>
</html>

Create a homepage at src/index.md:

---
layout: base.njk
title: Home
---

# Welcome to My Site

This site is built with Eleventy, a simple and powerful static site generator.

Step 5 — Add Blog Posts

Create blog posts as Markdown files with front matter. Add a directory data file src/posts/posts.json to set defaults for all posts:

{
  "layout": "base.njk",
  "tags": "post"
}

Then create individual posts like src/posts/first-post.md:

---
title: My First Post
date: 2025-01-15
---

This is my first blog post built with Eleventy.

Create a blog listing page at src/blog.njk:

---
layout: base.njk
title: Blog
---
<h1>Blog</h1>
{% for post in collections.post | reverse %}
  <article>
    <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
    <time>{{ post.date | dateFormat }}</time>
  </article>
{% endfor %}

Step 6 — Build and Deploy

Build the site for production:

npx @11ty/eleventy

The output is generated in the _site/ directory. Deploy it to your web server:

sudo rsync -avz --delete _site/ /var/www/my-11ty-site/
sudo chown -R www-data:www-data /var/www/my-11ty-site

Configure Nginx or Apache to serve from /var/www/my-11ty-site/ as the document root.

Development Workflow

Eleventy includes a development server with live reload:

npx @11ty/eleventy --serve --port 8080

Add npm scripts to package.json for convenience:

"scripts": {
  "dev": "eleventy --serve --port 8080",
  "build": "eleventy",
  "deploy": "eleventy && rsync -avz --delete _site/ /var/www/my-11ty-site/"
}

This setup gives you a smooth development-to-production pipeline for your static site on your Breeze instance.

How to Set Up Eleventy (11ty) Static Site Generator