Infrastructure Firsthand
Building your own web presence is much more for a developer than creating a digital business card. It is a playground for experiments, a proof of craftsmanship, and often a small battle with infrastructure. In this article, I’ll take you behind the scenes of nicohartmann.dev. We’ll look at how an empty TypeScript file became a productive system, which tools pull the strings in the background, and what the fun costs monthly.
The Architecture: Why a Pure Frontend Site?
Before the first domain was registered, the framework was set. One central decision was: No classic backend. I deliberately chose a pure frontend architecture. The reason is obvious: speed and security are top priorities for a personal portfolio.
Without a database in the background (like with WordPress), typical security vulnerabilities like SQL injections are completely eliminated. Furthermore, statically hosted pages can be delivered extremely fast. All content, including my blog articles, exists as simple files. This makes the entire site portable, low-maintenance, and ensures performance that can hardly be achieved with dynamic systems.
The Frontend Foundation: Vite & TypeScript
I decided against heavy framework monoliths and instead relied on Vite as a build tool. Vite offers a lightning-fast Hot Module Replacement (HMR) experience. As a language, TypeScript was non-negotiable for me, because type safety saves hours of debugging time, especially when working with content and data models.
To bring this modern frontend to life, Node.js serves as the invisible but indispensable backbone of my development environment. Beyond acting as the runtime for Vite, Node.js enables me to automate build processes and manage dependencies with maximum efficiency.
For internationalization, I use i18next (i18j) to be able to offer the site in multiple languages without any problems. Since I like to write my blog articles in Markdown, I rely on react-markdown in combination with remark-gfm for the display. The content is rendered at runtime, whereby I overwrite the individual Markdown elements with my own Tailwind components. This gives me full control over the visual result without having to run a full-blown CMS.
The Server Guardian: Nginx & Certbot
To help the application see the light of day, Nginx serves as a reverse proxy on my VPS. It receives requests on port 80/443 and delivers the static frontend assets. Security is essential here: thanks to Certbot and the free certificates from Let's Encrypt, all traffic is encrypted via SSL, which is also mandatory for a .dev domain.
Communication: MailCow
A professional appearance needs its own email infrastructure. Instead of relying on expensive Google Workspace licenses, I chose MailCow. MailCow is a Docker-based mail server suite that brings everything: spam filters (Rspamd), webmail (SOGo), and a clear management interface. It runs as a separate container cluster on the same VPS.
The Hardware and the Costs
After the code worked locally, it needed a home. The choice of domain fell on nicohartmann.dev and nicohartmann.com. nicohartmann.de was unfortunately already reserved. Originally, I had attempted a try with Strato, but was disappointed by the slow processes and finally switched to Porkbun. The interface is clean, the prices are transparent, and the activation took only a few minutes. For hosting, I use the IONOS Package L (6 vCore, 8 GB RAM, 240 GB SSD). This offers enough performance for the website and the somewhat RAM-hungry MailCow server.
The monthly cost breakdown:
- IONOS VPS Package L: €5.00 monthly (€60.00 yearly)
- Domains (Porkbun): approx. €1.62 monthly (€19.47 yearly)
- Total costs: €6.62 per month
For less than the price of a streaming subscription, I have full control over my data (and thus yours too), my emails, and my entire web infrastructure.
Automation: Github Actions and Deployment
My workflow is completely automated. As soon as I push code to the 'main' branch, a GitHub Action kicks in:
- Build Process: The Vite app is built and the TypeScript types are checked.
- SSH Connection: The action connects securely via SSH to my IONOS VPS.
- Execution: A 'deploy.sh' script is executed on the server, which pulls, provides the new assets, and rebuilds the site.
Why this effort?
One could ask: "Nico, why don't you just use Vercel or Wix?" The answer is simple: Learning effect and independence. Through the manual setup, I learn how header configurations, caching, and DNS entries like DKIM or SPF really work. I operate a server that does exactly what I want, without vendor lock-in and at a fraction of the usual costs.
What’s next?
As you can see on PageSpeed Insights, the performance on mobile is currently still expandable; here I will definitely still turn the adjustment screws. Parallel to this, I am diligently collecting reviews from my past students to soon be able to integrate authentic experience reports. As soon as the number of projects and blog posts continues to grow, filtering will also become necessary to maintain an overview. Furthermore, I am thinking about a dedicated "Products" page where I present the tools and gadgets that I use daily and that really help me in everyday life.
The journey of this website has only just begun. See you in the next update!