Building a 11ty website in a weekend
Tags: 11ty, opensource, tailwindcss
Published: 2022-11-17 12:18:49

Until now, my personal website was using a Gatsby with a beautiful template named [Lumen](https://github.com/alxshelepenok/gatsby-starter-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](https://jamstack.org/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](https://www.11ty.dev/).

I chose Eleventy, because it's crazy easy, low effort and lightweight. I recommend [this great tutorial](https://dev.to/psypher1/lets-learn-eleventy-1a67) if you are new to Eleventy which help me to build the first version of my new website so quickly.

## Styling
![css is crap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2vn5859jxdmtcg8j75h.jpeg)
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](https://github.com/NMF-earth/low-impact-website-checklist). 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.


![light house score](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcn0tvc6h506qnfo3txl.png)



## Alpine.js
[Alpine](https://alpinejs.dev/) 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](https://www.11ty.dev) with the combination of [Tailwind](https://tailwindcss.com/) and [Alpine.js](https://alpinejs.dev/)

You view the result on [pierre.bresson.io](https://pierre.bresson.io/) and check the code on [Github](https://github.com/PierreBresson/pierre.bresson.io).

![preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxpdwcr73tukdoohstp6.png)