Daniel Morawetz

Daniel Morawetz

Diese Webseite

September - Oktober 2023
HugoAnsibleGitea ActionsTailwind CSSTerraform

Neue Inhalte, ein neues Design und moderne Technik. All das vereint diese Webseite. Mit Hugo und Tailwind CSS lassen sich sehr schnell schöne, statische Webseiten entwickeln.

Das Theme lowkey war der Ausgangspunkt für das neue Design. Elemente für mein Portfolio waren dank einfacher Überschreibbarkeit leicht zu ergänzen.

Die fertige, statische Webseite kann auf jedem beliebigen Webserver gehostet werden. Da es keine APIs im Hintergrund gibt, gibt es damit auch keine Sicherheitslücken.

Statische Webseiten sind nicht nur schnell in der Entwicklung, sondern auch schnell beim Laden. Hier ein Screenshot der Lighthouse-Benchmark-Ergebnisse.

Lighthouse Ergebnisse mit 100% in den Kategorien Performance, Best Practices und SEO
Großartige Benchmarking-Ergebnisse (Stand: 29. Nov. 2023)

Technik im Hintergrund

Mit automatischen Builds via Gitea Actions kann ganz einfach eine Unterteilung in Staging und Production Umgebungen vorgenommen werden. Basierend auf dem jeweiligen Git Branch übersetzt zuerst Hugo die Markdowndateien in HTML. Danach wird ein Docker-Image mit NGINX und den HTML-Dateien erstellt. Per Aufruf eines Webhooks wird auf dem Server das neue Image geladen und gestartet.

Für die darunterliegende Infrastruktur habe ich terraform und ansible verwendet. crowdsec schützt vor ungewollten Verbindungen, und Mend Renovate kümmert sich um Aktualisierungen von Diensten. traefik wird als reverse proxy eingesetzt, terminiert die TLS-Verbindung, und aktualisiert die Let’s encrypt Zertifikate automatisch.