Pourquoi ce chapitre
Vous savez déjà mettre une page en ligne avec WordPress : on publie un article, et le CMS s’occupe de tout le reste en coulisses. Mais jusqu’ici, tous les fichiers HTML, CSS et JavaScript que vous avez produits dans ce cours sont restés sur votre ordinateur, ouverts uniquement dans votre navigateur en local.
Ce chapitre comble ce manque : comment déposer de simples fichiers (sans passer par un CMS) sur un serveur, pour qu’ils deviennent accessibles à n’importe qui, via une adresse web.
Prérequis
- Savoir utiliser FileZilla — se connecter à son hébergement via FTP, naviguer dans l’arborescence des dossiers, envoyer des fichiers depuis son ordinateur vers le serveur.
- Savoir créer un sous-domaine et le faire pointer vers un répertoire — cette manipulation se fait depuis le panneau d’administration de votre hébergement (OVH, o2switch, Hostinger, etc.). L’interface exacte varie d’un hébergeur à l’autre : ce chapitre ne détaille pas cette procédure précise, à chercher dans la documentation de votre propre hébergeur si besoin.
Si l’un de ces deux prérequis vous manque, ce chapitre suppose que vous savez déjà le faire — il se concentre uniquement sur l’organisation des fichiers une fois ces deux étapes réalisées.
Étape 1 : Créer un répertoire dédié avec FileZilla
Connectez-vous à votre hébergement via FileZilla. Dans l’arborescence de votre serveur, créez un nouveau répertoire — par exemple nommé code — qui accueillera tous vos projets HTML/CSS/JS, séparément du reste de votre site WordPress.
Étape 2 : Un sous-domaine dédié (bonne pratique recommandée)
Plutôt que d’accéder à vos fichiers via une adresse du type monnomdedomaine.fr/code/, il est préférable de créer un sous-domaine dédié, par exemple :
code.monnomdedomaine.fr
Ce sous-domaine doit être configuré, depuis le panneau d’administration de votre hébergement, pour pointer directement vers le répertoire code créé à l’étape 1. Une fois cette configuration faite, tout ce que vous déposerez dans ce répertoire via FileZilla sera automatiquement accessible depuis cette adresse.
Pourquoi cette pratique plutôt qu’un simple sous-dossier ? Ça garde une séparation claire entre votre site WordPress (à la racine du domaine) et vos projets de code (isolés sur leur propre sous-domaine), sans jamais risquer d’interférer avec les fichiers de WordPress.
Étape 3 : Déposer les fichiers d’un projet
Une fois le répertoire code en place (et le sous-domaine configuré vers lui), il suffit de déposer, via FileZilla, votre fichier index.html, ainsi que vos fichiers CSS et JS — avec ou sans sous-dossier, selon l’organisation que vous avez choisie (chapitres 35 et 720).
Exemple de structure minimale, sans sous-dossier :
code/
├── index.html
├── style.css
└── script.js
Une fois ces fichiers déposés, l’adresse code.monnomdedomaine.fr affiche directement le contenu de votre index.html.
Étape 4 : Plusieurs projets, plusieurs sous-répertoires
Si vous avez plusieurs projets à héberger, créez autant de sous-répertoires que nécessaire à l’intérieur de code, un par projet :
code/
├── projet-formulaire/
│ ├── index.html
│ └── style.css
│
├── projet-slider/
│ ├── index.html
│ └── style.css
│
└── projet-catalogue/
└── index.html
Chaque sous-répertoire doit contenir son propre index.html (et ses fichiers CSS/JS associés). Pour consulter un projet précis, on ajoute simplement le nom du sous-dossier à la fin de l’adresse du sous-domaine :
code.monnomdedomaine.fr/projet-formulaire/code.monnomdedomaine.fr/projet-slider/code.monnomdedomaine.fr/projet-catalogue/
Le serveur affiche automatiquement le fichier index.html présent dans le dossier demandé — c’est une convention standard de tous les serveurs web, déjà rencontrée en filigrane depuis le chapitre 35.
Exercice
Mettez en ligne la page réalisée au chapitre 1000 (votre intégration de la maquette du catalogue vivant), en suivant toute la procédure vue dans ce chapitre : dépôt dans un sous-répertoire dédié via FileZilla, puis vérification que la page s’affiche correctement à l’adresse de votre sous-domaine.