Infrastruktur aus erster Hand

Der Aufbau einer eigenen Web-Präsenz ist für einen Entwickler weit mehr als das Erstellen einer digitalen Visitenkarte. Es ist ein Spielplatz für Experimente, ein Beweis handwerklicher Fähigkeiten und oft ein kleiner Kampf mit der Infrastruktur. In diesem Artikel nehme ich dich mit hinter die Kulissen von nicohartmann.dev. Wir schauen uns an, wie aus einer leeren TypeScript-Datei ein produktives System wurde, welche Tools im Hintergrund die Fäden ziehen und was der Spaß monatlich kostet.

Die Architektur: Warum eine reine Frontend-Seite?

Bevor die erste Domain registriert wurde, stand das Grundgerüst. Eine zentrale Entscheidung war: Kein klassisches Backend. Ich habe mich bewusst für eine reine Frontend-Architektur entschieden. Der Grund liegt auf der Hand: Geschwindigkeit und Sicherheit stehen bei einem persönlichen Portfolio an erster Stelle.

Ohne eine Datenbank im Hintergrund (wie bei WordPress) entfallen typische Sicherheitslücken wie SQL-Injections komplett. Zudem lassen sich statisch gehostete Seiten extrem schnell ausliefern. Alle Inhalte, einschließlich meiner Blogartikel, liegen als einfache Dateien vor. Das macht die gesamte Seite portabel, wartungsarm und sorgt für eine Performance, die mit dynamischen Systemen kaum zu erreichen ist.

Das Frontend-Fundament: Vite & TypeScript

Ich habe mich gegen schwere Framework-Monolithen entschieden und stattdessen auf Vite als Build-Tool gesetzt. Vite bietet eine blitzschnelle Hot-Module-Replacement (HMR) Erfahrung. Als Sprache war TypeScript für mich nicht verhandelbar, denn die Typsicherheit spart gerade bei der Arbeit mit Inhalten und Datenmodellen Stunden an Debugging-Zeit.

Damit dieses moderne Frontend überhaupt das Licht der Welt erblickt, bildet Node.js das unsichtbare, aber unverzichtbare Rückgrat meiner Entwicklungsumgebung. Node.js fungiert hierbei nicht nur als Laufzeitumgebung für Vite, sondern ermöglicht mir auch die Automatisierung von Build-Prozessen und das effiziente Management von Abhängigkeiten.

Für die Internationalisierung nutze ich i18next (i18j), um die Seite problemlos mehrsprachig anbieten zu können. Da ich meine Blogartikel gerne in Markdown schreibe, setze ich auf react-markdown in Kombination mit remark-gfm für die Darstellung. Die Inhalte werden zur Laufzeit gerendert, wobei ich die einzelnen Markdown-Elemente mit eigenen Tailwind-Komponenten überschreibe. Das gibt mir volle Kontrolle über das visuelle Ergebnis, ohne ein vollwertiges CMS betreiben zu müssen.

Der Server-Wächter: Nginx & Certbot

Damit die Applikation das Licht der Welt erblickt, dient Nginx als Reverse Proxy auf meinem VPS. Er nimmt die Anfragen auf Port 80/443 entgegen und liefert die statischen Frontend-Assets aus. Sicherheit ist dabei essenziell: Dank Certbot und den kostenlosen Zertifikaten von Let's Encrypt wird der gesamte Traffic über SSL verschlüsselt, was bei einer .dev Domain auch zwangsläufig notwendig ist.

Kommunikation: MailCow

Ein professioneller Auftritt braucht eine eigene E-Mail-Infrastruktur. Statt auf teure Google Workspace-Lizenzen zu setzen, habe ich mich für MailCow entschieden. MailCow ist eine Docker-basierte Mailserver-Suite, die alles mitbringt: Spamfilter (Rspamd), Webmail (SOGo) und eine übersichtliche Verwaltungsoberfläche. Sie läuft als separater Container-Verbund auf demselben VPS.

Die Hardware und die Kosten

Nachdem der Code lokal funktionierte, brauchte er ein Zuhause. Die Wahl der Domain fiel auf nicohartmann.dev und nicohartmann.com. nicohartmann.de war leider bereits reserviert. Ursprünglich hatte ich einen Versuch bei Strato gewagt, war jedoch von den langsamen Prozessen enttäuscht und wechselte schließlich zu Porkbun. Das Interface ist sauber, die Preise sind transparent und die Aktivierung dauerte nur wenige Minuten. Für das Hosting nutze ich das IONOS Paket L (6 vCore, 8 GB RAM, 240 GB SSD). Das bietet genug Leistung für die Website und den etwas RAM-hungrigen MailCow-Server.

Die monatliche Kostenaufstellung:

• IONOS VPS Paket L: 5,00 € monatlich (60,00 € jährlich)
• Domains (Porkbun): ca. 1,62 € monatlich (19,47 € jährlich)
• Gesamtkosten: 6,62 € pro Monat

Für weniger als den Preis eines Streaming-Abos habe ich die volle Kontrolle über meine Daten (und somit auch deine), meine E-Mails und meine gesamte Web-Infrastruktur.

Automatisierung: Github Actions und Deployment

Mein Workflow ist komplett automatisiert. Sobald ich Code in den 'main'-Branch pushe, springt eine GitHub Action an:

1. Build-Prozess: Die Vite-App wird gebaut und die TypeScript-Typen werden geprüft.
2. SSH-Verbindung: Die Action verbindet sich sicher via SSH mit meinem IONOS VPS.
3. Execution: Auf dem Server wird ein 'deploy.sh' Skript ausgeführt, das pullt, die neuen Assets bereitstellt und die Seite neu baut.

Warum dieser Aufwand?

Man könnte fragen: „Nico, warum nutzt du nicht einfach Vercel oder Wix?" Die Antwort ist simpel: Lerneffekt und Unabhängigkeit. Durch das manuelle Setup lerne ich, wie Header-Konfigurationen, Caching und DNS-Einträge wie DKIM oder SPF wirklich funktionieren. Ich betreibe einen Server, der genau das tut, was ich will, ohne Vendor-Lock-in und zu einem Bruchteil der üblichen Kosten.

Wie geht es weiter?

Wie man bei PageSpeed Insights sieht, ist die Performance auf Mobile aktuell noch ausbaufähig, hier werde ich definitiv noch an den Stellschrauben drehen. Parallel dazu sammle ich fleißig Bewertungen meiner vergangenen Schüler, um bald authentische Erfahrungsberichte integrieren zu können. Sobald die Anzahl der Projekte und Blogposts weiter wächst, wird zudem eine Filterung notwendig werden, um die Übersicht zu behalten. Darüber hinaus denke ich über eine eigene „Produkte“-Seite nach, auf der ich die Tools und Gadgets vorstelle, die ich täglich nutze und die mir im Alltag wirklich helfen.

Die Reise von dieser Webseite hat also gerade erst begonnen. Wir sehen uns im nächsten Update!