Personal Website — Ian Watkins

I decided to rebuild my personal website from scratch. Why? Well, I’m a tinkerer for one, but I also really wasn’t as pleased with my first one any longer and wanted to rebrand, if you will.

On top of that, in the last few months I’ve been blogging on two different blogs and didn’t like having to manage that. I did so initially because my interests are so split, but it hit me recently that my personal website should be a representation of who I am - and I simply am driven by intellectual curiosity, which means I think and write about a lot of different topics.

I also really just wanted to build a cool website with features like giving the user multiple themes to choose from that are all beautifully rendered and fast. I built several from scratch and have a few of my favorite terminal themes as well. I find that sort of thing fun.

Below you’ll find information about how this site is built, for those who find that sort of thing interesting.

Stack

Astro with Content Collections and MDX support
Tailwind CSS v4 with CSS custom properties for a multi-theme system
Martian Mono (body, headings, UI) and GoMono Nerd Font (code blocks)
Multiple themes: Paper, Ink, Middle Earth, Moria, Godric, Rowena, Salazar, Helga, Catppuccin, Nord, Tokyo Night, Flexoki
Deployed via GitHub & Netlify

Design

The main thing I wanted with design was to feel both warm and technical, like a place you’d expect to find a long essay on philosophy or theology, a book review, or a recent programming project.

The theme system uses data-theme attributes on <html>, with all colors defined as CSS custom properties. Persisted in localStorage, respects prefers-color-scheme on first visit.

Otherwise, I honestly wanted to make the prose - that is, the text - the star. It’s why I used a friendly and easy to use font called Martian Mono for all text except the code blocks, which uses a coding font I personally use in my terminal called Go Mono Nerd Font. The code blocks also use syntax highlighting of the Catppuccin variety for most languages.

Content workflow

If you happen to be here because you’re curious how Astro or other static site generators work, I’ll give a quick bit of insight into that process.

First, you set up the repo and theme settings per your platform. Astro makes this very easy and has several pre-baked themes you can use for free - or you can build a full custom one like I did here.

Then you add content to your source folder, which is what the static site generator uses to build the site everytime you push an update via git. The public facing website is built in the distribution (dist) folder, so you never mess with the files there. Every time you add new content and push it to your remote git server, the generator wipes the dist folder clean and rebuilds it, all in seconds.

This is possible because you are building the site off of markdown files, which are plain text files on your machine. They are lightweight and universal - they’ll be around forever.

I personally use Helix currently as my terminal editor (used to be Neovim, but alas) and my flow below is based on that, but your command would change by which editor you use. Of course, you can use an editor like VS Code and not need to use the commands at all. You do you.

# Write a new post
hx src/content/posts/my-new-post.md

# make sure your frontmatter is correct
# write your post content
# save the file

# Commit and deploy
git add -p
git commit -m "post: my new post"
git push

Netlify (or GitHub pages) handles the rest. It’s super simple and blazing fast.