Every few months, I redesign my blog.¹ It’s becoming a bit of a tradition now and I do it each time I feel the site is becoming outdated or boring, which seems to be pretty frequent.

Sometimes, I see a site that I really, really love and I [steal] get inspiration from it to redesign my own (like the last time), or I get reminded by some really jawdropping websites that my work is futile and insignificant compared to the really talented designers out there :)

So, naturally, I decided to try to fix that.

Background

Last time, I changed it to use TailwindCSS for styling, but the base framework was still Next.js, which I was pretty familiar with. This time I wanted a challenge.

So, I perused my To-Do list of technologies to learn, and I found Astro. Astro has been getting a lot of hype recently so I decided to give it a try. I cloned Maxi Ferreira’s awesome blog template and started configuring.

Migrating from Next.js

Coming from Next.js, a framework that has had 14 major versions by now and is widely accepted to be the standard for React, there were a few things to get used to.

1. Error handling

First of all, the Astro dev server doesn’t have much error handling. A simple dependency issue could knock out the whole server and leave me wondering why on earth it wasn’t hot reloading.

It makes sense that because Astro is still quite new it might not be as battle ready, but still… I love my hot module reloading.

2. Config reloading

Something that baffled me at first is how my .env files reloaded the server, but modifying arguably a more important file (astro.config.mjs) didn’t. This isn’t very important in the grand scheme of things, but it’s still something I miss from Next.js.

3. Svelte & theme toggling

The template from Maxi Ferreira includes a Svelte file (another framework that’s on my To-Do list) to handle interactivity. More specifically, the theme toggle button.

Now, I tried to convert it to React, as any developer would when met with an unknown language, but without my fancy component libraries I decided to remove the theme toggle altogether. I converted the site from using a theme-{x} class to simple CSS media queries, and left it at that.

In the previous version of my site, the main heading of the homepage acted as a theme toggle until I converted it to a confetti machine. 🎉

Homepage

The initial homepage from the template is pretty bland. It’s basically just a link to the GitHub repo. So, I decided to completely rewrite it, and give writing raw CSS again a try.

I decided to add a funky criss-cross pattern so I experimented with the skewY CSS effect and it turned out alright:

Conclusion

I redesigned my website in Astro, and I’m pretty happy with how it turned out. I think it’s gonna be the next big thing, but as always with JavaScript framework there’s no guarantees! :P