Skip to main content

11ty Static Site Generator

Shenzhen, China

Eleventy quickly builds speedy web sites. Originally pitched as the JavaScript alternative to Jekyll:

  • Eleventy is zero-config (by default) with flexible configuration options.
  • Eleventy works with multiple template languages:
    • HTML: *.md .html Markdown
    • WebC: *.webc JavaScript
    • Liquid: *.liquid *.11ty.js
    • Nunjucks: *.njk
    • Handlebars *.hbs Mustache
    • mustache: *.mustache
    • EJS: *.ejs
    • Haml: *.haml
    • Pug: *.pug
    • Custom: .

Getting Started​

echo '<!doctype html><html><head><title>Hello World</title></head><body><a href="/README">README</a></body></html>' > index.html
echo '# README' > README.md
npx @11ty/eleventy

Need to install the following packages:
  @11ty/eleventy@1.0.2
Ok to proceed? (y) y
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 1 file in 0.08 seconds (v1.0.2)

This will compile any files matching valid input template file extensions (.md is one of them) in the current directory into the output folder (defaults to _site).

Run the following command to start up a web server and serve your readme on http://localhost:8080/README/:

npx @11ty/eleventy --serve

[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 1 file in 0.08 seconds (v1.0.2)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 1 file in 0.07 seconds (v1.0.2)
[11ty] Watching…
[Browsersync] Access URLs:
 -----------------------------------
    Local: http://localhost:8080
 -----------------------------------
[Browsersync] Serving files from: _site

Add more pages with supported file extensions and your HTML code will be created automatically and your browser will reload.

Important Note: Editing README.md won't refresh your browser automatically, because Browsersync requires a body tag in your template for live-reload to work properly. Use Layouts to add a <body> around your Markdown content.

Layouts​

Eleventy Layouts are special templates that can be used to wrap other content. To denote that a piece of content should be wrapped in a template, use the layout key in your Front Matter. So we can replace the content of the README.md file with:

---
layout: layouts/base.njk
title: README
---
## {{ title }}

This will look for a base.njk Nunjucks file in your includes folder at _includes/layouts/base.njk:

---
title: Hi there!
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    <div><h1>Page HEADER</h1></div>
    {{ content | safe }}
  </body>
</html>