Previously, I ran my website with a PHP-based CMS on a shared host and since quite some time I wanted to port it to a static site generator and serve it off of AWS S3. Finally, I found the time to do it. This post summarizes what and why I did my website as it is now, and what process and tools I used to achieve it.

Setting the Goal

With my old website running on Kirby CMS for years I had to maintain a shared host that runs it, and have Cloudflare setup to have improved loading times. Nevertheless, I frequently had outages due to issues on the shared hosting provider. Also, as I wanted to develop new features and improvements for my website I felt I had to invest a significant amount of time into the platform again, to understand and move forward. And spending time in the PHP ecosystem is something I did not want to do anymore. So something had to change.

As rebuilding a system is always a huge effort, when setting out to do so, it is especially important to be clear about the why, so that you can evaluate whether rebuilding is worth it or not. The following aspects were important to me when rebuilding the website:

1. It needs to be super fast all over the planet.
2. No downtime. Not hackable.
3. A fresh design. I wanted a simple and lean design.
4. Easy maintenance. Once built, I don’t want huge efforts in maintaining and enhancing the website.

The first two are easy to achieve by using a static site generator, which I set out to do anyways. Though, with the variety of static site generators available, it was a challenge to decide for one that suited my needs.

Creating a fresh design was a little trickier for me. While I do have a trained eye to judge whether a design looks good or not in the meantime (being an engineer, that was really hard in the beginning!), I still don’t find myself to be very creative when it comes to creating a fresh design. I usually look for things that I like on platforms such as Dribble or Awwwards and try to compose them in a way that still looks good. Over a couple months, each time I came across something I liked and I could envision, I collected it in a GitLab issue with a screenshot.

The fourth requirement of easy maintenance will tell over time. Nevertheless, during the implementation I took care to make things modular and create reusable components.

Beginning the Journey

With all that in mind, I spent some months looking for inspiring designs, checking out static site generators and even doing a small proof of concept with some to get a hands-on feeling for the platform. In the end, I decided to settle with Hugo as static site generator as it seemed the best fit.

Then, a weekend that I could spare out arose so I planned on using the whole weekend to get the coding done. To prepare for the coding hackathon I created small stories that I need to get done with clear acceptance criteria in my GitLab issue tracker. When the weekend came, I knew all I needed to do in order to rebuild the website. From Friday afternoon until Sunday evening were around 30 hours I could use. Before I started coding, I repurposed our living room window to an agile board with all the tickets I had created in advance:

This gave me a good overview of what needs to get done in order to flip the switch to the new website. As I coded I discovered some more things I need to take care of and added them as well. I continuously challenged whether I really need to build some of the things I set out to for the relaunch, or whether I could postpone them. Due to the tight timeline of less than 30 hours I could not implement everything I wanted to do.

Ending the Journey

On Sunday evening though it became evident that I could not yet flip the switch as quite some things were still missing that required more effort. Nevertheless, the majority of coding work was done and that was a great success. I had also already setup a deployment pipeline to a staging environment, so from here it would now go in smooth iterations.

I then did most of the remaining tasks (especially content migrations and design quirks) during my commute. Eventually I decided it was time to flip the switch and here we are now.

I still have lots of ideas and thoughts in the backlog I want to do, so there will be more updates to the site in the near future. The platform I have built suits me well in that I have setup a living style guide to streamline the design development and modular Hugo templates that I can reuse. With Hugo templates being okay, I miss a more component-oriented approach though, as the templates are not React components, which would be way easier to deal with and compose :-)