Kostenlose Tutorials für Anfänger

Appearance

Projekt 2: Persönliche statische Webseite erstellen (Nginx) ​

Projektbeschreibung ​

In diesem Projekt lernen wir, einen Nginx-Webserver zu installieren und eine persönliche statische Webseite bereitzustellen.

Lernziele ​

  • Nginx-Webserver installieren und konfigurieren
  • Statische Webseiten bereitstellen
  • Nginx-Konfiguration verstehen
  • Fehlerbehebung bei Webserver-Problemen

Projektanforderungen ​

  1. Nginx installieren
  2. Nginx starten und Autostart konfigurieren
  3. Einfache statische Webseite erstellen
  4. Nginx-Konfiguration anpassen
  5. Webseite testen und auf Fehler prüfen

Schritt-für-Schritt-Anleitung ​

Schritt 1: Nginx installieren ​

Ubuntu/Debian:

bash
sudo apt update
sudo apt install nginx -y

CentOS/RHEL:

bash
sudo yum install epel-release -y
sudo yum install nginx -y

Schritt 2: Nginx starten und Autostart aktivieren ​

bash
# Nginx starten
sudo systemctl start nginx

# Autostart aktivieren
sudo systemctl enable nginx

# Status überprüfen
sudo systemctl status nginx

Schritt 3: Firewall für HTTP/HTTPS öffnen ​

Ubuntu/Debian (ufw):

bash
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw reload

CentOS/RHEL (firewalld):

bash
sudo firewall-cmd --permanent --add-service=http
sudo firewall-cmd --permanent --add-service=https
sudo firewall-cmd --reload

Schritt 4: Webseite testen ​

Öffnen Sie einen Webbrowser und geben Sie die IP-Adresse Ihres Servers ein:

http://Ihre_Server_IP

Sie sollten die Standard-Nginx-Begrüßungsseite sehen.

Schritt 5: Statische Webseite erstellen ​

Verzeichnisstruktur erstellen:

bash
sudo mkdir -p /var/www/meine_seite/{css,js,bilder}

HTML-Datei erstellen (index.html):

bash
sudo vim /var/www/meine_seite/index.html

Fügen Sie folgenden Inhalt hinzu:

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine persönliche Webseite</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Willkommen auf meiner Webseite</h1>
        <nav>
            <ul>
                <li><a href="index.html">Startseite</a></li>
                <li><a href="über mich.html">Über mich</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Über diese Webseite</h2>
            <p>Dies ist eine einfache statische Webseite, die mit Nginx auf einem Linux-Server bereitgestellt wird.</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 Meine Webseite. Alle Rechte vorbehalten.</p>
    </footer>
</body>
</html>

CSS-Datei erstellen (css/style.css):

bash
sudo vim /var/www/meine_seite/css/style.css

Fügen Sie folgenden Inhalt hinzu:

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background: #35424a;
    color: white;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    margin: 20px 0;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 5px;
}

footer {
    text-align: center;
    padding: 20px;
    background: #35424a;
    color: white;
    margin-top: 20px;
}

Schritt 6: Nginx-Konfiguration anpassen ​

Konfigurationsdatei erstellen:

bash
sudo vim /etc/nginx/sites-available/meine_seite    # Ubuntu/Debian
# oder
sudo vim /etc/nginx/conf.d/meine_seite.conf      # CentOS/RHEL

Fügen Sie folgende Konfiguration hinzu:

nginx
server {
    listen 80;
    server_name Ihre_Domain_oder_IP;
    
    root /var/www/meine_seite;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
    }
    
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}

Konfiguration aktivieren (Ubuntu/Debian):

bash
sudo ln -s /etc/nginx/sites-available/meine_seite /etc/nginx/sites-enabled/
sudo rm /etc/nginx/sites-enabled/default    # Standard-Konfiguration deaktivieren

Konfiguration testen:

bash
sudo nginx -t

Nginx neu starten:

bash
sudo systemctl restart nginx

Schritt 7: Webseite testen ​

Öffnen Sie erneut einen Webbrowser und geben Sie die IP-Adresse oder Domainnamen ein:

http://Ihre_Server_IP

Fehlerbehebung ​

Problem 1: "403 Forbidden"

  • Ursache: Berechtigungsprobleme
  • Lösung:
    bash
    sudo chown -R www-data:www-data /var/www/meine_seite
sudo chmod -R 755 /var/www/meine_seite

Problem 2: "404 Not Found"

  • Ursache: Dateipfad falsch
  • Lösung: root-Direktive in Nginx-Konfiguration überprüfen

Problem 3: Nginx startet nicht

  • Ursache: Konfigurationsfehler
  • Lösung:
    bash
    sudo nginx -t                # Konfiguration testen
sudo journalctl -u nginx    # Fehlerprotokolle prüfen

Projekterweiterungen ​

  1. Domainnamen konfigurieren: DNS-Einstellungen anpassen
  2. SSL/TLS aktivieren: Let's Encrypt für HTTPS verwenden
  3. Gzip-Komprimierung aktivieren: Webseitenleistung verbessern
  4. Cache-Konfiguration optimieren: Browser-Caching aktivieren
  5. Sicherheit verbessern: Sicherheitsheader hinzufügen

Projektzusammenfassung ​

In diesem Projekt haben wir:

  • Nginx-Webserver installiert und konfiguriert
  • Eine statische Webseite erstellt
  • Nginx-Konfiguration angepasst
  • Eine funktionierende Webseite bereitgestellt

Wichtige Befehle, die verwendet wurden:

  • sudo apt/yum install nginx: Nginx installieren
  • sudo systemctl start/enable nginx: Nginx starten und Autostart aktivieren
  • sudo nginx -t: Nginx-Konfiguration testen
  • sudo systemctl restart nginx: Nginx neu starten

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials