The Why

I’ve wanted to create a personal website for a loooong time now, but I never seemed to have either enough time or there were gaps in my tech know-how that seemed like too much effort to overcome. Then one week, I finally sat down, spent the necessary time to fill in the gaps, and built the actual project.

I created this website for two reasons.

Firstly, I wanted to challenge myself technologically. Using Hugo - a static site generator - is not particularly difficult in of itself. They have great documentation and the community surrounding Hugo is large enough that my more random and obscure questions have mostly been run into before by someone else. The challenge is putting all of the component parts of the project together into a greater ecosystem that just works. I’ll go into further detail on that later.

The second reason is that I wanted a public place that I can use to host my content and share my ramblings/projects. I want to be more of a creator than just a consumer. I want to not only technologically challenge myself, but also challenge myself to create well written and interesting ideas to ultimately be shared to the wider internet.

The What

The criteria that I have for what constitutes a good result for this project are the following:

  • Pretty - The website needs to look good. A good looking website is more engaging and easier to look at.
  • Maintainable - I don’t want to be using more time than I need to fix bugs in my systems.
  • Performant - The only slow part of the systems should be me when I’m trying to write new content.
  • Hackable - If I want to make changes to my systems, I can.
  • Cheap - If it is free it is for me.
  • Interesting - I want to use systems and technology that interest me. I’m trying to challenge myself after all.

It’s a lot the ask for, but it can and will be done!

The How

This is the fun part.

So I began the project with a couple of the components already in place. I had built my own server - I will write about that project in the future - from scratch a few years ago and offered powerful, hackable, and maintainable hardware that I can build my project upon. It runs Proxmox which allows me to create virtual machines and/or containers to my heart’s content. Additionally, I already had Traefik, a reverse proxy also running on Proxmox container, that handles routing of incoming and outgoing requests for other services I host.

I knew from the beginning that one of the knowledge gaps that I needed to fill in was how I was going to deploy and serve my website, but I ended up saving that for the vary end of the project.

I started by researching static site generators and I ended up going with Hugo as it open source - cheap and hackable - and written in Go which is very performant and interests me as I’ve been meaning to learn a little Go.

I then found a Hugo website theme that I liked called hugo-PaperMod. This theme allowed me to make a pretty website without a bunch of extra dependencies while having a number of features that I was looking for.

I combined the two and began building a website. It took me a while to get the hang of Hugo and its concepts. I struggled most with how Hugo’s built in functions work within the context of the templating engine. They threw me off for a minute, while I got used to the syntax and some of Go’s terminology, but I eventually got the hang of it. One of the small features that I’m proud of lives in the light and dark toggle. I did not program the base logic, but I tweaked so that when the toggle is clicked the logo and favicon changes to the respective dark or light mode color. Feel free to give it a try!

Once the website was in a state that thought was presentable I began researching how to best serve it. I ended up going with Nginx as it configurable, performant, and interesting to me. I spun up a new host on my server, installed Nginx, and read its documentation until I was able to write a configuration file http. All of that barely took up any time and now one half of my knowledge gap was filled.

The other half of my knowledge gap was figuring out a way to quickly deploy the static site to my host machine. Hugo’s documentation ended up having the answer. It recommended a number of methods of deployment, but one of the simplest suggestions it had was to use rsync to synchronize the compiled directories of my development and host machines. I wrote the below shell script and voilà, I had a maintainable and hackable deployment process.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

#!/bin/sh

USER=example_user
HOST=example_host
DIR=/path/to/directory # the directory where your website files should go

hugo --cleanDestinationDir -e production && \
rsync -avz --delete public/* ${USER}@${HOST}:${DIR}

exit 0

The last piece of the puzzle was editing the configuration file for Traefik so that it would allow incoming requests from outside internet to be directed correctly.

Just like that, all my criteria had been hit and I had a functioning personal website. The project is not over yet as I plan to continue to add more content and features to the site as I write and get inspired by other blogs/websites around the web.

Technology

For those that are curious, below is a concise list of the tech that went into this project.