[Project] Super blog
2 min read
First things first #
Why did I name it super-blog? Well, the answer is quite simple.
Like many others, I suffer from the impostor syndrome and I tend to not finish what I start, because I think it's not good enough. 🥺 I needed a name that would make the project interesting and push me to carry it on! Hence the idea of calling my most captivating side-projects with the prefix super- 😎
I started to write a post about all the super-apps – as I call them – I would like to develop in the near future! 💪🏻
But anyway, let's talk about how I made this simple blog.
The project #
This blog is built using 11ty static site generator.
| Use | Tech stack |
|---|---|
| Template engine | Nunjucks |
| Build tool | 11ty |
| Content | Markdown |
| Repository | Open source on GitHub |
Project review, what I learned or improved #
11ty
This was the first time I used 11ty as static site generator and it was amazing! ✨
11ty supports Nunjucks as template engine, and desprite the Nunjucks documentation is not exaustive, I found everything I needed in forums, stackoverflow and so on. I also wrote some posts about what I discovered! 😏
Here is a list of really useful 11ty plugins I used in this blog:
- eleventy-navigation: easily builds navigation between markdown pages
- eleventy-plugin-syntaxhighlight: adds syntax highlighted code in markdown pages (it uses PrismJS)
- eleventy-plugin-nesting-toc: adds table of contents at the top of each article
- eleventy-plugin-reading-time: adds reading time calculated on article length
- eleventy-plugin-social-images: creates social images for all posts getting post titles and using a custom template (it uses Puppeteer)
- markdown-it-anchor: adds anchor on markdown headings, and also add links to them
- markdown-it-attrs: adds classes and ids to markdown content, to improve layout consistency with other components in page
- luxon: formats dates in human readable format
Nunjucks
Unfortunately, UIengine (the framework I used to build my styleguide, read more about it in projects -> Super Styleguide) does not support Nunjucks as template engine, in fact I had to copy by hand all EJS templates in Nunjucks language. I searched for a node package to automatically convert components from EJS to Nunjucks, but I didn't find any.
Git submodules
For the first time, I worked with git submodules: one for the content repository and another for the stylegudie repository. At the beginning was quite hard to understand how to keep aligned (or voluntarily disaligned) all the pieces, but I understood how to use them over time... and now I am satisfied to use this repository structure.
Netlify
I never used Netlify before, and it was... wow! 😍 I never gone into something so quick to setup and I really love its great documentation. I set automatic deploy on merge requests and push on main branch, so now on I will have a new preview version of my blog for every feature or fix I will do, and it is stunning!
Next up 💪🏻 #
As they say (or at least, as I say) "A website has no end.". There are lot of features (and some tricky bugs 🐛) I'd like to update in this blog as soon as I understand how to do them!