11ty

Eleventy Documentation

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 check what version we’re using:

npx @11ty/eleventy --version
0.8.3

Do you see 0.8.3? Good! Now we can run Eleventy for real:

npx @11ty/eleventy
Wrote 0 files in 0.02 seconds

This makes sense—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
Wrote 2 files in 0.10 seconds

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

Step 5: Look at 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
Wrote 2 files in 0.10 seconds
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.

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

➡ Continue: Command Line Usage