I rebuilt my website

My website here has always been, more-or-less, just a little place for me to play around and try stuff. It has had many iterations over the years based on what I was interested in at the time and what I was learning. Recently, I decided I wanted to add this blog so I started the process to retool how I build the site.

Before we talk about that, though, just for fun Iā€™ll mention that since I created rewdy.com (now rewdy.lol šŸ˜‚), it has been built at some point with:

  • Regular old html
  • WordPress (many iterations)
  • Drupal
  • SymphonyCMS (I do not recommend, but was fun; all XSLT-basedā€¦)
  • A Nunjucks-based setup to build static html (most recent)

ā€¦and probably a few others Iā€™m forgetting. šŸ™ƒ

To add the blog, I tried a few things but ultimately ā€œlandedā€ on using Astro šŸš€!

What/why Astro?

According to the borg:

Astro is a web framework designed to build fast and content-focused websites. Itā€™s known for its ability to render components on the server, which means websites load quickly and have minimal JavaScript overhead. This makes Astro ideal for content-heavy websites like blogs, marketing pages, and e-commerce sites.

Astro is one of the many new-breed, web front-end frameworks that give you the ability to do your SSR + (optional) client-side JS to generate performant websites. Some things I like about Astro are:

  • Itā€™s not tied to any one UI framework. You can use: React, Vue, Preact, Svelte, or Solid (and maybe others unofficially). I am a React person, but itā€™s nice it will handle whatever.
  • No complex graphQL/other querying technology for simple, static websites. I have previously played around with Gatsby (conceptually very similar to Astro), and while there are things about it I like, the overhead/boilerplate for querying simple markdown content was kind of ridiculous. (I actually built this whole site with it and hated the result so much I never published it.)
    For blogs or other collections of content, Astro has ā€œCollectionsā€ that end up being super easy to set up, requiring 0-20 lines (ish) of config and thatā€™s it. For me, this is much better.
  • Overall, itā€™s fast and painless to do mostly anything you want. Would recommend.

A few light learnings

You might not need React*

*Or whichever framework you normally use.

Astro fully supports using React components in your content. This is really nice for scenarios where you want client-side JS with whatever interactions are required. For this site, I started out using React, then as I built more I realized that I really didnā€™t need itā€”it is a static site after all. At some point I switched over to using all .astro files (which are basically JSX without state) and that was totally sufficient.

Image handling is great for most sites; not all

I would say image handling in Astro is great, so long as youā€™re not building a photo-based website. I didnā€™t deal with this this on this website, but I built a website for my sisterā€™s tattoo shop using Astro as well. For that site, it took a lot more effort to get photos to do what I wanted them to. I have used static site generators in the past (maybe Gatsbyā€¦ ?) that do a lot more automatic processing of the images for you (or even that have photo gallery plugins to do all the heavy lifting!). In Astro, loading a bunch of image files to create a dynamic photo gallery wasnā€™t super straight forward. This could have been my own ignorance, but I donā€™t think that was entirely the case.

This really wasnā€™t a big deal to me because it did everything else so well, but mentioning here just for the full picture.


And thatā€™s about it! If youā€™re curious and you like to poke around šŸ«µ, the source code is all available on GitHub.

Hope you like āœŒļø šŸ’™.