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.
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.
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.