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
- Easy to adjust
- Fast pagespeed
- Able to write and publish a post online
- Able to host on Netlify - its fast, its free 🎉
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
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
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!
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.
- ✅ Easy to adjust - I only have to make changes in
- ✅ Fast pagespeed - Plain HTML, no frameworks
- ✅ Able to write and publish a post online - I am creating a Markdown in
/blogon Github and commit to publish
- ✅ Able to host on Netlify
Now its here, and I hope you will find useful posts 🍾