Back to Blog

Saubere URLs und NGINX-Update

Die Website sollte in der Adressleiste aufgeräumter wirken: /blog statt /blog.html, /projects statt /projects.html und kurze Blog-Slugs statt langer Dateinamen.

Ausgangspunkt

Bisher zeigte die Navigation auf Dateien wie /projects.html und /blog.html. Für eine statische Website ist das normal, aber als öffentliche URL wollte ich lieber kürzere und ruhigere Pfade.

Ziel war deshalb: Die Dateien bleiben einfache HTML-Dateien, aber Besucher sehen saubere Pfade.

/about.html        -> /about
/projects.html     -> /projects
/blog.html         -> /blog
/blog/mobile.html  -> /blog/mobile

Links auf saubere Pfade

Zuerst habe ich die internen Links in den HTML-Dateien geändert. Aus Links auf konkrete Dateien wurden Links auf die später sichtbaren Pfade.

<a href="/blog">Blog</a>
<a href="/projects">Projects</a>

NGINX Routing

Danach musste NGINX diese sauberen Pfade intern wieder auf die passenden Dateien abbilden. Die entscheidende Regel ist try_files: Für diese Website soll /blog zuerst als blog.html versucht werden, bevor NGINX einen gleichnamigen Ordner betrachtet.

location = / {
    try_files /index.html =404;
}

location = /index.html {
    return 301 /;
}

location ~ ^(.+)\.html$ {
    return 301 $1;
}

location / {
    try_files $uri.html $uri $uri/ =404;
}

Der eigene Block für / ist wichtig. Ohne ihn kann ein Redirect-Loop entstehen, weil / intern auf index.html fällt und /index.html wiederum zurück auf / umgeleitet wird.

sudo nginx -t
sudo systemctl reload nginx

Tests mit curl

Nach der Änderung habe ich nicht nur im Browser getestet, sondern die wichtigsten URLs direkt mit curl -I geprüft. So sieht man schnell, ob eine URL direkt ausgeliefert oder weitergeleitet wird.

curl -I https://newwaves.dev/
curl -I https://newwaves.dev/index.html
curl -I https://newwaves.dev/blog
curl -I https://newwaves.dev/blog.html
curl -I https://newwaves.dev/projects

/ liefert die Landingpage mit 200 OK.
/index.html leitet mit 301 auf / weiter.
/blog und /projects liefern direkt 200 OK.
/blog.html und /projects.html leiten auf die sauberen URLs weiter.

Kürzere Blog-Slugs

Danach habe ich auch die Blogbeiträge selbst auf kürzere Slugs umgestellt. Die sichtbaren URLs sind dadurch knapper, ohne dass die Website ihr statisches Grundprinzip verliert.

/blog/mobile
/blog/start
/blog/struktur
/blog/fastfetch
/blog/git-deploy
/blog/vps-security
/blog/git-worktrees
/blog/redesign

Für die Umbenennung habe ich git mv benutzt. Das ist wie Umbenennen im Dateisystem, nur so, dass Git die Änderung sauber als Rename erkennt.

git mv blog/mobile-optimierung.html blog/mobile.html

Auslöser: NGINX prüfen

Der Anstoß für die Arbeit kam durch einen Hinweis auf X zu einer NGINX-Sicherheitslücke. Das war nicht der Hauptteil der Änderung, aber ein guter Anlass, den Webserver und die Website-Auslieferung direkt zusammen zu prüfen.

Der erste Schritt war nicht, blind irgendetwas zu ändern, sondern die installierte NGINX-Version und den Ubuntu-Paketstand zu prüfen.

nginx -v
nginx -V 2>&1 | head -1
apt list --installed 'nginx*'

Auf dem VPS war zuerst nginx 1.24.0-2ubuntu7.7 installiert. Nach sudo apt update war ein Security-Update auf 1.24.0-2ubuntu7.8 verfügbar.

Update einspielen

Weil Ubuntu Sicherheitsfixes oft in die vorhandene Paketversion zurückportiert, ist nicht nur die sichtbare Upstream-Version wie 1.24.0 wichtig. Entscheidend ist die komplette Paketversion aus den Ubuntu-Repositories.

sudo apt update
sudo apt install --only-upgrade nginx nginx-common
sudo nginx -t
sudo systemctl reload nginx

Danach war NGINX auf 1.24.0-2ubuntu7.8. Der Konfigurationstest war erfolgreich und der Reload lief ohne Fehler.

apt list --installed 'nginx*'
sudo nginx -t

Deploy

Die Website-Dateien ändere ich lokal, committe sie und pushe sie nach GitHub. Auf dem VPS wird danach nur noch der neue Stand gezogen.

git status
git add .
git commit -m "Use clean URLs for site navigation"
git push

cd /var/www/newwaves.dev
git status
git pull

Fazit

Die Änderung ist klein, aber sie macht die Website spürbar sauberer: Die Struktur bleibt statisch und nachvollziehbar, während die sichtbaren URLs besser zur Seite passen. Der NGINX-Check war am Ende der passende Anlass, Routing, Slugs und Serverstand gemeinsam zu prüfen.