The ins and outs of how I wrote and host this site myself

I first started down the path of having/maintaining a personal portfolio back in college, maybe early 2019 or something like that. Originally, the content was fairly minimal and the site didn't really have much beyond a few static pages showcasing personal projects and links to my social media profiles. Now, however, I've decided to expand upon the static pages and move towards more of a dynamic, controllable form - one that I can easily update and that can scale as needed. Having to rebuild the whole site just to change an image out was pretty annoying, and I didn't really enjoy working with the static site generators at the time.

Move forward a few months to a year or so later, and now I have moved entirely to a self-hosted site. This gives me the ability to control whatever I want. Now don't get me wrong GitHub pages would've honestly worked fine for such a simple site as this is, but I wanted to challenge myself to learn something new.

The Architecture

Believe it or not, the content you're looking at now is served from my home network on a set of 3 Raspberry Pi 4b's.

From top to bottom, their names are:

  • rpi0
  • rpi1
  • rpi2

rpi0 is the production server. This one hosts and serves the website. When a request is made to, this is the server that receives that request.

rpi1 is unused at the moment, but is intended to be a testing/quality server. This allows me to deploy code to a staging environment and do some thorough testing to ensure everything is working as expected.

rpi2 is solely used as a MySQL database. This database holds many tables, all of which are directly related to this website in some way.

These three Raspberry Pi's are connected to a PoE-enabled network switch.

And for what it's worth, rpi0 is the only server that is publicly accessible. Everything else is sectioned off and only allowed to communicate inside the LAN. Yay security.

The (Detailed) Design

The diagram below describes the basic architecture I designed and implemented.

A diagram showing how my portfolio's software stack is structured