Luke.Work Version 4

Published — 5 minute read

In my last post, I mentioned that I wanted to rebuild this site on 11ty and Tailwind CSS, and then host it on CloudFlare Workers or Pages. If you’re reading this post, that means I’ve accomplished just that!

In this post, I will outline the goals I had for building this site and how close I came to achieving them.

The Goals

Built with 11ty

Eleventy is a static site generator (SSG) written in JavaScript. There’s been a bit of a revival of SSGs during the last 3 years over SSGs, and the headliner for a while was Hugo and then Gatsby.

I built my wedding site using Gatsby, and I really loved the performance gains I got and how easy templating was. However, build times are insane (20-120s for a small 3 page site with images, not kidding) and the way image optimization was handled at the time (June 2019) I had to manually write GraphQL queries (statements more like it) on each page that had images and then reference those queries on the page to get lovely optimized images with blur fade-in. This was most likely the wrong way to do things, though this was the method demonstrated in the Gatsby docs at the time.

This is a stark contrast to 11ty, with the eleventy-image plugin. All I have to do for nice optimized images is make sure my config is good, and then reference the image file using a shortcode in the template (I use and love Nunjucks). The only downside is that in order to get my images referenced in my markdown blog posts would be to use the image shortcode instead of the markdown syntax. So currently all the body images (cover image is optimized) are not optimized through 11ty. I think it would be a simple fix by doing a find+replace for all the markdown images and replace the syntax with the template shortcode, and should be easily reversible via the same method if this changes in the future.

Other great things about 11ty: It’s super simple to get started with, the docs are fantastic, and it has a stay-out-of-your-way approach to being an SSG. Plus, it is super fast, despite being JavaScript on Node. Here is a great comparison of SSG build times.

Tailwind CSS

Tailwind is great. I have been so incredibly productive with it that I decided to finally leave WordPress for small client projects - it is simply much faster and easier for me to build new sites with 11ty and Tailwind than fight with WordPress’ clunky (though improving!) block editor.

This is also the first CSS framework I’ve been able to stick to - I tried Bootstrap when it first came out and strongly disliked it and the bloat that came with it, plus all sites built with BootStrap looked the same. Same top bar menu, same bad gradients, same buttons, etc. I hear Bootstrap has gotten a lot better since 2011.

Not to say the samey feel isn’t a problem with Tailwind, though. I can definitely visit some sites and tell based on design alone that they use Tailwind. Maybe you can tell with my site.

I also just recently discovered the Tailwind JIT compiler - which sped up my build times tremendously. It takes 11ty + PurgeCSS roughly 1-4s to build everything and compile the CSS for production.

No minimalist white backgrounds here

This design is nuts! I initially had some idea in my head that I was going to become a wiz at a vector tool (Affinity Designer is my fave) and draw out this amazing landscape based on the West Texas mountains, throw in some desert so my cactus logo is right at home, and then a beach and ocean to reflect where I currently live.

Then I realized how bad I am at freehand vector landscapes and did it all with CSS and some SVG wave vectors.

AVIF-first images with WebP and JPEG fallback

I decided not to do this. AVIF encoding is super slow, and brought my super fast 11ty build times up to shudder Gatsby level build times (100+ seconds).

AVIF is not widely supported currently, and with WebP being supported by all the browsers that matter, plus fast build times, I decided WebP first with a JPEG fallback was good enough.

Hosted on CloudFlare Pages

CloudFlare Pages released a few days before I launched the new site. I was initially going to use Workers, however Pages is such a better solution now. Plus, redirects through CloudFlare Page Rules work (they don’t on Workers), so I was able to redirect the old URLs to fit the new permalink structure.

Pages is incredibly fast, features automatic builds and free image optimization. It still needs a number of improvements to catch up to competitors such as Netlify, though it’s a great start.

Features I’d like to see in Pages:

No JavaScript

Except for what CloudFlare seems to include by default (looking into this), there is no JavaScript used on this site. JavaScript has gotten out of control in my opinion.

This may change in the future though for some trivial elements. I like AlpineJS, and I really want to learn more about web animation.

Conclusion

New design, insane speed, no JS or hosting to worry about, better authoring experience - This is a big upgrade over WordPress.