Getting Started #

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

Don’t include ~ $ or ~/eleventy-sample $ when you run these commands (you can’t copy and paste that text anyway).

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 version of Eleventy. Let’s make sure our installation went okay and try to run Eleventy:

npx @11ty/eleventy
Processed 0 files in 0.03 seconds (v0.10.0)

Make sure that you see (v0.10.0) 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 #

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 (v0.10.0)

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 (v0.10.0)
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.

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

➡ Continue: Command Line Usage

Eleventy Documentation