ServBay

Deutsch

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Français
Tiếng Việt
Türkçe
Italiano

Deutsch

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Français
Tiếng Việt
Türkçe
Italiano

Appearance

Hinzufügen einer statischen Website ​

ServBay ist ein leistungsstarkes lokales Web-Entwicklungstool, das mehrere Programmiersprachen und Datenbanken unterstützt. Neben dynamischen Websites eignet sich ServBay ideal, um statische Webseiten zu hosten und zu testen – etwa einfache Seiten oder Frontend-Anwendungen, die mit HTML, CSS und JavaScript erstellt wurden.

In dieser Anleitung erfahren Sie, wie Sie in ServBay eine statische Website hinzufügen und konfigurieren.

Übersicht ​

Bei statischen Websites handelt es sich um Dateien, die direkt vom Webserver ausgeliefert werden, ohne dass serverseitige Skripte (wie PHP, Node.js, Python etc.) ausgeführt werden. Typische Bestandteile sind HTML-Seiten, CSS-Stylesheets, JavaScript-Dateien, Bilder, Schriften und andere Ressourcen.

Mit ServBay können Sie Ihren lokalen statischen Webauftritt komfortabel entwickeln, debuggen und testen – insbesondere in Szenarien, in denen Echtwelt-Domainnamen, HTTPS-Verbindungen oder das Testen von Cross-Origin Resource Sharing (CORS) simuliert werden sollen.

Typische Anwendungsfälle ​

  • Entwicklung und Test von reinen Frontend-Projekten (HTML/CSS/JS).
  • Hosting von statischen Dokumentations- oder Blog-Webseiten.
  • Testen, wie verschiedene Webserver (Caddy/Nginx) auf statische Inhalte reagieren.
  • Simulation von Produktiv-Dominio und HTTPS-Zugriff auf dem eigenen Rechner.
  • Test mit Build-Outputs von Frontend-Frameworks (wie React, Vue, Angular).

Voraussetzungen ​

  • Sie haben ServBay auf Ihrem macOS-System installiert und gestartet.
  • Sie verfügen über die Dateien Ihrer statischen Website, die Sie bereitstellen möchten.

Schritt-für-Schritt-Anleitung ​

So fügen Sie eine statische Website in ServBay hinzu:

Schritt 1: Website-Dateien vorbereiten ​

Stellen Sie zunächst sicher, dass sämtliche Dateien Ihrer Website (zum Beispiel index.html, style.css, script.js usw.) in einem separaten Ordner abgelegt sind.

Es empfiehlt sich, diesen Ordner im Standard-Document-Root von ServBay anzulegen: /Applications/ServBay/www. So bleibt Ihre Dateiorganisation übersichtlich. Möchten Sie zum Beispiel eine Website namens my-static-site anlegen, erstellen Sie im Verzeichnis /Applications/ServBay/www/ einen Ordner my-static-site und legen dort Ihre Webdateien ab.

bash
# Beispielverzeichnis im Terminal erstellen
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Eine simple index.html Datei anlegen
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServBay 静态网站示例</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>恭喜您！ServBay 静态网站配置成功！</h1> <!-- Glückwunsch! Konfiguration der statischen Website in ServBay erfolgreich -->
    <p>您正在通过 ServBay 访问这个本地静态页面。</p> <!-- Sie greifen gerade über ServBay auf diese lokale statische Seite zu. -->
</body>
</html>' > index.html

# Die Ordnerstruktur sieht nun wie folgt aus:
# /Applications/ServBay/www/servbay-static-demo/index.html

Schritt 2: Website in ServBay hinzufügen ​

  1. Öffnen Sie die ServBay-Anwendung.
  2. Im linken Navigationsbereich klicken Sie auf Websites (Hinweis: In älteren Versionen könnte dies als "Hosts" bezeichnet sein; in den neueren wurde die Bezeichnung auf "Websites" geändert).
  3. In der unteren Leiste der Website-Übersicht klicken Sie auf Hinzufügen. Es erscheint ein Konfigurationsfenster.

Schritt 3: Website-Einstellungen konfigurieren ​

Füllen oder wählen Sie im aufpoppenden Fenster folgende Einstellungen:

  • Domain: Geben Sie die lokale Domain ein, unter der Sie Ihre Website erreichen möchten. Es wird empfohlen, eine Domain mit der Endung .servbay.demo zu verwenden, z.B. static.servbay.demo oder my-static-site.servbay.demo. ServBay sorgt automatisch für die lokale Auflösung aller .servbay.demo Domains – Sie müssen die hosts-Datei nicht manuell bearbeiten.
    • Erklärung: Domains dieser Art vermeiden Kollisionen mit echten Online-Domains, und durch den internen DNS-Resolver von ServBay zeigen sie zuverlässig lokal auf Ihren Rechner.
  • Pfad: Klicken Sie auf das Ordnersymbol rechts und wählen Sie das Verzeichnis aus, das Sie in Schritt 1 erstellt haben, z.B. /Applications/ServBay/www/servbay-static-demo/.
    • Erklärung: Pfad bezeichnet das Basisverzeichnis (Document Root), aus dem der Webserver (Caddy oder Nginx) die Website-Dateien lädt. Wenn Sie zum Beispiel http://static.servbay.demo/ im Browser aufrufen, sucht der Server zunächst in diesem Ordner nach der index.html (oder einem anderen Startdokument). Achten Sie darauf, einen Ordner und keine einzelne Datei (wie index.html) anzugeben!
  • Port: Hier können Sie in der Regel die Standardeinstellung belassen. HTTP verwendet standardmäßig Port 80, HTTPS Port 443. Bei Bedarf kann ein alternativer Port vergeben werden.
  • Webserver: Wählen Sie aus, über welchen Webserver Ihre Seite bereitgestellt werden soll. Für statische Websites sind Caddy und Nginx jeweils ausgezeichnete Optionen.
    • Caddy: Sehr einfache Konfiguration, unterstützt HTTP/2 und automatische HTTPS-Konfiguration (mit ServBay User CA) und ist der Standard in ServBay.
    • Nginx: Hohe Performance, flexible Konfiguration und weit verbreitet im Produktiveinsatz.
    • Eine der Optionen genügt.
  • PHP-Version: Für statische Websites ist keine PHP-Verarbeitung notwendig. Wählen Sie None.
  • Node.js-Version: Ebenfalls nicht nötig für statische Seiten. Wählen Sie None.
  • Python-Version: Auch hierfür None auswählen.
  • Go-Version: Für statische Websites nicht erforderlich – None.
  • Java-Version: Ebenfalls nicht benötigt – None.
  • SSL: Falls Sie Ihre statische Website lokal auch über HTTPS testen möchten, aktivieren Sie diese Option. ServBay nutzt die eingebaute ServBay User CA und erstellt automatisch ein SSL-Zertifikat, das lokal vertrauenswürdig ist – ideal für HTTPS-Tests.
  • CORS: Benötigt Ihre statische Website Cross-Origin Resource Sharing (z.B. für das Laden von Fonts oder API-Daten von einer anderen Local-Domain), können Sie diese Option aktivieren und konfigurieren. ServBay unterstützt CORS-Header für jede Website individuell.

Schritt 4: Speichern & Änderungen anwenden ​

  1. Nach dem Ausfüllen aller Felder klicken Sie im Fenster unten auf Speichern.
  2. Sie kehren zur Website-Übersicht in ServBay zurück und sehen Ihren eben angelegten Webeintrag.
  3. Klicken Sie oben in der Website-Liste auf Änderungen anwenden.
    • Erklärung: Mit Änderungen anwenden wird die Konfiguration des Webservers (Caddy oder Nginx) neu geladen und der neue Eintrag aktiviert. Dies ist ein entscheidender Schritt – ohne ihn ist die frisch angelegte Website nicht erreichbar.

Einrichtung überprüfen ​

Nachdem Sie gespeichert und die Änderungen angewendet haben, öffnen Sie Ihren Webbrowser. Geben Sie die konfigurierte Domain (zum Beispiel http://static.servbay.demo oder, falls SSL aktiviert wurde, https://static.servbay.demo) in die Adresszeile ein und besuchen die Seite.

Ist alles korrekt eingerichtet, sehen Sie die Inhalte Ihrer statischen Website – etwa die in unserem Beispiel erstellte index.html.

Hinweise ​

  • Achten Sie darauf, dass der konfigurierte Pfad auf den richtigen Website-Hauptordner zeigt.
  • Nach jedem Hinzufügen, Ändern oder Löschen einer Website-Konfiguration muss Änderungen anwenden geklickt werden, damit die Einstellungen aktiv werden.
  • Für statische Websites ist die Wahl von None für serverseitige Sprachen (PHP, Node.js etc.) Best Practice – das spart Ressourcen und minimiert Sicherheitsrisiken.
  • Bei Zugriffsproblemen prüfen Sie bitte, ob ServBay läuft, der Webserver (Caddy/Nginx) betriebsbereit ist und die eingegebene Domain exakt mit der in ServBay hinterlegten übereinstimmt.

FAQ – Häufige Fragen ​

F: Ich erhalte beim Aufruf der konfigurierten Domain “Website nicht erreichbar” oder “Server nicht gefunden”. Was kann ich tun?

A:

  1. Stellen Sie sicher, dass die ServBay-App aktiv ist.
  2. Prüfen Sie, ob Sie in ServBay auf Änderungen anwenden geklickt haben.
  3. Kontrollieren Sie, dass die in den Browser eingegebene Domain exakt Ihrer Konfiguration in ServBay entspricht (einschl. http:// bzw. https://).
  4. Überprüfen Sie, ob der konfigurierte Pfad tatsächlich auf Ihr Website-Verzeichnis zeigt.
  5. Werfen Sie einen Blick in die ServBay-Logdateien – hier finden Sie oft detailliertere Fehlermeldungen.

F: Warum wird statt meines index.html beim Aufruf die Ordnerübersicht angezeigt?

A: In der Regel liegt das daran, dass im Basisordner Ihrer Website kein Standard-Startdokument liegt (wie index.html). Bitte prüfen Sie, ob sich im Wurzelverzeichnis eine Datei mit dem Namen index.html (oder ein anderes in der Webserver-Konfiguration definiertes Startdokument) befindet und dass auch Groß-/Kleinschreibung sowie Dateiendung korrekt sind.

F: Kann ich auch HTTPS für statische Webseiten konfigurieren?

A: Ja! Einfach im Website-Setup in ServBay die Option SSL aktivieren. ServBay stellt dann mit Hilfe der integrierten ServBay User CA ein SSL-Zertifikat für Ihre lokale Domain aus und sorgt dafür, dass Sie die Site sicher per HTTPS erreichen können.

Fazit ​

Dank ServBay können Sie lokale statische Websites einfach hinzufügen und verwalten – egal, ob einfache HTML-Seiten oder umfangreiche Frontend-Projekte nach dem Build. Mithilfe der Websiteverwaltung, lokalen Domain-Resolution und SSL-Unterstützung von ServBay entwickeln und testen Sie Ihre Frontendanwendungen besonders komfortabel und effizient.