Ever since Zach Leatherman created Eleventy in 2018 it is gaining more and more followers especially from people tired of JS-heavy static site generators. Eleventy is zero-config by default and works with any project's structure. It doesn't tie you up with any framework and supports up to eleven different template languages. Eleventy is simple(r). Eleventy adapts to you.
- JS framework: Not required
- Core Maintainer: Zach Leatherman
- Website: 11ty.dev
- Founded: 2015
- Github Stars:
- npm downloads:
It doesn't mean you can't use any framework. It means it's optional and it's up to you if you want to use one.
Long time to interactive (TTI) is a common issue in JS-based static generators like Gatsby or Next.js. The browser needs to download, parse, and execute a big chunk of JS to hydrate the application. That comes with a cost. It ends up with TTI, and input latency increases.
On a typical website, a lot of components are not very interactive, yet they need to hydrate. React team works on partial hydration that should help solve this issue, but the ETA is not clear.
Need for speed
Leaderboards update every 2 weeks and display a list of best-scoring projects. Most of those are very simple personal websites. So take this with a grain of salt, i.e., it doesn't really mean Eleventy is the fastest SSG on the market. I do believe a lot of those pages would have similar scores using other static site generators.
Can be as simple as:
After running command, it will turn out to:
is ready to deploy the output folder. Neat, huh?
Let's try to create a simple blog. The example below is based on the official eleventy-base-blog starter.
Eleventy pulls data from multiple sources. The most straightforward one is Front Matter inside page or templates files.
Fetching data from Headless CMS
Every real-life project needs some sort of CMS. Not every content team is happy with editing md files and pushing it via git.
To fetch data from API, you need to create a JS file inside folder - that way, the data will be available globally.
If you want to fetch data and use it in a specific scope you need to create a file inside template or directory folders.
Eleventy does have a list of starters created mostly by the community. Cool thing is that you can see the Lighthouse scores of each started, updated daily.
Eleventy doesn't have a lot of ready to use plugins, but there are a few that add functionality like RSS, PWA, Tailwind, Table of Contents, and more.
How to get started?
To install Eleventy globally, run the command:
Next, create a folder and an file.
To start the Eleventy project locally, run:
Open to view your website.
Eleventy might be the best choice to start your adventure in the Jamstack world. It gives you flexibility and doesn't push you to learn any specific JS framework like React or Vue.
- Zero-config, works with your existing project structure.
- Supports 11 template languages.
- Encourages progressive enhancement rather than big JS payloads.
- Fast builds. Generate 50k pages per 1 minute.
- Marketing websites with progressive enhancement
- Blogs and documentations
- eCommerce websites with mostly static content