Stand with Ukraine 🇺🇦
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

This is an older version of Eleventy. Go to the newest Eleventy docs (current path: /docs/getting-started/) or the full release history.
Menu

Getting Started #

Eleventy is available on npm and requires version 12 of Node.js or higher.

Don’t include ~ $ or ~/eleventy-sample $ when you run these commands.

Step 1 Make a Project Directory #

Make a directory with your project in it.

mkdir eleventy-sample
cd eleventy-sample

You’re now in your new project’s directory.

Step 2 Install Eleventy #

Create a package.json #

Installing Eleventy into our project requires a package.json file. Let’s create it with npm init. The -y parameter tells npm to skip all the questions and just use the defaults.

npm init -y

Install Eleventy into package.json #

Now we can install and save Eleventy into our project’s package.json by running:

npm install --save-dev @11ty/eleventy

Installing locally is preferred to global installation.

Step 3 Run Eleventy #

We can use npx to run our local project version’s of Eleventy. Let’s make sure our installation went okay and try to run Eleventy:

npx @11ty/eleventy
Wrote 0 files in 0.03 seconds (v1.0.1)

Make sure that you see (v1.0.1) in your output. This lets 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><html><head><title>Page title</title></head><body><p>Hi</p></body></html>' > index.html
echo '# Page header' > README.md

We’ve now created an HTML template and a markdown template. Let’s run Eleventy again:

npx @11ty/eleventy
Writing _site/README/index.html from ./README.md
Writing _site/index.html from ./index.html
Processed 2 files in 0.12 seconds (v1.0.1)

This will compile any content templates in the current directory or subdirectories into the output folder (defaults to _site).

Step 5 Gaze upon your templates #

Use --serve to start up a hot-reloading local web server.

npx @11ty/eleventy --serve
Writing _site/README/index.html from ./README.md
Writing _site/index.html from ./index.html
Processed 2 files in 0.12 seconds (v1.0.1)
Watching…

(some output truncated)

[Browsersync] Serving files from: _site

Go to http://localhost:8080/ or http://localhost:8080/README/ to see your Eleventy site live! Make a change to your template files and save them—Eleventy using BrowserSync will refresh the browser with your new changes automatically.

Important Note: Editing README.md won't refresh your browser automatically, because Browsersync requires a <body> tag in your template for live-reload to work properly. Use Layouts to add a <body> around your Markdown content.

Congratulations—you made something with Eleventy! Now put it to work with templating syntax, front matter, and data files.

Continue learning: #

Community Resources:

Getting Started: