Building this site


As I mentioned before to consider this done I had two goals:

  1. Have an /about page
  2. Have a list of posts and the ability to view them

This post walks through some of the choices that I made, mostly so that I can look back in the future and criticise my lack of foresight.

Stack

Now off the bat I said I wanted to keep things simple - but I also couldn’t help myself from trying out a new framework. I know, I know, “the best tool is the one you know” or however the saying goes but I thought it was important to scratch that “shiny object syndrome” itch.

As a compromise, I settled on Astro as supposedly being a relatively straightforward option. I’d read good things about it, I admired the 0 javascript by default approach, and also it seemed like an “oven-ready” solution for a content-driven site like this one (for the moment). With the release of Astro 5 imminent, I even went for a beta version because why not.

I found it incredibly easy to get setup and also quite easy to understand. TypeScript support out of the box and some other nice batteries-included features like an RSS feed (huh?).

Deployment

At work I’m an AWS person - often the AWS person for many things which can be a bit scary sometimes but we’re a small team and needs must. Anyway, this meant that for some previous attempts I thought it would be cool to get setup in AWS with the CDK for “upskilling”. That was a terrible idea and I’m never doing it again.

Instead I’ve given in to the adverts from the Changelog podcast and decided to give Fly a go. They’ve had good things to say about its flexibility but it also promised to get me going quickly with minimal faff - exactly what I need to meet my 2 goals.

Thankfully, they lived up to their word and the site was live in a few minutes. They had a UI tool for syncing to a GitHub repo in Beta and it worked seamlessly, even creating a Dockerfile within the project which played nicely with Astro for me automatically. Setting up the custom domain afterwards caused a little bit of a faff but that was mostly because I had also decided to move my domains away from SquareSpace1 to Porkbun and that process was a little janky itself.

The actual deployment story for the site is still a bit rudimentary but it can be worked on later. For now it looks very simple:

  1. Write something in Obsidian
  2. Copy/paste into project
  3. git push to main

I hate that I end up with two copies but the writing experience in Obsidian is much nicer and somehow less distracting than having a whole project open2. The next optimisation is going to be figuring out how to just directly connect Obsidian to where my website content lives. I don’t doubt that it’s simple it just wasn’t the goal.

Design

I suck at design.

I’d like to work on getting better at it3 but for now I just wanted to keep things simple and functional. A nice dark colour with some light text, and a nice light colour with some dark text. One accent colour.

I picked the accent colour first as rebeccapurple, this is purely because I recently learned about the story behind it and enjoyed the sentiment.

For the lights and darks I spammed coolors for about 30 seconds until I had a couple locked in and was satisfied. Cue some accessibility checks on the contrast and that was job done. Sorry if it looks crap but it’s good enough for me.

My one flourish here is the light/dark mode toggle and excessive use of the new light-dark() CSS function to automatically handle the theming for the whole site. It was fun and easy so I was fine with the minor detour.

Wrap-up

It’s plain and simple but it’s live and mine so I’m happy. Hopefully I can continue to write and channel some more energy into creation rather than consumption but this feels like a good start.

Footnotes

  1. RIP Google Domains you were a real one.

  2. I definitely do not need more temptation to fiddle with CSS or JS widgets when it’s time to conjure words for the screen.

  3. Along with so so many other things.