Was ist das?

Dieses Portfolio selbst. Eine statisch generierte Website mit Astro, die meine Projekte und Blogposts präsentiert. Kein CMS, kein Framework-Overhead — nur MDX-Dateien, die zum Build-Zeitpunkt zu HTML kompiliert werden.

Die Seite läuft auf einem Hetzner-VPS hinter Nginx und WireGuard-VPN , mit automatischem Deployment per GitHub Actions . Während der Entwicklung ist sie nur über VPN erreichbar.

Architektur

  • Static Site Generation mit Astro 5 — alle Seiten werden zum Build-Zeitpunkt erzeugt. Kein Node.js-Prozess auf dem Server, kein Datenbankzugriff, minimale Angriffsfläche.
  • Content Collections für Blog und Projekte — typsicheres Frontmatter mit Zod-Validierung, MDX für interaktive Komponenten wie Glossar-Referenzen.
  • Glossar-System — zentrale Definitionen in TypeScript, die per <Term>-Komponente in jedem Artikel referenziert werden. Desktop: Sidebar, Mobile: Dialog.
  • Floating Toolbar — Theme-Toggle (Dark/Light), Akzentfarb-Picker (HSL-Ring), Glossar-Button. Expandiert per Klick, schließt bei Klick außerhalb.
  • QR-Code Generator — interaktives Tool unter /qr-generator, das komplett clientseitig läuft.

Infrastruktur

Zwei Hetzner-Server, verbunden über ein privates Netzwerk (10.0.0.0/16):

  • Portfolio-Server — Nginx als Reverse Proxy , Let’s Encrypt für TLS, liefert statische Dateien aus /var/www/mathis-adler.dev/dist/
  • WireGuard-Server — VPN-Endpunkt für Split-Tunnel-Zugang, dnsmasq für DNS-Overrides im VPN

Die Trennung in zwei Server isoliert den VPN-Dienst vom Webserver. Clients im VPN erreichen die Services über interne IPs, während der öffentliche Zugang per Nginx gesteuert wird.

Deployment

Push auf main löst einen GitHub Actions Workflow aus:

  1. npm ci && npm run build — Astro kompiliert alle MDX-Dateien zu statischem HTML
  2. rsync --delete dist/ — nur geänderte Dateien werden übertragen
  3. Nginx liefert sofort die neuen Dateien aus — kein Neustart nötig

Was ich gelernt habe

  • Astro’s Content Collections mit Zod-Validierung fangen Frontmatter-Fehler zur Build-Zeit ab — kein “undefined” in Produktion.
  • MDX erlaubt Astro-Komponenten in Markdown. Das Glossar-System wäre ohne <Term> als MDX-Komponente deutlich umständlicher.
  • Ein statisches Portfolio hat fast keine Angriffsfläche. Die Sicherheitsarbeit steckt in der Infrastruktur (Nginx-Hardening, VPN, SSH), nicht im Anwendungscode.

Glossar

Static Site Generation (SSG)
Ein Build-Verfahren, bei dem alle HTML-Seiten zum Build-Zeitpunkt erzeugt werden — nicht bei jedem Request. Der Webserver liefert fertige Dateien aus, ohne Datenbank oder serverseitige Logik. Ergebnis: schnelle Ladezeiten, minimale Angriffsfläche und einfaches Hosting.
CI/CD
Continuous Integration und Continuous Deployment — automatisierte Prozesse, die Code nach jedem Push testen, bauen und auf den Server deployen. Reduziert manuelle Fehlerquellen und ermöglicht schnelle, reproduzierbare Deployments.
WireGuard
Ein modernes VPN-Protokoll, das auf minimalen Code und starke Kryptografie setzt. Im Vergleich zu OpenVPN oder IPSec deutlich schlanker (~4.000 Zeilen Kernel-Code), schneller im Verbindungsaufbau und einfacher zu konfigurieren.
Reverse Proxy
Ein Server, der eingehende Anfragen entgegennimmt und an Backend-Dienste weiterleitet. Übernimmt dabei Aufgaben wie SSL-Terminierung, Rate Limiting und Zugriffskontrolle, sodass die eigentlichen Anwendungen nicht direkt aus dem Internet erreichbar sein müssen.
Let's Encrypt
Eine kostenlose, automatisierte Certificate Authority (CA), die TLS-Zertifikate ausstellt. Zertifikate werden per ACME-Protokoll beantragt und alle 90 Tage automatisch erneuert — kein manueller Aufwand für HTTPS.
Content Security Policy
Ein HTTP-Header, der dem Browser vorschreibt, welche Ressourcen eine Seite laden darf. script-src 'self' erlaubt nur Scripts von der eigenen Domain und blockiert damit eingeschleusten Code (XSS).