Getting Started — Eleventy

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.8 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.
Create a directory for your project using the mkdir command (short for make directory):
Now move into that directory with the cd command (short for change directory):
Installing Eleventy into a project requires a package.json file.
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.
Learn more about pnpm (it requires separate installation).
Learn more about yarn (it requires separate installation).
@11ty/eleventy is published on npm and we can install and save it into our project’s package.json by running:
You may also install Eleventy globally but the package.json installation method above is recommended.
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 should look like after you run Eleventy:
If you see (v3.1.8) 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.
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.
If the out-file command is not available in your Windows Terminal window (it’s PowerShell specific), use the Cross Platform method instead.
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:
The output might look like this:
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.
_site/README/index.html
Use --serve to start up a hot-reloading local web server.
Your command line might look something like:
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!
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.
Congratulations—you made something with Eleventy! Now put it to work:
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):
×108 resources via 11tybundle.dev curated by Bob Monsour.
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.