0Pricing
Linux Server Deployment & SSH Mastery · Lektion

Statische Websites hosten

Konfigurieren Sie Ihren bevorzugten Webserver so, dass er statische HTML-, CSS- und JavaScript-Dateien bereitstellt und Ihre erste Website zugänglich macht.

Statische Websites hosten ist eine kostenlose Linux Server Deployment & SSH Mastery-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Linux Server Deployment & SSH Mastery-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Linux Server Deployment & SSH Mastery-Kurs umfasst insgesamt 4 Lektionen.

Was sind statische Websites

Willkommen! In dieser Lektion lernen Sie, wie Sie Ihre einfache Website online verfügbar machen.

Eine statische Website besteht aus Dateien wie HTML, CSS und JavaScript, die genau so an den Browser eines Benutzers ausgeliefert werden, wie sie auf dem Server gespeichert sind.

  • Keine serverseitige Verarbeitung wie PHP oder Python.
  • Schnell, sicher und einfach zu hosten.
  • Ideal für Portfolios, Blogs oder einfache Informationsseiten.

Ihre erste HTML-Datei erstellen

Erstellen wir eine sehr einfache Datei index.html. Sie wird als Hauptseite unserer statischen Website dienen.

Normalerweise würden Sie diese Datei auf Ihrem Server erstellen, beispielsweise mit einem Texteditor wie nano oder vim.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

CSS und JavaScript hinzufügen

Unsere HTML-Datei verweist auf style.css und script.js. Erstellen wir auch diese Dateien, um unsere einfache Website zu vervollständigen.

Diese Dateien befinden sich im selben Verzeichnis wie unsere index.html.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

Ihr Webverzeichnis einrichten

Wir benötigen auf unserem Server einen eigenen Speicherort für diese Website-Dateien. Ein üblicher Ort ist ein Verzeichnis innerhalb von /var/www/.

Erstellen Sie zunächst ein Verzeichnis für Ihre Website. Kopieren Sie anschließend die Dateien index.html, style.css und script.js dorthin.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: Grundlagen von Server-Blöcken

Nginx verwendet Server-Blöcke (vergleichbar mit den Virtual Hosts von Apache), um Konfigurationen für bestimmte Websites zu definieren.

Jeder Server-Block wartet auf einem Port (z. B. 80 für HTTP) auf Anfragen und antwortet abhängig vom Domainnamen.

  • Normalerweise zu finden in /etc/nginx/sites-available/.
  • Aktiviert, indem ein symbolischer Link auf /etc/nginx/sites-enabled/ erstellt wird.

Nginx: Direktiven für Root und Index

Innerhalb eines Server-Blocks geben zwei wichtige Direktiven an, wo Nginx Ihre Dateien findet:

  • root: Gibt den absoluten Pfad zu den Dateien Ihrer Website an. Dort sucht Nginx nach Inhalten.
  • index: Legt die Standarddatei fest, die Nginx ausliefern soll, wenn ein Verzeichnis angefordert wird (wenn jemand beispielsweise yourdomain.com/ aufruft, sucht Nginx nach index.html).

Nginx: Vollständige Konfiguration für eine statische Website

Hier ist eine vollständige Nginx-Server-Block-Konfiguration für unsere statische Website. Speichern Sie sie als /etc/nginx/sites-available/mywebsite.conf.

Denken Sie daran, your_domain.com durch Ihre tatsächliche Domain oder die IP-Adresse Ihres Servers zu ersetzen.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

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

Apache: Entsprechung zu Virtual Hosts

Wenn Sie Apache verwenden, ist das Konzept mit Virtual Hosts ähnlich. Sie würden eine Konfigurationsdatei erstellen (z. B. /etc/apache2/sites-available/mywebsite.conf).

Wichtige Direktiven sind DocumentRoot (entspricht Nginx-root) und DirectoryIndex (entspricht Nginx-index).

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Server aktivieren und neu laden

Nach dem Erstellen Ihrer Konfigurationsdatei müssen Sie sie aktivieren und Ihren Webserver neu laden, damit die Änderungen wirksam werden.

  • Für Nginx: Erstellen Sie einen symbolischen Link und laden Sie den Server neu.
  • Für Apache: Aktivieren Sie die Website und laden Sie den Server neu.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

Ihre Live-Website testen

Sehr gut! Ihre statische Website sollte nun erreichbar sein.

Öffnen Sie Ihren Webbrowser und rufen Sie die IP-Adresse Ihres Servers oder den von Ihnen konfigurierten Domainnamen auf.

Die Meldung „Hello CoddyKit!“ sollte angezeigt werden!

Kurze Überprüfung: Nginx-Direktiven

Betrachten Sie den folgenden Ausschnitt eines Nginx-Server-Blocks:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

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

Welche Datei wird Nginx zuerst auszuliefern versuchen, wenn ein Benutzer http://example.com/ aufruft?

Zusammenfassung: Statische Websites hosten

Sie haben erfolgreich gelernt, eine statische Website zu hosten!

Wir haben behandelt:

  • Das Erstellen grundlegender HTML-, CSS- und JS-Dateien.
  • Das Einrichten eines eigenen Verzeichnisses für Ihre Website-Inhalte.
  • Das Konfigurieren von Nginx-Server-Blöcken (oder Apache-Virtual-Hosts) mit root/DocumentRoot und index/DirectoryIndex.
  • Das Aktivieren und Neuladen Ihres Webservers.
  • Das Testen Ihrer Live-Website in einem Browser.

Als Nächstes untersuchen wir, wie Sie Virtual Hosts konfigurieren, um mehrere Websites auf einem einzigen Server zu hosten!

Häufig gestellte Fragen

Ist die Lektion „Statische Websites hosten“ kostenlos?

Ja — der vollständige Text von „Statische Websites hosten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Linux Server Deployment & SSH Mastery-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Linux Server Deployment & SSH Mastery-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Statische Websites hosten“?

Konfigurieren Sie Ihren bevorzugten Webserver so, dass er statische HTML-, CSS- und JavaScript-Dateien bereitstellt und Ihre erste Website zugänglich macht. Du übst Linux Server Deployment & SSH Mastery mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Linux Server Deployment & SSH Mastery zu starten?

Keine Vorkenntnisse erforderlich. Linux Server Deployment & SSH Mastery auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Statische Websites hosten“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Linux Server Deployment & SSH Mastery-Lektion Code schreiben und ausführen?

Ja. Jede Linux Server Deployment & SSH Mastery-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Nginx/Apache installieren
  2. Statische Websites hosten
  3. Grundlegende Konfiguration virtueller Hosts
  4. HTTPS mit Let's Encrypt aktivieren
← Zurück zu Linux Server Deployment & SSH Mastery