Déploiement
Déploiement • Chapitre 3 : Déploiement d'un site web statique

Déploiement d'un site HTML, CSS et JavaScript

Déployer un site web classique sans framework (HTML/CSS/JS natif) est la base de l'ingénierie web. Pour que votre site fonctionne instantanément en ligne sans aucune erreur 404, vous devez maîtriser la structure des dossiers, la règle d'or d'index.html et la gestion rigoureuse des chemins d'accès.

📄
La Loi index.html

Le fichier d'accueil doit impérativement s'appeler index.html en minuscules à la racine exacte du dossier publié.

🔗
Chemins Relatifs

Bannissez les chemins absolus (/css/style.css) qui se brisent dès que le site est déployé dans un sous-dossier.

📦
Arborescence Propre

Organisez vos ressources en dossiers dédiés : assets/, css/, js/ et images/.

🚀
Déploiement Instantané

Publiable en 10 secondes par simple glisser-déposer (Netlify Drop) ou via un dépôt Git sans étape de compilation.

structure-projet-statique / index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Super Site Statique</title>
  <!-- ✅ Bonnes pratiques : Liens relatifs pour une portabilité totale -->
  <link rel="stylesheet" href="./css/styles.css">
  <link rel="icon" type="image/svg+xml" href="./images/favicon.svg">
</head>
<body>
  <header>
    <h1>Bienvenue sur mon site en ligne !</h1>
  </header>

  <main>
    <img src="./images/illustration.webp" alt="Aperçu" width="600" height="400">
  </main>

  <!-- Chargement asynchrone du JavaScript -->
  <script src="./js/app.js" defer></script>
</body>
</html>

Guide Méthodologique de Préparation et Publication

1. L'arborescence de fichiers standard de l'industrie

Un serveur web public ne devine pas où se trouvent vos fichiers. Voici la structure normalisée que tout développeur doit adopter : 

mon-site-web/
├── index.html        # 🔴 OBLIGATOIRE : Point d'entrée à la racine exacte
├── a-propos.html     # Page secondaire
├── contact.html      # Page secondaire
├── css/
│   └── styles.css    # Feuilles de styles
├── js/
│   └── app.js        # Scripts interactifs
└── images/
    ├── logo.svg      # Vecteurs haute fidélité
    └── hero.webp     # Images compressées au format WebP
Le Piège Fréquent : Nommer son fichier Accueil.html, home.html ou Index.HTML (avec des majuscules). Sur un serveur distant Linux, cela provoquera immédiatement une erreur 403 Forbidden ou 404 Not Found car les serveurs cherchent strictement index.html en minuscules.

2. Le piège mortel des chemins d'accès

C'est l'erreur la plus destructrice lors d'un premier déploiement :

❌ Chemin Absolu Brut
<link rel="stylesheet" href="/css/styles.css">

Le slash initial / demande au navigateur de chercher à la racine absolue du domaine (https://domaine.com/css/styles.css). Si votre projet est hébergé sur GitHub Pages sous https://user.github.io/mon-projet/, le fichier CSS sera introuvable !

✅ Chemin Relatif Portatif
<link rel="stylesheet" href="./css/styles.css">

Le préfixe ./ indique de chercher à partir du dossier actuel où se trouve la page HTML. Votre site fonctionnera à la perfection quel que soit le sous-dossier ou le domaine final !

3. Tester avec un vrai protocole HTTP local (Pas de file://)

Ne double-cliquez jamais sur index.html pour l'ouvrir avec l'URL file:///C:/Users/... dans votre navigateur. Le protocole file:// bloque les modules JavaScript (import/export) et les requêtes fetch() pour des raisons de sécurité.

Utilisez un mini-serveur statique local en une seule ligne de commande :

# Avec Node.js (sans rien installer) :
npx serve .

# Ou avec Python (intégré nativement) :
python -m http.server 8000

Tableau Comparatif : Bonnes Pratiques vs Mauvaises Pratiques

ÉlémentÀ BANNIR Absolument ❌RECOMMANDÉ en Production ✅
Nom du fichier d'accueilhome.html, index.HTML, Accueil.htmlindex.html (100% minuscules)
Liens d'images et CSSC:\Users\Site\images\logo.png ou /logo.png./images/logo.webp ou images/logo.svg
Format des visuelsPNG bruts de 5 Mo ou BMP non compressésWebP, AVIF ou SVG vectoriel optimisé
Inclusion des scripts<script src="app.js"> dans le <head> bloquant<script src="./js/app.js" defer>