Tech
tl;dr - Components
- Orchestrator - Docker in Swarm mode
- Web Server - Static Web Server (abbr. sws)
- Routing - traefik
- Security - fail2ban in Docker
- Website Style - LaTeX.css
- Blog Site Generator - zas
- Time Tracking - kimai in Docker
- Automation - GitLab CI/CD
Backstory
I created dibiasi.dev to act as a kind of CV. Having started freelancing in January of 2023, I needed to have some form of public presence on the internet. I always loved minimalistic and functional websites, like dave.cheney.net, ianyh.com and delta-xi.net.
The tech stack should fulfill the following criteria:
- Easily maintainable
- Fully containerized
- KISS
This article is not a tutorial on how to setup a webpage using Docker, but rather acts as a collection of ideas for the reader to use in his own projects.
Container and Orchestration
The base technology that powers all components of this server is Docker, more specifically Docker in Swarm mode. HashiCorp's Nomad and some form of Kubernetes have also been considered, but these more advanced orchestrators are not great for setups with a very limited amount of nodes¹. Docker in Swarm mode is also considered a more "production grade" approach to orchestrating container, as compared to using docker compose.
Setting up a Docker Swarm stack is relatively simple, when compared to the other aforementioned orchestrators. A great resource on how to get a stack up and running quickly, is Docker Swarm Rocks. This site may be a bit outdated, but nevertheless acts as a great starting point to learn about Docker Swarm.
It also describes how to setup an HTTP proxy with traefik. Some of the infos regarding traefik container labels are outdated, please crosscheck with the official traefik documentation.
traefik proxy is used to route the traffic from the public web, to the correct containers. Every container that serves webpages (sws and kimai) uses TLS (HTTPS), with certificates provided by Let's Encrypt. If you're interested on how to setup a traefik instance, have a look at the official documentation and this tutorial on DigitalOcean.
Website and Blog
A static website has many advantages, the main one being loading times i.e. speed. Personally, I'm not the biggest fan of big, bloated and often short lived Javascript or Typescript frontend frameworks, especially for very basic web presences, such as this site.
The CV as well as the imprint (impressum in german), have been created by writing HTML by hand. For styling LaTeX.css is used, which is a great and easy to use CSS library by Vincent Dörig and contributors. The clean and relatively formal look of academic LaTeX papers, combined with Tufte esque sidenotes, is great for publishing articles . To learn more about the great Tufte Handout style, have a look at R Markdowns Tufte style, Tufte CSS and tufte-latex
Each article of the blog, also called /dev/null, is written in Markdown for convenience. zas is used to generate valid HTML files from every individual Markdown file. A custom layout is used to style the generated HTMLs to look like the main page. zas was chosen over Hugo, Jekyll and others, because of its extremely simplistic approach of generating HTML, templating and configuration.
Blog content generation workflow:
- Create Markdown file / Write article
- Run zas to generate HTML files
- Add generated files to website's Git repository
HTML pages written by hand, as well as generated blog pages, are served by sws. SWS was chosen over more conventional web servers (Apache HTTP Server, Nginx), because of it's simplicity, speed and feature list.