Building a 11ty website in a weekend

Pierre Bresson — Thu, 17 Nov 2022 12:18:49 +0000

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.

Hacktoberfest 2021 - Carbon Diary & Sustainable Guide

Pierre Bresson — Tue, 05 Oct 2021 15:06:20 +0000

Do you want to contribute to a beautiful React Native app for hacktoberfest 2021? Search no more, help the fight against climate change right now.

What is NMF.earth? 🌍

It's an app to understand and reduce your carbon footprint. Free and open-source, available in 10 languages for both iOS and Android, it's built with Expo, Redux Toolkit and Typescript. You can see the design on Figma community.

The app in numbers :

758 commits
331 tests, 126 snapshots
248 stars ⭐️
33 amazing contributors 🧑‍💻
8 major versions since the first one in April 2020
0 crash in prod

What's in for me? 🎁

In addition to digital ocean gift, I've tagged some issues like this one with a Stickers tag. If you complete any of these issues, you will receive a set of 3 gorgeous stickers made by Jenny Lelong. Usually you can buy them here, but this time it's on me, from my own pocket, including the delivery.
Note: If you have been working on a large task without the stickers tag, feel free to ask me for some free stickers ;)

What is the goal of this hacktoberfest?

I would love to finish the eco-score feature (scan a bar code from a product to get its carbon footprint) and also complete the recurring emissions feature.
Beside these two big features, there is also some smaller tasks like the language change mechanism, FAQ screen and some other tiny issues in the backlog.

Contributions

Except if you already have merged some good code in this repo, I won’t assign any issue due to spam and beginners unable to complete a PR without a lot of help from my side - I do this app on my free time.
However, feel free to leave a comment if you are working on an issue.

Happy hacking ✌️

Github - Website

DEV Community: Pierre Bresson