Me Articles

Why I picked Eleventy for my blog

Nowadays, there is about a billion ways to handle your blog,
and since there isn't any methods that is more right than another, I wanna explain why I've used these tools for my blog.

Even though I choose React 90% of the times, I decided it was overkill in this case. I don't want it to be super dynamic, I rather like it static. Like a book.
But there was some thing I considered before I started.

My primary considerations for my blog was

Actually I thought I would use plain HTML and CSS, which I am, more or less.
But without a static site generator, I have to create a HTML file, and copy-paste the template for every single blogpost. And compared to the list above, this will make it difficult to adjust styling. Well, the styling is not gonna get more difficult, but I might have to make changes in each and every HTML file?! 🤯

Luckily, there are tools making this part easy to maintain,
and this is were Eleventy comes in handy 🔧

I already had the UI ready, with a HTML file, using Tailwind. Now I just want to get my blog up and running. Let's have I look, how easy it is to work with Eleventy.

Worth mention: I had no experience with Eleventy before this blog

npm install -g @11ty/eleventy

So now Eleventy is installed, I'll create this post you are reading right now. I would prefer writing my posts as Markdowns, so I'll add a folder for blogposts, where to place them.

Then I'll create another folder in the root, called _includes (which is the default directory name for Eleventy's folder, including files, extends and macros).
Inside this folder, I will setup the layout, for my blog. I am using liquid. Let's name the file layout.liquid
With liquid, I can build the template using HTML like we are use to, but with the opportunity to use content from every markdown.

Problem solved! I don't have to copy-paste the HTML template for each and every blogpost! And if I wanna make CSS changes later on, I just edit this file!

This is the reason why, I am using Eleventy for my blog. No fancy framework needed, just plain HTML, combined with a super simple site generator.

All I have to do now is running

eleventy --formats=html,png,jpg

in the terminal, and it will then create a _site folder, which I can host on Netlify.

I am not gonna share any codes, there are plenty examples and great documentation on 11ty.dev - but let's have a look at the final project structure.

_includes
  layout.liquid
articles
  index.md
  why-i-picked-eleventy-for-my-blog.md
images
index.html

Simple as that! index.html and images folder is the frontpage, which I've made a year ago, without any subpages.

As the last thing, I will take a look at the considerations mentioned above.

Now its here, and I hope you will find useful posts 🍾

Me Articles Why I picked Eleventy for my blog