Now that I’m recently graduated with all my summer activities (vacations, grad ceremonies, etc.) cancelled due to COVID, I thought this would be the ideal time to redo my website. I created my new website using Eleventy as the static site generator and TailwindCSS to style the website.

I’ve used a few static site generators in the past. My original website was a static site made using Jekyll and a premade template from HTML5 UP. I originally created my website to host my portfolio of school and personal projects. I also redesigned the website of an extracurricular club at my university using Hugo and a premade theme that I had to customize heavily.

While Hugo and Jekyll are hugely popular and come with lots of premade themes you can build from, I found both of them frustrating for different reasons. Regarding Jekyll, I liked it’s templating engine (Liquid) and it was really easy to get started due to it’s popularity but build times were slow and Ruby was a pain to manage on Windows at the time. On the other hand, Hugo had blazing fast build speeds and was completely batteries included (the single binary made it a breeze to setup) but I found it’s templating language to be extremely complex. Additionally, I felt it was hard to extend Hugo when you need extra functionality. Also, the directory structure of Hugo can be quite strict and the template lookup order can be complex. Lastly, I personally found that using premade themes can be frustrating when you want to extend their functionality (ex. adding search).

I recently discovered Eleventy and I am hooked! Eleventy combines the best of both Hugo and Jekyll in addition to adding useful, unique features. Eleventy has speedy builds, support for multiple templating languages (I use Nunjucks), ability to extend Eleventy using plugins and custom filters, and flexible directory structure. Eleventy is built using NodeJS which allows developers to tap into the npm ecosystem to provide asset compilation pipelines, plugins, and so much more. This is a huge advantage since you can extend Eleventy to do almost anything: custom filters, minify html using transforms, and TOML front matter support. But the defaults features are pretty awesome too! My favourite features include: flexible directory structure, powerful pagination, applying common front matter variables to all pages in directory using a json file, and exposing environment variables using javascript files. The biggest drawbacks to using Eleventy is the lack of documentation compared to something like Hugo or Jekyll as well as having to roll functionality provided by other static site generators yourself (ex. asset compilation) which can be a barrier for some people.

For the design of the website, I decided to use TailwindCSS as the CSS framework. TailwindCSS is a utility first CSS framework built on top of PostCSS. Essentially, TailwindCSS comes with a ton of utility classes for things like margin, padding, font, and flex box configurations which you can add to your HTML elements to create custom designs while writing very little CSS. It’s kind of a weird concept but I really enjoyed using it once I got the hang of it. The abundance of utility classes make it really easy to quickly iterate on a design without even leaving your HTML files! How cool is that! Tailwind comes with just the right amount of options for these utility classes to make your choices for things like padding granular without being overwhelming. Even though I’m not much of a CSS or design wizard, I was able to come up with a design I am satisfied with quickly and easily. Especially given that I was aiming for a more minimalistic, text driven design for this site, using a framework like Bootstrap with lots of built-in components that I would have to override anyways didn’t make a ton of sense. In fact, this site was created using the default fonts and color palette provided by the framework itself! The only CSS classses I ended up writing were for styling typography (headings, text, and code blocks). TailwindCSS has some drawbacks such as larger CSS files by default (although this can be easily mitigated by using PurgeCSS).

Overall, I’m really happy with this new site. I can easily recommend using Eleventy as a static site generator for people who are frustrated with other static site generators and want more control as well as flexibility. I can also recommend TailwindCSS for those needing a more lightweight framework compared to Bootstrap or even as a slightly easier alternative to writing raw CSS. Eleventy and TailwindCSS also work quite well together.