What Makes Eleventy Great

I talk about a great JavaScript-based static site generator.

Created on February 9, 2021.

For the first entry in this series, I will discuss Eleventy, pronounced “eleven-ty,” and stylized as 11ty. It was created by Zach Leatherman.

screenshot of the eleventy website

Screenshot of the Eleventy website.

Rundown

Let's say you wish to create a website, but you don't want to write runtime application or server code to operate it. Perhaps you want to minimize your attack vector and take a hands-off approach. What's more, you prefer to avoid copy-pasting HTML blocks with every update. Code duplication isn't desirable, after all. Thus, your best course of action is what's called a static site generator, often shortened to SSG. These are programs that convert programmatic templates (meaning they can have loops and conditions!) into static HTML files.

One thing to love about Eleventy is that it's based on JavaScript, the scripting language of the web. With it Eleventy users compose their templates, process them, and deploy the fruits of said processing, file output, to a site hosting platform such as GitHub Pages. In fact, that's exactly what I'm doing with this blog. Netlify is another popular choice for Eleventy deployments, but any old web server will do. What I like most about this SSG is its accessibility: while many alternatives have explicit themes, code using Eleventy is forked as stand-alone projects. This maximizes customization and prevents mismatches between usage and what the “theme” requires.

As in most things, especially of and relating to code, I am not a fan of tightly coupling components; however in this case I urge others who are like-minded to make an exception. For an SSG, the theme and working site should be One, as in Oneness. When they are separate, you lose something. That thing is convenience, because you will eventually seek a change that would otherwise be unsupported by a stifling and cold theme. The theme will say to you, “Ruby, don't take your love to town,” but you should not listen, whether or not your name is Ruby.

Eleventy, instead, invigorates you to take your love to town unlike, well, WordPress. But how, you may wonder, can I justly compare Eleventy and WordPress? Are they not apples and oranges? As it would happen, the distinguishing feature between WordPress and Eleventy is that WordPress serves the function of a content management system (CMS). This is a fancy way of saying that WordPress has a comprehensive online editor, mainly referring to its WYSIWYG page editing.

But! You can actually use Eleventy and many other SSGs with a headless CMS such as Netlify CMS. Others include Agility and Forestry. What is a headless CMS? It's just the backend of a CMS, meaning the frontend is up to your discretion.

So… still have reasons for using WordPress? Well, you could, as it is possible to use WordPress as a headless CMS, although the process seems a tad involved. Other headless CMS offerings more smoothly integrate with popular SSGs.

Taking Your Love to Town

What is most powerful and simultaneously daunting about Eleventy is that it supports virtually every templating engine, from Nunjucks to Pug to JSX. Don't feel bad if you're not sure which is best for you, because there are many options. Plus, is it really a good idea to jump to the deep end? Fortunately for beginners, Eleventy has a directory of starter projects to browse! Try projects with different templating engines and other competing technologies, such as Rollup vs Webpack (I find Rollup to be much simpler). With enough experience, you might build your own Eleventy project, or at least mix and match them.

That's what I did! This blog is forked from 11r, an Eleventy starter project I built after experimenting with other starter projects. Feel free to use my project for your own blog.

In addition to the variety of templating engines and bundlers, it goes without saying that any styling and JavaScript you want to include is up to you. I prefer utility classes for my styles, hence why I use TailwindCSS. I also use Prism for code syntax highlighting. Are you a Sass aficionado? You can use it too!

Out of the Box Features

Okay, so Eleventy lets you orchestrate a hodgepodge of technologies, but you may be wondering what Eleventy can do for you specifically. Here's a little on that:

  • It lets you write posts in Markdown.
  • Your Markdown posts can have "front matter," which is extra data you can add to them, including a content date.
  • You can organize and stylize different kinds of content using layouts.
  • Tags are supported, meaning you can easily group similar posts however you please.
  • Paginate your lists, so no page grows too big!
  • Pages can be created directly from data, such as JSON.
  • Links to your content are fully customizable.

Conclusion

Eleventy is great code that helps you make websites, especially blogs and portfolios, with supreme ease. Even if you're unfamiliar with JavaScript, the starter projects will do most, if not all, of the work for you. Furthermore, the flexibility of Eleventy may be its greatest strength: customize to your heart's content. And don't forget that you can use it with a headless CMS!

Next

On Founding My Own Game Studio

Previous

DOTS Navigation with Auto-Jumping Agents and Movable Surfaces


By using this site, you agree that you have read and understand its Privacy Policy.