Server infrastructure

Back to Projects

The web is a cool and swag place. If you want your own place on the web, there are two ways of doing it: buying a pre-made website (there are many companies that provide this service)¹ hosted in the cloud, or host your own.

I chose to host my own. I'm thinking about eventually trying to pursue a career in Linux System Administration, so setting up my own web server will be some good experience.

Hardware

This server is hosted on a Thinkpad X201 from 2010. It has an Intel Core i5 M560 (First gen Core i series!) that goes up to 2.67GHz, and has a maximum amount of 8Gb of RAM at 1066MHz. It has a cheap modern SATA SSD. Most importantly, it does not have a screen (see: My Laptop).

Software

The server is running Debian 12. This is a very common distribution of Linux for servers to run, because of its stability and large community. I interface with the server from the comfort of my desktop computer, using SSH to access a remote terminal over the local internet. Right now, I am editing this HTML file inside of the Vim text editor, running on a remote terminal session! The server doesn't need a screen, because I can do anything and everything from right here.

What is a reverse proxy?

Since all web traffic happens over a single port (443 for HTTPS), and you cannot have multiple processes bound to a single port, if I want to have multiple web services running I need to use a reverse proxy to be able to take all the traffic from port 443 and internally route it to a different service based on the URL and domain. For example, https://linh.art proxies you to a static file server, while https://vault.linh.art proxies you to the Vaultwarden service running on the same machine.

As a reverse proxy, I am running Caddy. I tried running Traefik, but I couldn't get it to work properly. I tried to run Caddy as a Docker² container, but it for whatever reason didn't play nice with my other Docker containers so I switched to the native Debian package version.

The design of this site

Like most sites, this website is made out of HTML, CSS, and a little bit of JavaScript. I had no experience in HTML or CSS when starting this project, so it's been quite the learning experience. Each page of this site has 3 main parts: the header, the content, and the footer. The header and footer are static across all the pages on this site, and the HTML for them are actually injected into the HTML files when Caddy serves them to you using the Templates feature. You can actually find the files at linh.art/header.html and linh.art/footer.html. The header uses JavaScript to detect which page you are on and change the color of the tab (Look at the top bar, the "Projects" button is green!).

The styling of this site is relatively bare, but some CSS is needed for the top bar, and for the accordian menus and the image gallerys in the Spider pages and Projects page. I just kinda ripped them from W3Schools tutorials. And of course, who can forget the color scheme! I am quite fond of the Catppuccin family of color schemes, and their light Latte theme works quite well.