Categories
tech

Why I’m Digging Eleventy

It’s been quiet round right here in recent years and for that I ask for forgiveness. Between the brand new task and a host of journeys and displays, I’ve no longer had a lot time for exploration. Next week I’m giving a presentation at attach.tech on static websites (The Platform Formally Known as Static). It’s been some time since I introduced on static websites (the JAMStack) so I’ve been updating my slide deck in preparation. When I provide at the JAMStack, I normally focal point on one explicit engine to offer other folks a “really feel” for what it’s love to paintings with static websites. On a whim, I determined I’d give Eleventy a take a look at. I’ve been listening to about it for some time and concept it could be great to do a little bit of analysis.

One of the issues I’ve discovered is that I both love a static website generator or hate it. These apps have a tendency to be very opinionated about how they do issues and for those who don’t like their opinion then it’s no longer amusing to paintings with them. I really like the JAMStack however there’s just a few turbines that I revel in operating with.

While it’s nonetheless somewhat early (I’ve been having a look at Eleventy for a grand overall of about three days), I’m completely blown away through Eleventy. Why?

Built on Node

My present favourite generator is Jekyll. I in point of fact adore it. However it’s constructed on Ruby and getting it to paintings on Windows has been, every now and then, hellish. I’ve were given not anything in opposition to Ruby normally, but it surely’s no longer a platform I’m conversant in and I’ve by no means labored with the SDK sooner than. I were given a brand new pc about two months in the past and I used to be dreading getting Jekyll up and operating on it. I knew when I did I’d be wonderful, however I used to be no longer having a look ahead to the method.

To be truthful, it if truth be told went OK. The major factor I had used to be that Jekyll 4 got here out just lately and upgrading brought about me a little bit of bother. (Maybe 1-2 hours of labor, so no longer in point of fact that dangerous.) Also, you don’t wish to know Ruby in any respect to achieve success with Jekyll. I’ve written one customized plugin for Jekyll within the 12 months I’ve used it, however outdoor of that, the Ruby language isn’t a priority for me.

That being stated, the truth that Eleventy is constructed on Node is a large plus for me. It’s a platform I do know neatly, I’m happy with, and know will paintings quite neatly on any platform, even my “Linux on Windows” platform with WSL.

Multiple Template Languages

I revel in operating with template languages, some greater than others. Eleventy provides you with 11 (oh my god, I simply spotted that) other templating choices. That’s an enormous quantity of selection and you’ll be able to select the one that works right for you. For instance, they reinforce Handlebars, and whilst I really like Handlebars, it may be a little bit too strict every now and then for me. It additionally helps Liquid, which is the template language Jekyll makes use of, so I will re-use my current talents.

You’re additionally loose to mix ‘n match languages as you spot are compatible. So for instance, you’ll be able to use Markdown (which additionally allows you to use Liquid inside of it) for content material after which Liquid to your layouts.

Simple

While there’s a massive quantity of customization and gear at the back of Eleventy, additionally it is extremely simple to get began with. You can take one markdown record, run the CLI, and get an HTML record out. If you aren’t anxious about layouts or different options, you’ll be able to take supply recordsdata and instantly generate HTML output. The default conduct of Eleventy covers maximum use circumstances however you even have deep configuration choices for tweaking the way it behaves.

Customizable to the Extreme

As said above, there’s a wealthy configuration API to switch how Eleventy behaves. The section that I believe is in point of fact want is how Eleventy supplies hooks into the more than a few template languages. Things like Handlbars helpers for instance. In a regular Node.js application, you could possibly load in Handlebars, upload your helpers, and get to paintings. Because Eleventy lots up the engines for you at the back of the scenes, that isn’t an choice. Instead, they supply an API to at once upload stuff (like helpers, and extra) in your engine.

So fake I’m the usage of Handlebars and need to construct an uppercase helper to make use of for the next template.

---
identify: ray
--- Hello {{ higher identify }}

To make this paintings, I’d upload a .eleventy.js record within the root of my folder, after which use the next:

module.exports = serve as(eleventyConfig) { eleventyConfig.uploadHandlebarsHelper("higher", serve as(worth) { go back worth.toUpperCase(); }); };

And that’s it. But holy crap – it will get higher. Eleventy if truth be told helps including stuff to a couple of engines without delay. While this isn’t supported throughout all 11 templating engines, you might want to alternate the code above to:

module.exports = serve as(eleventyConfig) { eleventyConfig.addFilter("higher", serve as(worth) { go back worth.toUpperCase(); });
};

This provides the helper (referred to as a filter out to Eleventy) to Liquid, Nunjucks, and Handlebars.

Another instance of the versatility comes with permalinks. Most engines supply a option to alternate the default “supply record to output record” common sense. Eleventy lets in this too, and is in point of fact helpful in circumstances the place you need to output non-HTML recordsdata. So for instance, I will have a information.json.liquid record. By default Eleventy will output this to /information.json/index.html. This typically is sensible for HTML recordsdata. In this example, I will alternate the output like so:

---
permalink: information.json
---

This explicit use case is one of the explanations I ended the usage of Hugo for my weblog. Hugo used to be extremely speedy (even supposing no longer a lot quicker than Jekyll 4) but it surely felt like the rest non-HTML similar used to be a ache. I consider spending hours seeking to get Hugo to output JSON and I merely gave up. That may just been my fault (in all probability it used to be), and I do know they have got reinforce for this use-case, however I may just by no means get it to paintings correctly. Hugo felt extremely strict about the way it labored and I’m satisfied I left it.

As an FYI, permalinks too can have variables in them. This lets in for dynamic outputs.

Data Support

All static website turbines reinforce “information” in some shape. This is a option to outline data that can be utilized in templates when producing static output. Eleventy may be very versatile on this regards as neatly.

  • It clearly helps entrance subject, each for templates and layouts.
  • Data will also be specified for a specific record. This allows you to affiliate data with one explicit template and assist stay it a little bit cleaner through having separation between the structure and the information.
  • Data will also be related to a listing, and subdirectories.
  • Data will also be international.
  • Front subject information is normally YAML (even supposing it doesn’t should be in Eleventy), however for information recordsdata you’ll be able to use each JSON and JS.

That remaining level is in point of fact, in point of fact cool. Why? Because you’ll be able to if truth be told use async information to your static website. Imagine the next script in _datafilms.js:

const fetch = require('node-fetch'); module.exports = async serve as() { let resp = anticipate fetch('https://swapi.co/api/motion pictures/'); let motion pictures = anticipate resp.json(); go back motion pictures.effects;
};

This merely hits the Star Wars API to go back an inventory of flicks. Now my templates can do that:

## Star Wars Films {% for movie in motion pictures %}
* {{ movie.name }}
{% endfor %}

And through the best way, once I first attempted this, I forgot to put in node-fetch, Eleventy known this in no time and gave me a pleasant error within the console. In common, once I’ve screwed issues up, Eleventy has been nice about offering data. In code just like the above, you’ll be able to additionally use console.log to assist debug.

The Final Reason

Alright, so I used to be offered on Eleventy sooner than I came upon this, however this ultimate explanation why is what in point of fact, in point of fact inspired me. There isn’t a excellent identify for the issue I’m about to explain, but it surely’s a commonplace factor with static website turbines.

Consider the instance code above the place I wrote some code to load information and go back a dynamic set of Star Wars motion pictures. I then rendered it in an inventory in a template. But what if I sought after to do a “element” view? In an app server, I’d merely hyperlink to a element web page and cross an ID worth, so for instance, I might use a URL like this in a Node application: /movie/3. The 3 represents the principle identifier for the movie. I’d use common sense in my handler for movie to render the suitable end result.

In a static website, you could possibly want one thing other normally. Given 3 motion pictures, chances are you’ll want output like so:

/movie/1/index.html
/movie/2/index.html
/movie/3/index.html

However, maximum static website turbines require a “one to one” correlation between enter recordsdata and output recordsdata. In the previous I’ve solved this in plenty of techniques. One means is with a script that reads within the information, generates stub recordsdata, each and every of which is able to then come with a core structure record to render the element.

Eleventy solves this factor in what I believe to be essentially the most superior, and easy, means imaginable. Eleventy has a Pagination API that I to begin with unnoticed. I noticed the function and concept, adequate, given N weblog posts, this is helping me construct N/10 pages of weblog listings. And sure, it does that (and does it rattling neatly), however, it additionally handles the use case above.

So consider I’ve an array of knowledge, motion pictures, and I would like pass generate one record each and every. I may just use the next record I’ve named movie.liquid:

---
pagination: information: motion pictures dimension: 1 alias: movie
permalink: motion pictures/{ slug }/index.html
--- {{ movie.name }} used to be launched in {{ movie.release_date }}

THe entrance subject defines that I would like pagination, that I need to iterate over motion pictures, and that I would like one information merchandise consistent with record. Now take a look at the permalink. It specifies that I must take the name of the movie, cross it by way of a “slug” filter out (that is constructed into Eleventy), and retailer it there. The code underneath the entrance subject is how I render the movie.

And that’s it. As I stated… holy crap. Here’s how the output appears to be like:

Folder output from dynamic films

Want to Learn More?

So this wasn’t supposed to be a “Intro to Eleventy” publish. As the name says, I sought after to give an explanation for why I’m so darn inspired through what I’ve observed. I extremely inspire you to check out the medical doctors to be told extra. I don’t see myself instantly rebuilding my website in Eleventy, I simply up to date the UI not up to a 12 months in the past I believe. But it’s going to completely be the following generator I exploit. I’m additionally tinkering round some weblog posts demonstrating the best way to use it extra absolutely. (As I stated above although, it’s been difficult to seek out time in recent years.) If you might be the usage of it these days, depart me a remark. Or – for those who checked out it and determined in opposition to it, I’d love to listen to why as neatly.

Header picture through Dominik Schröder on Unsplash