The Eleventy Learning Curve

I have spent several days playing with Eleventy and trying to get it to behave as I would like to and over the last day or two I succeeded, to some degree. Eleventy, like Hugo, is a static website generator. Whereas Hugo is built on Go Eleventy is built on Javascript. In so far as I can tell they’re both working at around the same speed.

Appearance

This blog post is written, first for Hugo, then transferred to my wordpress blog and maybe, in third place it will be added to my eleventy blog experiment. One of the key differences that I see between eleventy and Hugo is how themes work. With Hugo you choose a theme and it is applied to the entire site. With Eleventy you can create a specific layout for each website section along with it’s own css and more, so it is more modular. Yesterday I was experimenting with CSS and eventually I got it to work, but following the instructions for a css file called “bundle” rather than “style” or similar theme name.

Plugins

If you’re used to Wordpress then you’re used to having plugins that you install and everything is done for you. I tried two key plugins. The first is a plugin that allows you to see the reading time for a post. For this you need to npm instal the plugin and once that is done add a snippet of code in the right place in the layouts, and the change will be propagated to all the relevant pages.

With the YouTube plugin it’s even more interesting. You install the plugin and prepare the eleventy.js page, as with the previous plugin. That plugin will then look for youtube urls and automatically generate a div for the video to play in. The div is given a specific name and that’s where, in the css file, you can tell eleventy how to layout the video player. By default it goes full screen but with a little css you can get it to look good within your blog post or web page.

SASS, SCSS and More

If you’re comfortable with SASS or SCSS rather than CSS you can setup the site to convert from SASS and SCSS to CSS automatically. It gives you the freedom to use the one that you are more comfortable with.

Eleventy From Scratch

For part of the learning journey I used Eleventy From Scratch until I got to the gulp section. From then on I looked for manuals for specific features, like converting from SASS to CSS and other tutorials.

Eleventy Plugins

With Eleventy plugins you extend the functionality of your site without having to spend hours writing your own code. Read the instructions, follow them, apply them, check that they work, and experiment with the next plugin.

And Finally

If you want to change the layout of a wordpress blog you need to learn php and understand how everything behaves with everything else. You need to understand themes and child themes, and how to get everything to work without breaking. With Eleventy you find the instructions for what you want, tinker for a little bit and you achieve your goal. Nunjuk makes website layout as simple as adding html where you want it, and markdown makes adding headings and paragraphs simple.

When I tried adding youtube embeds to Hugo I needed a shortcode to make it work. With Eleventy the url is enough, and the rest is done when generating the site.

In summary, although the learning curve for Eleventy, to create pages automatically is steep, once you understand it, you gain in flexibility. You focus on the html, css and appropriate plugins and it does the rest.