TL;DR: They rule.
Table of contents
Open Table of contents
Motivation
I’ve been using a couple of different stacks lately for front-end, mainly static webpages. Namely; Vue/Vuetify on DigitalOcea, and Notion/VanillaJS pages hosted on Notion/CloudFlare. Both of these have had their pros and negatives. With Vue/Vuetify you get a powerful combo that looks nice right out of the box via MaterialDesign. This also simplified some of the styling on pages. Via Notion you are heavily constricted on style, but you get something that works right out of the box, and the biggest positive is that it functions as a real-time CMS system. You can create new pages and content on the fly and see immediate results. Adding reactivity via javascript is restricted to a few plugins and third party vendors writing integrations for things like Newsletters.
Enter JamStack
It’s a new paradigm but I have come to quickly realize it is something I have been loosely looking for in my adventures programming. There are several Jamstack frameworks out there including the popular Jekyl and Hugo frameworks. Newer intros to the jamstack ecosystem include Astro, Gridsome, and VuePress. Jamstack websites allow you to fully decouple your frontend from your backed, and be able to host it anywhere in the world, with easy switching between hosting solutions. They also offer blazing fast sites because of how the content is structured, they have also managed to save users a lot of time when it comes to thiking about SEO and optimizations. In short, they allow you to build better websites, faster, and use a variety of useful tooling along the way, but not in a manner where the tooling becomes a hindrance to the process and simplicity.
First Attempt
This website was created using an astro theme and a cloudflare page. That’s it. It took me about 2 days to find my way around a familiar Vue-like ecosystem that is built into Astro. As well as familiarize myself with the fantastic TailWindCSS library. These two main tools allowed me to quickly spruce up my starter page, add functionality, and be amazed at how little ‘magic’ seems to be involved in the setup of the framework. I have nightmares about webpack configs.
Fast Deploy
After figuring out what I wanted my site to look like locally it was a BREEZE to get automated builds working in cloudflare. And since my custom domain was already setup on cloudflare it was as easy to point it to the new site. Within a day I had made 6 painless, git push powered, deployments.
Conclusion
I am a huge fan. I have tried Angular, React, Vue, Vuetify, Material Design, Bootstrap 3/4 etc. I’ve even become so dismayed with this JS ecosystem that I went backward to a CMS style webpage with Notion. Finally I have found something that bridges this gap of real-time content moderation and JS-powered dynamic simplicity. TailWind CSS and Astro just get stuff done, start out small, and add complexity as you need it.