> **New in 2026 — managed Static Hosting**: DeployHQ now offers [Static Hosting](https://www.deployhq.com/hosting/static) — fully-managed deployment to Cloudflare's edge, no server to provision. Eleventy's `_site/` build output drops straight into the Static Hosting subdirectory setting. The walkthrough below covers BYO-server deployment, which remains fully supported.
**Prerequisites:**
- Node.js 18 or later (Node.js 20 LTS recommended)
- A server with SSH or SFTP access
- A DeployHQ account
## What is Eleventy?
Eleventy (11ty) is a simpler, more flexible static site generator built on Node.js. Unlike frameworks that ship heavy JavaScript bundles to the browser, Eleventy generates pure HTML by default — zero client-side JavaScript unless you explicitly add it.
Eleventy supports multiple templating languages (Nunjucks, Liquid, Markdown, JavaScript, WebC) and makes minimal assumptions about your project structure. It's the "bring your own everything" SSG — no mandatory directory conventions, no required config file, no framework lock-in.
Eleventy is particularly popular for blogs, documentation sites, and content-heavy websites where performance and simplicity matter.
## Step 1: Install Eleventy
Create a new project:
```bash
mkdir my-site && cd my-site
npm init -y
npm install @11ty/eleventy
```
Or add to an existing project:
```bash
npm install @11ty/eleventy
```
Verify:
```bash
npx @11ty/eleventy --version
```
## Step 2: Project Structure
Eleventy is flexible about structure. A typical project:
```
my-site/
├── src/ # Input directory
│ ├── _includes/ # Layouts and partials
│ │ ├── base.njk # Base layout
│ │ └── post.njk # Post layout
│ ├── _data/ # Global data files
│ │ └── site.json # Site metadata
│ ├── posts/ # Blog posts (Markdown)
│ │ ├── posts.json # Directory data (applies to all posts)
│ │ ├── first-post.md
│ │ └── second-post.md
│ ├── css/ # Styles (passed through)
│ │ └── style.css
│ ├── index.njk # Home page
│ └── about.md # About page
├── _site/ # Output directory (generated)
├── eleventy.config.js # Configuration
├── package.json
└── package-lock.json
```
### Key Directories
- **src/** — Input directory containing templates, content, and assets
- **_includes/** — Layouts and reusable template partials. Referenced by name in front matter.
- **_data/** — Global data files (JSON, JS, YAML). Available in all templates as `site.propertyName`.
- **_site/** — Generated output. This is what gets deployed.
## Step 3: Configuration
Create `eleventy.config.js` (or `.eleventy.js`):
```javascript
module.exports = function(eleventyConfig) {
// Pass through static files
eleventyConfig.addPassthroughCopy("src/css");
eleventyConfig.addPassthroughCopy("src/images");
eleventyConfig.addPassthroughCopy("src/fonts");
// Custom collections
eleventyConfig.addCollection("posts", function(collectionApi) {
return collectionApi.getFilteredByGlob("src/posts/**/*.md")
.sort((a, b) => b.date - a.date);
});
// Custom filters
eleventyConfig.addFilter("dateFormat", function(date) {
return new Date(date).toLocaleDateString("en-GB", {
year: "numeric", month: "long", day: "numeric"
});
});
return {
dir: {
input: "src",
output: "_site",
includes: "_includes",
data: "_data"
},
templateFormats: ["md", "njk", "html"],
markdownTemplateEngine: "njk",
htmlTemplateEngine: "njk"
};
};
```
## Step 4: Templating
Eleventy supports multiple template engines. Nunjucks is the most popular:
**Base layout (`src/_includes/base.njk`):**
```html
{{ title }} | {{ site.name }}
{{ content | safe }}
```
**Blog post (`src/posts/first-post.md`):**
```markdown
---
title: My First Post
date: 2026-03-07
layout: post.njk
tags: posts
description: A description for SEO
---
This is my first blog post built with Eleventy.
```
## Step 5: Core Features
### Data Cascade
Eleventy merges data from multiple sources (highest priority first):
1. Front matter in the template
2. Template-specific data files (`post.11tydata.js`)
3. Directory data files (`posts.json`)
4. Global data files (`_data/site.json`)
5. Computed data
### Collections
Group content using tags or custom collection logic:
```markdown
---
tags: posts
---
```
Access in templates:
```html
{% for post in collections.posts %}