zachleatGetting Started #
Eleventy is available on npm and requires version 12 of Node.js or higher.
Don’t include ~ $ or ~/eleventy-sample $ when you run these commands.
Step 1 Make a Project Directory #
Make a directory with your project in it.
mkdir eleventy-sample
cd eleventy-sampleYou’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 -yInstall Eleventy into package.json #
Now we can install and save Eleventy into our project’s package.json by running:
npm install --save-dev @11ty/eleventyInstalling locally is preferred to global installation.
Step 3 Run Eleventy #
We can use npx to run our local project version’s 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 (v1.0.1)Make sure that you see (v1.0.1) 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 #
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><html><head><title>Page title</title></head><body><p>Hi</p></body></html>' > index.html
echo '# Page header' > README.mdWe’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 (v1.0.1)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 (v1.0.1)
Watching…
(some output truncated)
[Browsersync] Serving files from: _siteGo 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.
<body> tag in your template for live-reload to work properly. Use Layouts to add a <body> around your Markdown content.Congratulations—you made something with Eleventy! Now put it to work with templating syntax, front matter, and data files.