Get Started
Eleventy v3.0.0 requires Node.js version
18 or higher.
You can check whether or not you have Node 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.
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 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 install @11ty/eleventy
pnpm install @11ty/eleventy
You may also install Eleventy globally but the package.json
installation method above is recommended.
Step 3 Run Eleventy
npx @11ty/eleventy
We can use the npx
command (also provided by Node.js) to run our local project's version of Eleventy.
Hereβs what your command line might look like after you run Eleventy:
[11ty] Wrote 0 files in 0.03 seconds (v3.0.0)
If you see (v3.0.0)
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.
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.
npx @11ty/create index.html "<!doctype html><title>Page title</title><p>Hi</p>"
npx @11ty/create README.md "# Heading"
Learn more about @11ty/create
(requires Node.js 18 or newer).
Alternatively, you can create these using any text editorβjust 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:
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.0.0)
Weβve compiled our two content templates in the current directory into the output folder (_site
is the default).
Step 5 Gaze upon your templates
Use --serve
to start up a hot-reloading local web server.
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.0.0)
[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)
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.
- 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):
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):
Γ85 resources via 11tybundle.dev curated by Bob Monsour.
Expand to see 80 more resources.
- 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)
- Eleventy website to GitHub Pages with GitHub ActionsβββAndres Bitrian (2024)
- index.md is a valid Eleventy projectβββJuha-Matti Santala (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)
- A bit of a summary of the build of this site and how it worksβββTim Klapdor (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)
- i11g - Updating an Immutable BlogβββNamaskar (2023)
- Build a Blog with Eleventy (11ty) and Webiny Headless CMSβββMaurice King (2023)
- Bookshop 11ty GuideβββCloudCannon (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βββCloudCannon (2022)
- Eleventy Starter Template SeriesβββDustin Whisman (2022)
- Building an Eleventy Starter Template SeriesβββDustin Whisman (2022)
- Eleventy Tutorial - Create an 11ty Static SiteβββDanial Zahid (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)
Getting Started: