Menu
1.93s29.05sGetting Started
Eleventy v2.0.1 requires Node.js version 14 or higher.
You can check whether or not you have Node installed by running node --version in a terminal window. (Well, wait—what is a Terminal window?) If the command is not found or it reports a number lower than
14, you will need to download and install Node.js before moving on to the next step.
Prefer to watch videos instead? Check out 6 minutes to Build a Blog from Scratch.
Step 1 Make a Project Directory Jump to heading
Create a directory for your project using the mkdir command (short for make directory):
mkdir eleventy-sampleNow move into that directory with the cd command (short for change directory):
cd eleventy-sampleStep 2 Install Eleventy Jump to heading
Create a package.json
Jump to heading
Installing Eleventy into a project requires a package.json file. The npm command (provided by 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 -yInstall 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-devYou may also install Eleventy globally but the package.json installation method above is recommended.
Step 3 Run Eleventy Jump to heading
We can use the npx command (also provided by Node.js) to run our local project's version of Eleventy. Let’s make sure our installation went okay and try to run Eleventy:
npx @11ty/eleventyHere’s what your command line might look like after you run Eleventy:
npx @11ty/eleventy
[11ty] Wrote 0 files in 0.03 seconds (v2.0.1)If you see (v2.0.1) 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.
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.htmlecho '# Page header' > README.mdAlternatively, you can create these using any text editor—just 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:
npx @11ty/eleventyThe output might look like this:
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.1)We’ve compiled our two content templates in the current directory into the output folder (_site is the default).
Step 5 Gaze upon your templates Jump to heading
Use --serve to start up a hot-reloading local web server.
npx @11ty/eleventy --serveYour command line might look something like:
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/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!
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!
- Read up on a few other deployment options.
Step 7 Continue Learning… Jump to heading
Congratulations—you made something with Eleventy! Now put it to work:
- Use a layout file so that you don’t have to repeat boilerplate on every template.
- Add CSS, JavaScript, or Web Fonts to your project.
- Add more content! In the above tutorial we used HTML and Markdown. Why not JavaScript or WebC (for components) next? Nunjucks and Liquid are also very popular. Maybe you’re feeling super adventurous and want to add your own custom type?.
- Learn more of the command line options for Eleventy.
- Perhaps you’d like to consume data from third party APIs in your project?
Tutorials and Starter Projects
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):