Get Started
Eleventy v3.1.2 requires a JavaScript runtime, usually Node.js — version 18 or higher.
You can check whether or not you have Node.js installed by running node --version
in a terminal application. (Well, wait—what is a Terminal?) If the command is not found or it reports a number lower than
18, you will need to download and install Node.js before moving on to the next step. We encourage folks to use even numbered releases of Node.js.
Prefer to watch videos instead? Check out 6 minutes to Build a Blog from Scratch.
Step 1 Make a Project Directory
Jump to section titled: Step 1 Make a Project DirectoryCreate a directory for your project using the mkdir
command (short for make directory):
mkdir eleventy-sample
Now move into that directory with the cd
command (short for change directory):
cd eleventy-sample
Step 2 Install Eleventy
Jump to section titled: Step 2 Install EleventyCreate a package.json
Jump to section titled: Create a package.json
Installing Eleventy into a project requires a package.json
file.
npm init -y
The npm
command (included with Node.js) will create a package.json
file for you with npm init -y
. The -y
flag tells npm
to use default values and skips the questionnaire.
Use the following command if you want to use ESM in your project and not CommonJS.
npm pkg set type="module"
pnpm init
Learn more about pnpm (it requires separate installation).
yarn init
Learn more about yarn (it requires separate installation).
Install Eleventy
Jump to section titled: Install Eleventy@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
pnpm install @11ty/eleventy
yarn add @11ty/eleventy
You may also install Eleventy globally but the package.json
installation method above is recommended.
Step 3 Run Eleventy
Jump to section titled: Step 3 Run Eleventynpx @11ty/eleventy
We can use the npx
command (also provided by Node.js) to run our local project's version of Eleventy.
pnpm exec eleventy
yarn exec eleventy
Here’s what your command line might look like after you run Eleventy:
[11ty] Wrote 0 files in 0.03 seconds (v3.1.2)
If you see (v3.1.2)
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 section titled: Step 4 Create some templatesA 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 '# Heading' > README.md
echo '<!doctype html><title>Page title</title><p>Hi</p>' | out-file -encoding utf8 'index.html'
echo '# Heading' | out-file -encoding utf8 'README.md'
If the out-file
command is not available in your Windows Terminal window (it’s PowerShell specific), use the Cross Platform method instead.
npx @11ty/create index.html "<!doctype html><title>Page title</title><p>Hi</p>"
npx @11ty/create README.md "# Heading"
Learn more about @11ty/create
(requires Node.js 18 or newer).
Alternatively, you can create these using any text editor — 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/eleventy
pnpm exec eleventy
yarn exec eleventy
The output might look like this:
[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 (v3.1.2)
We’ve now compiled our two content templates in the current directory into the output folder (_site
is the default).
If you’d like to experiment further with template file syntax, edit the following sample README.md
file in your browser. Front Matter, Liquid and Markdown syntax are in use.
---
title: Heading
---
# {{ title }}
Step 5 Gaze upon your templates
Jump to section titled: Step 5 Gaze upon your templatesUse --serve
to start up a hot-reloading local web server.
npx @11ty/eleventy --serve
pnpm exec eleventy --serve
yarn exec eleventy -- --serve
Your command line might look something like:
[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 (v3.1.2)
[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 section titled: Step 6 Put it online (optional)Your output folder (_site
) now contains all of the statically built files for your new web site. You can upload this folder to any web host! Head over to our deployment documentation to read more about putting your Eleventy project online for everyone to see.
Step 7 Continue Learning…
Jump to section titled: Step 7 Continue Learning…Congratulations—you made something with Eleventy! Now put it to work:
- 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?.
- Use a layout file so that you don’t have to repeat boilerplate on every template.
- Add a configuration file to unlock advanced Eleventy capabilities!
- Add CSS, JavaScript, or Web Fonts to your project.
- It’s super easy to add automated Image optimization too!
- 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
Jump to section titled: Tutorials and Starter ProjectsFor 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):
More From the Community
Jump to section titled: More From the Community×98 resources via 11tybundle.dev curated by Bob Monsour.