Luke.Work Version 4
April 22, 2021
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.
- Built with 11ty
- Tailwind CSS framework
- None of the minimalist white background garbage I had before
- Switch to a new permalink structure
- AVIF-first images with WebP and JPEG fallback
- Hosted on CloudFlare Workers or Pages
Built with 11ty
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.
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:
- Manually trigger rebuilds
- Trigger rebuilds via webhook
- Form support
- Turn off default URL (yourproject.pages.dev)
This may change in the future though for some trivial elements. I like AlpineJS, and I really want to learn more about web animation.
New design, insane speed, no JS or hosting to worry about, better authoring experience - This is a big upgrade over WordPress.