I’ve recently created this personal website as my portfolio, a place to share thoughts, and a hub for various guides and random thoughts. Hopefully, one day, I’ll have enough content here to split out to other sites, but we’ll see how it goes!

This post is a high-level guide on how I’ve put this all together, I’ve documented my journey here, and if you’re reading this, I hope it helps you get something going for yourself!

TL;DR

#

• Hugo + Blowfish
• Code in GitHub
• GitHub actions to deploy to Firebase
• DNS managed in AWS Route 53

The Core “Stack”

#

I don’t think this is technically a tech stack, but below is an outline of the frameworks I used to get this site up and running.

Hugo

#

This is my first time using Hugo (or building any “real” website), and it’s been such a quick workflow. This site was previously built with just HTML/CSS/JS all manually put together by me, so it was pretty mindblowing to see a static site generator in action. The party line for Hugo is that it’s “an incredibly fast and flexible static site generator, making it a solid choice for building a site from scratch” however, to be honest, I haven’t got a basis for comparison. That said, if I’ve worked through it so quickly, that’s got to say something about its ease of use!

I used Winget to install Hugo, which you can do from a terminal (as admin) like this:

winget install Hugo.Hugo.Extended

Blowfish

#

Hugo requires a theme to go over the top, and for the theme, I went with Blowfish. I went with it mainly because it looked cool, but I also liked the number of options for some reasonably standard customisation. It’s super well-documented, and I’d highly recommend it just based on my experience. I did notice a few quirks here and there, but nothing that couldn’t be solved by a brute-force amount of Googling and YouTubing.

To get things going, I mostly followed the guide written by the author of Blowfish on his personal site here. However, I was on Windows, so there were a few things I had to do differently regarding the installation of Hugo (such as the Winget command above). As long as you’ve got Hugo and Git installed, you should be good to go. Follow the instructions exactly, and make sure you don’t skip the step around copying the config files (ask me how I know!)

Hosting and Deployment

#

Hugo and blowfish are all cool and all, but how did I get this thing online?

GitHub

#

All the site code is hosted on GitHub (in a private repo, sorry), with a CI/CD pipeline I set up using GitHub Actions. Whenever I push changes to the main branch, GitHub Actions automatically builds the site using Hugo. An issue I had here was mostly down to my own experience, but after initalising the git repo and generating the initial site with Hugo, it took me way longer than it should have to get my local reposotity to point to my repo in github. If I read the documentation properly, it likely wouldn’t have been an issue, but ain’t nobody got time fo’ dat. To summarise this step for you, here is what I needed to do:

1. When you create your Hugo site, make sure you give it the same directory name as your repo name. I’m not sure this actually matters, but it makes the most sence in my head.
2. Create the repo in GitHub as a blank repo, no README file.
3. On your machine, cd into the directory where you created your hugo site
4. Run the following commands to make the initial commit

git remote add origin https://github.com/[your-repo-name]/test.git
git branch -M main
git add .
git commit -m "Initial commit"
git push -u origin main

Deployment: Firebase Hosting

#

Once the site is built, it’s deployed to Firebase. Firebase offers reliable and fast hosting plus it’s so cheap that I don’t even know how much it actually costs. Integrating it with my GitHub Actions workflow was straightforward.

DNS: Managed with AWS Route 53

#

I’m using AWS Route 53 to manage the DNS and tie it together. Route 53 is a highly available and scalable Domain Name System (DNS) web service. Not for any specific reason, I just already had this domain registered over there. Once I was setup in Firebase, it was just a matter of updating the DNS records in Route 53.