Eleventy runs npm install 89% faster than Remix.

Getting Started Jump to heading

Eleventy requires version 14 of Node.js or higher.

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

Step 1 Make a Project Directory Jump to heading

Create a directory for your project using the mkdir (make directory) command:

mkdir eleventy-sample

Now move into that directory with the cd (change directory) command:

cd eleventy-sample

Step 2 Install Eleventy (Optional) Jump to heading

While installation of Eleventy is optional (you could skip to step 3), it is recommended so that your project uses the same version of Eleventy the next time you come back to it. package.json installation (shown here) is preferred to global installation.

Create a `package.json` Jump to heading

Installing Eleventy into a project requires a package.json file. npm (included with Node.js) will create one for you with npm init -y. -y tells npm to use default values and skips the command line questionnaire.

npm init -y

Install Eleventy Jump to heading

@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 --save-dev

Step 3 Run Eleventy Jump to heading

We can use npx to run our local project's version 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 (v2.0.0)

Make sure that you see (v2.0.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 Jump to heading

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 '# Page header' > README.md

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

npx @11ty/eleventy
[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 (v2.0.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 Jump to heading

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

npx @11ty/eleventy --serve
[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 (v2.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/

Go to http://localhost:8080/ or http://localhost:8080/README/ 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) Jump to heading

The easiest way to put your new site online is to head over to Netlify Drop (no account sign-up required) and drag your new Eleventy-generated _site folder to the Netlify Drop web interface. In seconds, your new site will be online for anyone to see!