The Ins and Outs of my Personal Website

May 21st, 2025 - Present

As you are perusing my personal site, you might be asking yourself: "Man this site sure is nifty. I wonder if he's using Wix or SquareSpace for this?" It's a fair question to ponder, and I am happy to answer it.

My personal site used to be hosted on Wix. I did this for about a year before I cancelled the subscription and took it down. Some time then passed, and I found myself building up my homelab. I then hatched an interesting project for myself: what if I hosted my own site on my homelab? To some, that may sound super boring, but to me it sounded like a fun challenge.

I started to build my site from scratch using Tailwind CSS. I found Tailwind CSS from HyperUI, as I was looking for pre-made components to use on my site. I put all of my files onto my server, and ssh'ed into them using my Linux laptop and VS Code. From there, I was able to quickly piece together the outline of my site, and soon after got most of it up and running.

We've covered of how I built my site, but now I want to talk about how it's actually hosted. This will cover what my site is using from my homelab, not the homelab itself. To learn more about my homelab, check out the article I wrote on my homelab. Below is a rough diagram of how my personal site is hosted on my homelab: A diagram of my personal site architecture.
It shows how my homelab connects to Docker and hosts my personal site,
then how in Docker I host NGINX, Matomo and Caddy to run various parts of the site. I am still rather new to Docker and web hosting, but I will do my best to explain how all of this works.

My homelab system hosts Docker and the static site's files
Docker hosts the following containers:
- Caddy (for reverse proxy)
- NGINX (for serving the static files)
- Matomo (for analytics, explanation as to why further on)
NGINX pulls the static site and hosts it on the given port
The site hosts JavaScript from Matomo for analytics later

All of this comes together to form the site you are currently viewing!

One of the containers that I am using Docker to host is called Matomo. If you aren't familiar with Matomo, it is an open-source web analytics platform. It's basically Google Analytics, but open-source and can be self hosted. I've added it to my site so I can track views on my articles. I chose it because I wanted to be able to self host my analytics tool.

Before I wrap up this article, I want to talk about why I built my site. The main reason was to have a place to host my resume, create a blog, and talk about my passions (aka projects). I feel like I have a lot of knowledge that I want to share with the world, and this was one of the ways I could do that.

I also added some testing tags throughout the site for my automation examples to use. That way I know the examples will always work because it is using my site as a test subject. To learn more about my automation framework, check out this article.

Thank you for reading!