How to rebuilt a personal website

The first website I ever had was built on wordpress; it was a way for my friends and me to write small articles in things we liked at the time (like the Lavender Town Syndrome - yes, it was a long time ago) and share it with one another. Since then, said website has changed and evolved. Through it all it at some point became my professional portfolio and, as such, changed what was required of it. It became a place to showcase all I did (and help me land a job); and so wordpress was left behind. Throughout the last 4 years it went through some major rewrites; this article is a way to log those rewrites and what I’ve learned along the way.

Timeline

I think there are mainly 3 major releases:

• Astro
• Laravel
• Hugo (the current one)

Astro

Astro is an awesome web framework that works really well with static content (which is baiscally all of my content). It worked pretty well with all my content collections and had pretty much all the extensions I needed, but I still needed to add custom extensions to remark to have it handle some iframe elements I needed in some articles (codesandbox and stackblitz embeds, basically). This ultimately led me to look for a more customizable solution (where I could easily build some more custom stuff). This leads us to the first rewrite of this version.

Laravel

Now, I hear you asking:

The honest answer to that is: why not? I believe that if you want to try new technologies (and can afford to - meaning probably don’t do this in a work production app), you probably should. I had been hearing of Laravel for a while and finally gave it a shot.

It was a really nice experience and it was really easy to add some more integrations like automatically adding photoswipe tags to each image in an article (I even made an extension for it). It also allowed me extra space to add some more quality of life stuff, like a search function using meilisearch and its laravel scout interface. Plus, Livewire is pretty cool to use (though I have my issues with it - to be discussed in a later post).

Ultimately, though, it was probably too much for a personal website; it had too much overhead to simply publishing content, mainly just updating the website (without using Forge or Vapor); containerising the application definitely helped, but in my opinion it still took too long and, after some more reflections, it was needlessly overcomplicated for a blog/portfolio.

Hugo

And thus we get to Hugo. I had heard of it in passing but had never really looked into it - so I finally did; it’s pretty cool. It:

• supports md files natively
• can handle tags and series automatically (taxonomies FTW) And best of all, it just produces a public folder with all static html that I can send off to a cloudflare pages project and call it a day. This allows me to do as much (or as little) customization to the output as I want (more on that in the next section). I believe it is (for my use case, obviously) the most compelling solution at this time (as proven in this article, I’m not against rewriting all of this at some point)

Overengineering simplicity

But it’s not over yet! You know how I said above that you should be able to experiment and have fun, right ? Well, let’s say I managed to find some fun stuff to do with this new setup. I’ll just list them here, because some of this stuff is interesting enough to get its own articles:

• client-only search using Lunr and AlpineJS
• automatic og (opengraph) image generation
• automatic photoswipe image rendering

And these are the potential things I might add later:

• newsletter subscription section
• automatic bluesky post with the new article
• and so much more

I will also look into having a self-hosted Github Runner if I end up reaching the limits of the free plan (though that should hopefully not happen)