Until now, my personal website was using a Gatsby with a beautiful template named Lumen. Since I don't want to re-write my website every year to follow the latest trend in React world and since I couldn't change much without learning the framework, I've decided to switch to something else. Many static site generators needs several days or weeks to be mastered, so I went for the simpler solution to be able to build the first version of my website in a weekend: 11ty.
I chose Eleventy, because it's crazy easy, low effort and lightweight. I recommend this great tutorial if you are new to Eleventy which help me to build the first version of my new website so quickly.
Styling
In my opinion, CSS sucks. Fortunately, Tailwind is here to the rescue and allowed me to build something beautiful, very quickly. Tailwind is so easy to use that I did not even felt the need to prototype anything in Figma. Bonus, the framework is even styling articles for you if you render it inside a <article></article> tag.
Built for speed ⚡️
I built the website with the requirement to get a perfect lighthouse score and following some low-impact website guidelines. I still need to optimize the pictures section, but for the rest I managed to get a score of 100. In this first version, I used font-sans that use OS font and avoid downloading any font.
Alpine.js
Alpine is a lightweight library that helped me to build the menu for mobile screen. I use the attribute x-bind for hiding/showing the hamburger menu. Very easy, I recommend it.
Hosting
I tried to make host my 11ty website on Github page and followed several tutorials, but nothing worked for me, so I end-up hosting it on Netlify.
Limitations 🫣
It's really nice to be able to create some kind of reusable components like badge in src/_includes/shortcodes, but I also got some issues with templating and extending elements, and that's why I have similar templates with duplicate code inside _layouts (base, baseWithMenu, baseWithoutFooter) since I could not use extends as I wanted.
Next steps
I couldn't code everything in a weekend, so I've decided in to postpone some features for later, such as improved SEO and social images, internalization and Netlify CMS integration. Pull requests are welcome 👋
Conclusion
If you want to create a small lightweight website, easy to maintain and build, I highly recommend 11ty with the combination of Tailwind and Alpine.js
You view the result on pierre.bresson.io and check the code on Github.
Top comments (0)