Getting Started — Eleventy
Skip to navigation
Skip to main content
Build Awesome
Font Awesome
Web Awesome
Podcast Awesome
Blog Awesome
11ty
Get Started
Blog
Community
v3.1.6
Versions
v4 Pre-release
v3 Stable
v2
v1
v0
History
Firehose
Search
Search
GitHub
YouTube
Mastodon
Bluesky
Discord
Blog
Back Build Awesome Pro and make it easier to build for the web!
Versions
Stable
3.1.6
Canary
4.0.0-alpha.10
Introduction
Get Started
Why Eleventy?
Performance
Learn
Glossary
Opening a Terminal
Installing JavaScript
CommonJS, ESM, TypeScript
Starter Projects
Tutorials
Quick Tips
Community
How can I contribute?
Code of Conduct
Blog
Firehose
11ty Bundle
Leaderboards
Eleventy Meetup
11ty Conference
GuideGuide
Get Started
Command Line Usage
Add a Configuration File
Copy Files to Output
Add CSS, JS, Fonts
Importing Content
Configure Templates with Data
Permalinks
Layouts
Collections
Collections API
Content Dates
Create Pages From Data
Pagination
Pagination Navigation
Using Data in Templates
Eleventy Supplied Data
Data Cascade
Front Matter Data
Custom Front Matter
Template & Directory Data Files
Global Data Files
Config Global Data
Computed Data
JavaScript Data Files
Custom Data File Formats
Validate Data
Template Languages
HTML
Markdown
MDX
JavaScript
JSX
TypeScript
Custom
WebC
Nunjucks
Liquid
Handlebars
Mustache
EJS
HAML
Pug
Sass
Virtual Templates
Overriding Languages
Template Features
Ignore Files
Preprocess Content
Postprocess Content
Filters
url
slugify
log
get*CollectionItem
inputPathToUrl
Shortcodes
getBundle
getBundleFileUrl
Environment Variables
Internationalization (i18n)
Watch Files and Dev Servers
Eleventy Dev Server
Vite
Common Pitfalls
Advanced
Release History
Programmatic API
Configuration Events
Order of Operations
PluginsPlugins
Create or use Plugins
Image
Fetch
<is-land>
Render
Internationalization (i18n)
Upgrade Helper
RSS
Syntax Highlighting
InputPath to URL
Navigation
HTML <base>
Bundle
Id Attribute
Community Plugins
Retired Plugins
ServicesServices
Deployment & Hosting
Using a CMS
Runtime APIs
Screenshots
OpenGraph Image
IndieWeb Avatar
Generator Image
Hosting Image
Sparklines
Breadcrumbs:
Eleventy Documentation
Guide
Get Started
20k Star Eleventy on GitHub! This is an easy way to support our underrated project and help boost our rank on both GitHub and jamstack.org’s list of site generators.
Eleventy v3.1.6 requires a JavaScript runtime, typically Node.js (version
18 or higher).
You can check whether or not you have Node.js installed by running node --version in a terminal application. (Well, wait—what is a Terminal?) If the command is not found or it reports a number lower than
18, you will need to download and install Node.js before moving on to the next step. Learn why it’s encouraged to use even numbered releases of Node.js.
Prefer to watch videos instead? Check out 6 minutes to Build a Blog from Scratch.
Step 1 Make a Project Directory
Create a directory for your project using the mkdir command (short for make directory):
mkdir eleventy-sample
Now move into that directory with the cd command (short for change directory):
cd eleventy-sample
Step 2 Install Eleventy
Create a package.json
Installing Eleventy into a project requires a package.json file.
npm
pnpm
Yarn
npm init -y
The npm command (included with Node.js) will create a package.json file for you with npm init -y. The -y flag tells npm to use default values and skips the questionnaire.
Use the following command if you want to use ESM in your project and not CommonJS.
npm pkg set type="module"
pnpm init
Learn more about pnpm (it requires separate installation).
yarn init
Learn more about yarn (it requires separate installation).
Install Eleventy
@11ty/eleventy is published on npm and we can install and save it into our project’s package.json by running:
npm
pnpm
Yarn
npm install @11ty/eleventy
pnpm install @11ty/eleventy
yarn add @11ty/eleventy
You may also install Eleventy globally but the package.json installation method above is recommended.
Step 3 Run Eleventy
npm
pnpm
Yarn
npx @11ty/eleventy
We can use the npx command (also provided by Node.js) to run our local project's version of Eleventy.
pnpm exec eleventy
yarn exec eleventy
Here’s what your command line should look like after you run Eleventy:
[11ty] Wrote 0 files in 0.03 seconds (v3.1.6)
If you see (v3.1.6) in your output you know you’re using the newest version. However, Eleventy didn’t process any files! This is expected—we have an empty folder with no templates inside.
Step 4 Create some templates
A template is a content file written in a format such as Markdown, HTML, Liquid, Nunjucks, and more, which Eleventy transforms into a page (or pages) when building our site.
Let’s run two commands to create two new template files.
macOS
Linux
Windows
Cross Platform
echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html
echo '# Heading' > README.md
echo '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'
If the out-file command is not available in your Windows Terminal window (it’s PowerShell specific), use the Cross Platform method instead.
echo '<!doctype html><title>Page title</title><p>Hi</p>' | npx @11ty/create index.html
echo '# Heading' | npx @11ty/create README.md
Learn more about @11ty/create (requires Node.js 18 or newer).
Alternatively, you can create these using any text editor — make sure you save them into your project folder and they have the correct file extensions.
After you’ve created an HTML template and a Markdown template, let’s run Eleventy again with the following command:
npm
pnpm
Yarn
npx @11ty/eleventy
pnpm exec eleventy
yarn exec eleventy
The output might look like this:
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v3.1.6)
We’ve now compiled our two content templates in the current directory into the output folder (_site is the default).
If you’d like to experiment further with template file syntax, edit the following sample README.md file in your browser. Front Matter, Liquid and Markdown syntax are in use.
---
title: Heading
---
# {{ title }}
Step 5 Gaze upon your templates
Use --serve to start up a hot-reloading local web server.
npm
pnpm
Yarn
npx @11ty/eleventy --serve
pnpm exec eleventy --serve
yarn exec eleventy -- --serve
Your command line might look something like:
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v3.1.6)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
Open http://localhost:8080/ or http://localhost:8080/README/ in your favorite web browser to see your Eleventy site live! When you save your template files—Eleventy will refresh the browser with your new changes automatically!
Step 6 Put it online (optional)
Your output folder (_site) now contains all of the statically built files for your new web site. You can upload this folder to any web host! Head over to our deployment documentation to read more about putting your Eleventy project online for everyone to see.
Step 7 Continue Learning…
Congratulations—you made something with Eleventy! Now put it to work:
Add more content! In the above tutorial we used HTML and Markdown. Why not JavaScript or WebC (for components) next? Nunjucks and Liquid are also very popular. Maybe you’re feeling super adventurous and want to add your own custom type?.
Use a layout file so that you don’t have to repeat boilerplate on every template.
Add a configuration file to unlock advanced Eleventy capabilities!
Add CSS, JavaScript, or Web Fonts to your project.
It’s super easy to add automated Image optimization too!
Learn more of the command line options for Eleventy.
Perhaps you’d like to consume data from third party APIs in your project?
Tutorials and Starter Projects
For folks wanting to build a blog, you can learn how to start from scratch (learn how it works) or use our official Blog starter project (get up and running faster):
6 Minutes to Build a Blog from Scratch with Eleventy
(2023)
⏱ 6m
eleventy-base-blog (Official Starter Project)
Build your own Blog from Scratch using Eleventy
(2018)
You can also use one of the many Starter Projects or read some of our excellent Community-contributed Tutorials (a curated few of which are included below):
Build an 11ty Site in 3 Minutes
(2021)
⏱ 3m
Let’s Learn Eleventy! on Learn with Jason
(2020)
⏱ 1h32m
Templating: Eleventy’s Superpower
(2021)
⏱ 15m
Learn Eleventy from Scratch
(2020)
Beginner’s Guide to Eleventy
(2020)
Itsiest, Bitsiest Eleventy Tutorial
(2021)
Turn static HTML/CSS into a blog with CMS using the JAMStack
(2021)
⏱ 1h23m
More From the Community
×108 resources via 11tybundle.dev curated by Bob Monsour.
Building a Modern Blog with Eleventy 3.x (Liquid Edition) — Richard Djarbeng (2026)
Eleventy in a Box. A premium Eleventy start kit — Andy Clarke (2026)
Create A Static Site Using 11ty & Deploy to Neocities (2026 Refresh) — fLaMEd (2026)
My new Learn Eleventy course — uncenter (2026)
Deploying Your Own IndieWeb Site with Indiekit + Eleventy (Docker Compose based) — Ricardo Mendes (2026)
Expand to see 103 more resources.
Eleventy Tricks — Anton Staroverov (2026)
Three Minor Releases, One Major Leap for Subspace Builder — Nicholas Clooney (2025)
Introducing Brewventy: Your Coffee-Themed Eleventy Starter Kit — Kyle Reddoch (2025)
11ty Subspace Builder v1.0.0 — Nicholas Clooney (2025)
From Start to Finish: Moving My Blog to Eleventy + GitHub Pages — Kyle Reddoch (2025)
How I Built This Website (With 11ty & CraftCMS) — Matthew Richards (2025)
Updates to the Eleventy guide — Renkon (2025)
The modern web sucks. My band's website doesn't. — Veronica Explains (2025)
Journal Eleventy, présentation et mini-tutoriel — Joris R (2025)
Creating a Journal With Eleventy — Austin Carr (2025)
Moving to Eleventy — Sarah Reichelt (2025)
Embracing Tufte’s Design Principles in My New 11ty Starter — Adam DJ Brett (2025)
My (Neo)Brutalism 11ty Web Design Experiments — Adam DJ Brett (2025)
Introducing the "Chobble Template" — Stefan Burke (2025)
My Tiny Eleventy (11ty) Sites — Adam DJ Brett (2025)
Building with an 11ty starter sites and headless WordPress — David Waumsley (2025)
Set Up a Simple and Reliable Static Site Generator Using 11ty (Eleventy) + Tailwind CSS — Abdullah Yahya (2025)
Getting Started with 11ty, Minimalist, and Calavera — Schalk Neethling (2025)
Long-term WordPress user tries building with 11ty — David Waumsley (2025)
Let's Build a Blog Like it's 1990 - Part 2 — Raymond Camden (2024)
Eleventy Introduction — Jérôme Coupé (2024)
Build static website with 11ty. Part 2 — ProDeveloper (2024)
How to build static website with 11ty — ProDeveloper (2024)
Let's Build a Blog Like it's 1990 - Part 1 — Raymond Camden (2024)
Building a Blog with Eleventy — Sebin Nyshkim (2024)
How I teach Eleventy from scratch — Juha-Matti Santala (2024)
An alarmingly concise and very hinged summary of what it was like to build this site from scratch — Keenan (2024)
THE SMORGASBORD OF WINDOWS TERMINAL… WINDOWS — Zach Leatherman (2024)
Eleventy Excellent 3.0 — Lene Saile (2024)
Getting started with Eleventy — Sean McPherson (2024)
Curso Eleventy (Spanish video) — Jon Mircha (2024)
Eleventy adoption guide: Overview, examples, and alternatives — Nelson Michael (2024)
Better 11ty Development with Tooling — Paul Everitt (2024)
index.md is a valid Eleventy project — Juha-Matti Santala (2024)
Eleventy Tutorial - Create an 11ty Static Site — Danial Zahid (2024)
The "IndieWeb" feels like coming home — Nathaniel Daught (2024)
My Eleventy site setup — anh (2024)
CSS { In Real Life } | Eleventy Starter Project Updates — Michelle Barker (2024)
Top 11 free Eleventy themes for 2024 — Jaimie McMahon (2024)
Mastering Eleventy Folder Structures: From Default Setups to Real-World Best Practices — S. Amir Mohammad Najafi (2024)
From Figma to Browser with Eleventy (Part 3) — thoughtbot (2024)
Introduction to Eleventy, a Modern Static Website Generator — David Eastman (2024)
Eleventy Resume Builder — Gurpreet Singh (2024)
Eleventy vs. Next.js for static site generation — Nelson Michael (2023)
Implementing a Figma design in Eleventy (Part 2) — thoughtbot (2023)
Migrating to Eleventy — Renkon (2023)
From Figma to Browser with Eleventy (Part 1) — thoughtbot (2023)
My Neocities workflow: using Eleventy and the CLI to speed up development — Whiona (2023)
Build your own 11ty starter — Simon Cox (2023)
Build a Blog with Eleventy (11ty) and Webiny Headless CMS — Maurice King (2023)
Bookshop 11ty Guide — CloudCannon (2023)
Blog Using Eleventy — equilibriumuk (2023)
Eleventy by Example, by Bryan Robinson — Raymond Camden (2023)
Eleventy (11ty), Vite, Tailwind, and Alpine.js – Rapid static site starter framework — Full Stack Digital (2023)
Book Release: Eleventy by Example – Learn 11ty with 5 in-depth projects — Bryan Robinson (2023)
How To Craft a Stylish Static Website with Eleventy (11ty) — Joel Olawanle (2023)
A Complete Guide to Building a Blog with Eleventy — Raymond Camden (2023)
Eleventy - Build a Static Site with Backend Data Handling - YouTube — Azul Coding (2023)
Update to My Eleventy Blog Guide — Raymond Camden (2023)
Getting started with eleventy — Leonardo Silveira (2023)
A Beginner's Guide to Eleventy - part two — Jakub Iwanowski (2023)
A Beginner's Guide to Eleventy - part one — Jakub Iwanowski (2023)
23 of the best Eleventy Themes (Starters) for 2023 — David Large (2023)
An Introductory Guide to Eleventy — Don Hamilton (2023)
11 Top Eleventy Blog Themes (Starters) in 2023 — David Large (2022)
New Eleventy features, a new theme, and full Eleventy support — David Large (2022)
Eleventy Starter Template Series — Dustin Whisman (2022)
Building an Eleventy Starter Template Series — Dustin Whisman (2022)
Getting set up in Eleventy (6 part series) — Mike Neumegen (2022)
Learn the Eleventy Static Site Generator by Building and Deploying a Portfolio Website — Gerard Hynes (2022)
Walk with an Eleventy site, before you can run — Amal Ayyash (2022)
Eleventy Crash Course - YouTube playlist — Jaydan Urwin (2022)
Let's Learn Eleventy (11 Part Series) — James Midzi (2022)
Build a Blog With 11ty: Categories - Part 3 — Jeremy Faucher (2022)
Build a Blog With 11ty: Base - Part 2 — Jeremy Faucher (2022)
Build a Blog With 11ty: Setup - Part 1 — Jeremy Faucher (2022)
Setting up Future Projects for Success with Template Repositories — Dustin Whisman (2022)
Minimum Static Site Setup with Sass — Stephanie Eckles (2022)
A Guide to Building a Blog in Eleventy — Raymond Camden (2022)
Build JAMstack-ready sites with Bootstrap and 11ty (Eleventy) — Webpixels (2022)
11ty tips I wish I knew from the start — David East (2022)
Going all in with Jamstack and Eleventy — Tim Kleyersburg (2022)
Introduction to Eleventy (11ty) ELEVENTY — Keenan Payne (2021)
Make Eleventy the next thing you learn — Thomas Semmler (2021)
How I Set Up a Project With Eleventy — Nathan Blaylock (2021)
Turn static HTML/CSS into a blog with CMS using the JAMStack — Kevin Powell (2021)
Itsiest, Bitsiest Eleventy Tutorial — Sia Karamalegos (2021)
A Deep Dive Into Eleventy Static Site Generator — Stephanie Eckles (2021)
Creating a Fast and Beautiful Portfolio Website using HTML, CSS, Eleventy and Netlify — Ingo Steinke (2021)
Eleventy in eleven minutes — Lea Rosema (2021)
Building my personal site with Eleventy — Michael Harley (2020)
Jamstack 101: Getting Started with Eleventy — Joel Varty (2020)
Getting started with Eleventy in 11 minutes — Luciano Mammino (2020)
Let's Learn Eleventy (11ty) - What is Eleventy? — Rares Portan (2020)
Let’s Learn Eleventy! Boost your Jamstack skills with 11ty — Jason Lengstorf (2020)
Five Critical Things To Do Before Working With 11ty — Khalid Abuhakmeh (2020)
Building a website with a static site generator, part 3: Domain, Analytics and Forms — Juha-Matti Santala (2020)
Building a website with a static site generator, part 2: Eleventy — Juha-Matti Santala (2020)
Building a website with a static site generator, part 1: Setup — Juha-Matti Santala (2020)
Eleventy Walkthrough — Reg Hunt (2020)
Teaching in the open: Eleventy — Jérôme Coupé (2020)
Let’s Learn Eleventy! — Zach Leatherman (2020)
Build your own Blog from Scratch using Eleventy — Zach Leatherman (2018)
Other pages in Eleventy Projects
Get Started
Command Line Usage
Add a Configuration File
Copy Files to Output
Add CSS, JS, Fonts
Importing Content
Configure Templates with Data
Permalinks
Layouts
Collections
Collections API
Content Dates
Create Pages From Data
Pagination
Pagination Navigation
Using Data in Templates
Eleventy Supplied Data
Data Cascade
Front Matter Data
Custom Front Matter
Template & Directory Data Files
Global Data Files
Config Global Data
Computed Data
JavaScript Data Files
Custom Data File Formats
Validate Data
Template Languages
HTML
Markdown
MDX
JavaScript
JSX
TypeScript
Custom
WebC
Nunjucks
Liquid
Handlebars
Mustache
EJS
HAML
Pug
Sass
Virtual Templates
Overriding Languages
Template Features
Ignore Files
Preprocess Content
Postprocess Content
Filters
url
slugify
log
get*CollectionItem
inputPathToUrl
Shortcodes
getBundle
getBundleFileUrl
Environment Variables
Internationalization (i18n)
Watch Files and Dev Servers
Eleventy Dev Server
Vite
Common Pitfalls
Advanced
Release History
Programmatic API
Configuration Events
Order of Operations
Thank you to the 838 backers of Build Awesome Pro!
20k Star Eleventy on GitHub! This is an easy way to support our underrated project and help boost our rank on both GitHub and jamstack.org’s list of site generators.
Read the Blog
Follow on Mastodon
Follow on Bluesky
Subscribe to the Newsletter
Watch on YouTube
Star on GitHub
Chat on Discord
Twitter
Sponsors
×1066 Supporters
Edit this page
Accessibility
Credits
Firehose
Style Guide
Built With
Eleventy v4.0.0
Built 2026 October 10
Statistics
20k Stars
21.9M Downloads
Awesomeverse
Font Awesome
Web Awesome
Podcast Awesome
Blog Awesome
Build Awesome