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 āļø š.