Een statische website toevoegen

ServBay is een krachtige lokale webontwikkelomgeving die meerdere talen en databases ondersteunt. Naast dynamische websites is ServBay uitermate geschikt voor het hosten en testen van statische sites, zoals eenvoudige webpagina’s of frontend-applicaties gebouwd met HTML, CSS en JavaScript.

In dit artikel lees je stap voor stap hoe je in ServBay een statische website toevoegt en configureert.

Overzicht

Een statische website bestaat uit bestanden die direct door de webserver worden geserveerd, zonder dat er serverside-scripts (zoals PHP, Node.js, Python, etc.) worden uitgevoerd. Zulke sites bevatten doorgaans HTML-pagina’s, CSS-stylesheets, JavaScript-bestanden, afbeeldingen, fonts en andere resources.

Door ServBay te gebruiken voor het hosten van je lokale statische website kun je efficiënt ontwikkelen, debuggen en testen — met name wanneer je domeinnaamtoegang, HTTPS of cross-origin resource sharing (CORS) situaties uit de productieomgeving wilt simuleren.

Gebruiksscenario’s

Ontwikkelen en testen van pure frontend-projecten (HTML/CSS/JS).
Hosten van statische documentatie of een blog.
Testen van de responsgedragingen van verschillende webservers (Caddy/Nginx) voor statische bestanden.
Locally productie-achtige domeinnamen en HTTPS-verbindingen simuleren.
Testen van build-resultaten van frontend-frameworks (zoals React, Vue, Angular).

Vereisten

Je hebt ServBay succesvol geïnstalleerd en gestart op macOS.
Je beschikt over de bestanden van de statische website die je wilt deployen.

Stappenplan

Volg onderstaande stappen om jouw statische website toe te voegen in ServBay:

Stap 1: Bereid je websitebestanden voor

Zorg er eerst voor dat al je statische websitebestanden (zoals index.html, style.css, script.js, etc.) in één aparte map staan.

Het is aan te raden je website-directory aan te maken onder de standaard web root van ServBay: /Applications/ServBay/www. Dit zorgt voor overzichtelijk bestandbeheer. Stel, je wilt een site my-static-site aanmaken, maak dan een map my-static-site onder /Applications/ServBay/www/ en plaats daar al je websitebestanden in.

bash

# Maak een voorbeeldmap aan in de terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Maak een eenvoudige index.html aan
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>
    <p>您正在通过 ServBay 访问这个本地静态页面。</p>
</body>
</html>' > index.html

# Je mapstructuur ziet er nu bijvoorbeeld zo uit:
# /Applications/ServBay/www/servbay-static-demo/index.html

Stap 2: Voeg je website toe in ServBay

Open de ServBay-applicatie.
Klik in het linkermenu op Websites (let op: dit kan in oudere versies “Hosts” heten, in de nieuwste versies is dit gewijzigd naar “Websites”).
Klik onderaan in het websitelijst-scherm op de knop Toevoegen. Er verschijnt nu een configuratievenster.

Stap 3: Stel je website in

Vul in het configuratievenster de volgende gegevens in of selecteer ze:

Domeinnaam (Domain): Vul de domeinnaam in waarmee je de website lokaal wilt openen. Het is aan te raden een domein te gebruiken dat eindigt op .servbay.demo, bijvoorbeeld static.servbay.demo of my-static-site.servbay.demo. ServBay regelt automatisch lokale resolutie van .servbay.demo-domeinen, je hoeft je hosts-bestand dus niet handmatig aan te passen.
- Uitleg: Het gebruik van een .servbay.demo-domein voorkomt conflicten met echte live domeinnamen en de ingebouwde DNS-oplosser van ServBay zorgt ervoor dat zulke domeinnamen lokaal naar jouw computer verwijzen.
Pad (Path): Klik op het mapicoon, selecteer de map met je websitebestanden uit stap 1, bijvoorbeeld /Applications/ServBay/www/servbay-static-demo/.
- Uitleg: Pad wijst naar de rootmap die Caddy of Nginx als webserver gebruikt voor jouw site, ook bekend als de Document Root. Bezoek je http://static.servbay.demo/, dan zoekt de server hier naar index.html of een andere standaard startpagina. Zorg dat het pad naar de map met je websitebestanden verwijst, niet naar een individuëel bestand zoals index.html.
Poort (Port): Gewoonlijk kun je hier de standaardwaarde laten staan. De standaardpoort voor HTTP is 80, voor HTTPS 443. Wil je een niet-standaard poort instellen, dan kan dat hier.
Webserver (Web Server): Kies de webserver die je wilt gebruiken. Voor statische websites zijn Caddy en Nginx allebei uitstekende keuzes.
- Caddy: Eenvoudige configuratie, ondersteunt HTTP/2 en automatische HTTPS (met ServBay User CA), aanbevolen door ServBay.
- Nginx: Hoge prestaties, zeer flexibel, breed ingezet in productieomgevingen.
- Kies er één van.
PHP-versie (PHP Version): Voor een statische website heb je geen PHP nodig. Kies dus None.
Node.js-versie (Node.js Version): Voor een statische website niet vereist. Kies None.
Python-versie (Python Version): Niet nodig voor een statische website. Kies None.
Go-versie (Go Version): Niet nodig voor een statische site. Kies None.
Java-versie (Java Version): Niet vereist voor statische sites. Kies None.
SSL: Wil je de site lokaal via HTTPS benaderen, vink dan deze optie aan. ServBay configureert dan automatisch een lokaal vertrouwd SSL-certificaat via de ingebouwde ServBay User CA, ideaal voor het testen van HTTPS.
CORS: Heeft je statische site cross-origin resource sharing nodig (bijvoorbeeld om fonts of API-data van andere lokale domeinen op te halen), vink deze optie aan en stel de CORS-headers naar wens in. ServBay maakt eenvoudige CORS-configuratie per site mogelijk.

Stap 4: Opslaan en wijzigingen toepassen

Vul alle benodigde gegevens in en klik onderaan het venster op Opslaan.
Ga terug naar het websitesscherm in ServBay; je ziet nu het nieuw toegevoegde site-item.
Klik bovenaan in de lijst op Wijzigingen toepassen.
- Uitleg: Met Wijzigingen toepassen worden de configuratiebestanden van Caddy of Nginx opnieuw geladen, zodat je nieuwe website actief wordt. Dit is een essentiële stap — zonder deze actie is je website niet bereikbaar.

Controleer je website

Na het toepassen van de wijzigingen open je een browser en voer je het door jou gekozen domein in de adresbalk in (bijvoorbeeld http://static.servbay.demo of https://static.servbay.demo als je SSL hebt ingeschakeld).

Als alles juist staat ingesteld, zie je nu de inhoud van je statische website, bijvoorbeeld de zojuist aangemaakte index.html.

Let op

Controleer altijd of het pad overeenkomt met de rootmap van je websitebestanden.
Elke keer als je een website toevoegt, wijzigt of verwijdert, moet je op Wijzigingen toepassen klikken om de wijzigingen te activeren.
Voor statische websites is het best practice om alle serversidetalen (zoals PHP en Node.js) op None te zetten. Dit voorkomt onnodig gebruik van resources en mogelijke veiligheidsrisico’s.
Bij problemen met de bereikbaarheid: controleer of ServBay draait, kijk de status van de webserver (Caddy/Nginx) na, en verifieer of het ingevoerde domein exact overeenkomt met je ServBay-configuratie.

Veelgestelde vragen (FAQ)

V: Waarom krijg ik “Deze website is niet bereikbaar” of “Server niet gevonden” als ik mijn domeinnaam bezoek?

Controleer of de ServBay-applicatie actief is.
Zorg dat je op Wijzigingen toepassen hebt geklikt binnen ServBay.
Check of de domeinnaam in je browser exact overeenkomt met die in de ServBay-configuratie (inclusief http:// of https://).
Controleer of het pad klopt en naar de juiste map met je sitebestanden verwijst.
Bekijk de logbestanden van ServBay voor meer gedetailleerde foutmeldingen.

V: Waarom zie ik een directorylijst en niet mijn index.html als ik de site bezoek?

A: Dit betekent doorgaans dat er geen standaard startpagina (zoals index.html) in je website rootmap is aangetroffen. Zorg dat er een bestand met de exacte naam index.html (let op hoofd-/kleine letters) in de rootmap van je site staat.

V: Kan ik HTTPS instellen voor een statische website?

A: Ja, vink in de siteconfiguratie van ServBay de optie SSL aan. ServBay genereert en vertrouwt dan automatisch een lokaal SSL-certificaat via de ingebouwde ServBay User CA, zodat je site via HTTPS lokaal bereikbaar is.

Samenvatting

Met ServBay voeg je eenvoudig statische websites toe en beheer je deze lokaal, ongeacht of het gaat om simpele HTML-pagina’s of complexe frontend-builds. Dankzij domeinbeheer, lokale DNS-resolutie en SSL-ondersteuning van ServBay werk en test je jouw frontendprojecten sneller en effectiever.

Een statische website toevoegen ​

Overzicht ​

Gebruiksscenario’s ​

Vereisten ​

Stappenplan ​

Stap 1: Bereid je websitebestanden voor ​

Stap 2: Voeg je website toe in ServBay ​

Stap 3: Stel je website in ​

Stap 4: Opslaan en wijzigingen toepassen ​

Controleer je website ​

Let op ​

Veelgestelde vragen (FAQ) ​

Samenvatting ​