open-how2 – Entdecke. Verstehe. Nutze.
Veröffentlicht am
• How2-Tipps

Statische Websites mit NGINX hosten – HTML, CSS, JS schnell ausliefern

Autor
Statische Websites mit NGINX hosten – HTML, CSS, JS schnell ausliefern

Wenn du eine schnelle, stabile und sichere Möglichkeit suchst, um statische Websites zu hosten, ist NGINX die perfekte Wahl. Egal, ob du ein Portfolio, eine Landingpage oder eine Dokumentation veröffentlichen willst – NGINX liefert HTML-, CSS- und JavaScript-Dateien mit beeindruckender Geschwindigkeit und minimalem Ressourcenverbrauch.

In diesem Artikel zeigen wir dir, wie du in wenigen Minuten eine statische Website mit NGINX einrichtest, optimierst und produktionsreif absicherst.

1. Was sind statische Websites?

Eine statische Website besteht aus unveränderlichen Dateien wie:

  • HTML (Struktur der Seite),
  • CSS (Design & Layout),
  • JavaScript (Interaktivität).

Im Gegensatz zu dynamischen Seiten (z. B. WordPress oder PHP) wird der Inhalt direkt vom Server ausgeliefert, ohne Datenbank oder serverseitige Logik. Das bedeutet:

  • Schnellere Ladezeiten
  • Weniger Wartung
  • Höhere Sicherheit

Und genau hier spielt NGINX seine Stärken aus.

2. Voraussetzungen

Du benötigst:

  • Einen Server oder lokalen Rechner mit NGINX (z. B. Debian, Ubuntu, macOS oder Windows)
  • Zugriff auf das Webverzeichnis (z. B. /var/www/html)
  • Deine Website-Dateien (z. B. index.html, style.css, script.js)

3. Website-Struktur vorbereiten

Lege dein Projektverzeichnis an:

sudo mkdir -p /var/www/meine-seite/html

Kopiere deine Dateien hinein:

sudo cp -r ~/projekte/meine-seite/* /var/www/meine-seite/html/

Die Verzeichnisstruktur sollte so aussehen:

/var/www/meine-seite/html/
├── index.html
├── style.css
└── script.js

4. Server-Block konfigurieren

Erstelle eine neue Konfigurationsdatei für deine Website:

sudo nano /etc/nginx/sites-available/meine-seite

Füge den folgenden Inhalt ein:

server {
    listen 80;
    server_name meine-seite.de www.meine-seite.de;

    root /var/www/meine-seite/html;
    index index.html;

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

    # Optional: Cache statischer Dateien
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff2?)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }
}

Aktiviere die Site:

sudo ln -s /etc/nginx/sites-available/meine-seite /etc/nginx/sites-enabled/

Teste die Konfiguration:

sudo nginx -t

Wenn „syntax is ok“ erscheint:

sudo systemctl reload nginx

5. Website im Browser testen

Rufe im Browser auf:

http://meine-seite.de

Du solltest deine statische Website sehen. Wenn du lokal testest, kannst du auch verwenden:

http://localhost

6. Performance optimieren

NGINX ist bereits schnell – aber mit wenigen Tricks wird er blitzschnell:

Kompression aktivieren (gzip)

gzip on;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
gzip_min_length 256;

Keep-Alive aktivieren

keepalive_timeout 65;

HTTP/2 aktivieren (mit SSL)

listen 443 ssl http2;

Browser-Caching

Statische Dateien werden so zwischengespeichert:

expires 7d;
add_header Cache-Control "public";

7. HTTPS aktivieren (Let's Encrypt)

Für eine sichere Verbindung kannst du kostenlos Let's Encrypt verwenden:

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d meine-seite.de -d www.meine-seite.de

Zertifikate werden automatisch konfiguriert und regelmäßig erneuert.

8. Typische Probleme & Lösungen

Problem Ursache Lösung
404-Fehler Falscher root-Pfad Pfad prüfen und ggf. anpassen
Keine CSS/JS-Dateien Rechteproblem sudo chown -R www-data:www-data /var/www/meine-seite
Browser lädt alte Versionen Kein Cache-Header expires und Cache-Control aktivieren
Keine SSL-Verbindung Zertifikat fehlt Certbot ausführen

9. Best Practices

✅ Verwende einen eigenen Server-Block pro Domain/Subdomain ✅ Halte die Verzeichnisstruktur einheitlich ✅ Aktiviere gzip und Browser-Caching ✅ Nutze HTTP/2 für schnellere Übertragungen ✅ Überwache Logs regelmäßig (/var/log/nginx/access.log, error.log)

Mit NGINX kannst du statische Websites extrem schnell, stabil und sicher hosten. Dank einfacher Konfiguration und hoher Effizienz ist er ideal für Entwickler, Agenturen und Content-Plattformen, die auf Performance und Zuverlässigkeit setzen.

Einmal eingerichtet, liefert NGINX deine HTML-, CSS- und JavaScript-Dateien in Lichtgeschwindigkeit – und das mit minimalem Ressourcenverbrauch.

Ähnliche Beiträge