Ajouter un site web statique

ServBay est un outil puissant d’environnement de développement web local, prenant en charge de nombreux langages et bases de données. Outre les sites dynamiques, ServBay est aussi idéal pour héberger et tester des sites statiques, comme des pages simples ou des applications front-end construites avec HTML, CSS et JavaScript.

Ce tutoriel vous guide pour ajouter et configurer un site web statique dans ServBay.

Vue d’ensemble

Un site web statique est composé de fichiers servis directement par le serveur web, sans exécution de scripts côté serveur (comme PHP, Node.js ou Python). Ce type de site comprend généralement des pages HTML, des feuilles de style CSS, des fichiers JavaScript, des images, des polices de caractères, etc.

Héberger son site statique localement avec ServBay facilite le développement, le débogage et les tests, surtout si vous souhaitez simuler un accès domaine en environnement de production, activer HTTPS, ou tester le partage de ressources Cross-Origin (CORS).

Cas d’utilisation

Développement et tests de projets front-end purs (HTML/CSS/JS).
Hébergement de documentation statique ou de sites de blog.
Tester le comportement de différents serveurs web (Caddy/Nginx) pour les ressources statiques.
Simuler localement un nom de domaine production et l’accès HTTPS.
Tester les résultats de build de frameworks front-end (React, Vue, Angular, etc.).

Prérequis

Vous avez installé et lancé ServBay sur macOS.
Vous disposez des fichiers de site statique à déployer.

Étapes

Suivez les étapes suivantes pour ajouter votre site web statique dans ServBay :

Étape 1 : Préparez les fichiers de votre site

Assurez-vous d’abord que tous les fichiers de votre site statique (par exemple index.html, style.css, script.js, etc.) soient regroupés dans un même dossier.

Nous recommandons de placer votre dossier de site dans le répertoire racine par défaut de ServBay, à savoir /Applications/ServBay/www, pour une gestion optimale des fichiers. Par exemple, pour créer un site nommé my-static-site, créez un dossier du même nom dans /Applications/ServBay/www/ puis placez-y tous vos fichiers.

bash

# Créer le répertoire d’exemple dans le terminal
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# Créer un index.html simple
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de site statique ServBay</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>Félicitations ! Votre site statique ServBay est configuré avec succès !</h1>
    <p>Vous consultez cette page locale via ServBay.</p>
</body>
</html>' > index.html

# Votre structure de fichiers devrait ressembler à ceci :
# /Applications/ServBay/www/servbay-static-demo/index.html

Étape 2 : Ajouter un site dans ServBay

Ouvrez l’application ServBay.
Dans la barre de navigation à gauche, cliquez sur Sites (note : dans les anciennes versions, cela peut s’appeler "Hôtes", la nouvelle version utilise "Sites").
En bas de la liste des sites, cliquez sur le bouton Ajouter. Une fenêtre de configuration va s’ouvrir.

Étape 3 : Configurer les paramètres du site

Dans la fenêtre qui s’ouvre, remplissez ou sélectionnez les informations suivantes :

Domaine : Indiquez le nom de domaine que vous souhaitez utiliser localement pour accéder au site. Il est recommandé d’utiliser un domaine en .servbay.demo, par exemple static.servbay.demo ou my-static-site.servbay.demo. ServBay gère automatiquement la résolution locale pour les domaines .servbay.demo sans modification manuelle du fichier hosts.
- Explication : Un domaine en .servbay.demo évite tout conflit potentiel avec des domaines en ligne, et le résolveur DNS interne de ServBay garantit que ces domaines pointent localement vers votre machine.
Chemin (Path) : Cliquez sur l’icône dossier à droite et sélectionnez le répertoire de votre site créé à l’étape 1, par exemple /Applications/ServBay/www/servbay-static-demo/.
- Explication : Le chemin indique au serveur web (Caddy ou Nginx) le dossier racine pour rechercher les fichiers de votre site (Document Root). Quand vous tapez http://static.servbay.demo/, le serveur commencera par chercher index.html ou un fichier d’accueil défini dans ce répertoire. Vérifiez que le chemin pointe bien vers le dossier du site et non un fichier individuel (comme index.html).
Port : Laissez généralement la valeur par défaut. Le port HTTP standard est 80, HTTPS est 443. Pour attribuer un port non standard, vous pouvez le modifier ici.
Serveur web (Web Server) : Choisissez le serveur de votre préférence. Pour un site statique, Caddy et Nginx sont d’excellents choix.
- Caddy : Configuration simplifiée, prise en charge HTTP/2 et HTTPS en automatique (via ServBay User CA). C’est le choix recommandé par défaut.
- Nginx : Haute performance, très flexible et largement utilisé en production.
- Choisissez l’un des deux.
Version PHP : Pour un site statique, aucune gestion PHP n’est nécessaire. Sélectionnez Aucun (None).
Version Node.js : Pour un site statique, sélectionnez Aucun (None).
Version Python : Inutile pour un site statique, sélectionnez Aucun (None).
Version Go : Inutile pour un site statique, sélectionnez Aucun (None).
Version Java : Inutile pour un site statique, sélectionnez Aucun (None).
SSL : Si vous souhaitez accéder à votre site statique en HTTPS localement, cochez cette option. ServBay utilisera le certificat ServBay User CA intégré pour générer et configurer automatiquement un certificat SSL reconnu localement.
CORS : Si votre site a besoin du partage de ressources cross-origin (par exemple, charger des fontes ou des API depuis un autre domaine local), cochez cette case et configurez selon les besoins. ServBay permet de définir les headers CORS pour votre site.

Étape 4 : Enregistrez et appliquez les modifications

Après avoir rempli toutes les informations, cliquez sur Enregistrer en bas de la fenêtre.
Revenez à la liste des sites ServBay — votre nouvel enregistrement doit apparaître.
Cliquez sur le bouton Appliquer les modifications en haut de la liste des sites.
- Explication : En cliquant sur Appliquer les modifications, ServBay recharge les fichiers de configuration du serveur web (Caddy ou Nginx) pour activer la prise en compte de votre site. Sans cette étape, votre site ne sera pas accessible.

Vérification de la configuration

Après avoir appliqué les changements, ouvrez votre navigateur et tapez le domaine configuré (par exemple http://static.servbay.demo ou https://static.servbay.demo si vous avez coché SSL).

Si tout est correctement mis en place, vous devriez voir le contenu de votre site statique, comme la page index.html créée dans l’exemple.

Remarques

Vérifiez que le chemin configuré correspond bien au dossier racine de votre site.
Après chaque ajout, modification ou suppression de site, il faut systématiquement cliquer sur Appliquer les modifications pour rendre l’opération effective.
Pour un site statique, choisir Aucun pour les langages côté serveur (PHP, Node.js, etc.) permet d’éviter toute consommation de ressources ou failles inutiles.
En cas de problème d’accès, vérifiez que ServBay fonctionne, que le serveur web (Caddy/Nginx) est bien lancé, et que le domaine tapé dans le navigateur est bien le même que celui configuré dans ServBay.

Foire Aux Questions (FAQ)

Q : Lorsque j’accède au domaine configuré, j’ai “Ce site est inaccessible” ou “Serveur introuvable”, que faire ?

A :

Vérifiez que ServBay est bien lancé.
Vérifiez que vous avez bien cliqué sur le bouton Appliquer les modifications.
Vérifiez que le nom de domaine saisi dans votre navigateur correspond exactement à celui configuré dans ServBay (y compris http:// ou https://).
Vérifiez que le chemin renseigné pointe bien vers le dossier de votre site web.
Consultez les logs de ServBay pour plus de détails techniques.

Q : Pourquoi ai-je une liste de dossier quand j’accède au site, au lieu de voir ma page index.html ?

R : Cela arrive généralement si le fichier d’accueil (index.html) n’a pas été trouvé dans le dossier racine. Assurez-vous qu’un fichier nommé index.html (ou tout autre nom configuré comme fichier d’accueil) existe bien à la racine de votre dossier, avec la bonne orthographe et extension (attention à la casse).

Q : Puis-je activer HTTPS pour mon site statique ?

R : Oui, il suffit de cocher l’option SSL dans la configuration du site ServBay. ServBay générera automatiquement un certificat SSL signé par son User CA intégré, ce qui permet un accès HTTPS local sans effort.

Résumé

Grâce à ServBay, il est facile d’ajouter et de gérer localement des sites web statiques, qu’il s’agisse de pages HTML simples ou de builds front-end avancés. La gestion des domaines locaux, le support SSL et les outils de gestion de sites de ServBay optimisent nettement le flux de travail pour vos développements et tests front-end.

Ajouter un site web statique ​

Vue d’ensemble ​

Cas d’utilisation ​

Prérequis ​

Étapes ​

Étape 1 : Préparez les fichiers de votre site ​

Étape 2 : Ajouter un site dans ServBay ​

Étape 3 : Configurer les paramètres du site ​

Étape 4 : Enregistrez et appliquez les modifications ​

Vérification de la configuration ​

Remarques ​

Foire Aux Questions (FAQ) ​

Résumé ​