Hébergement
Mettre en ligne un site Web en comprenant les notions d'hébergement, de nom de domaine et de déploiement
Notions théoriques
Jusqu'à présent, vous avez travaillé sur vos fichiers HTML en local : vous ouvrez vos fichiers directement dans le navigateur depuis votre ordinateur. Mais pour que votre site soit accessible à tout le monde sur Internet, il faut le placer sur un serveur Web.
Qu'est-ce qu'un hébergement Web ?
Un hébergement Web est un service qui permet de stocker les fichiers de votre site (HTML, CSS, images…) sur un serveur connecté en permanence à Internet. Quand un visiteur saisit l'adresse de votre site dans son navigateur, le serveur lui envoie les fichiers correspondants.
- Serveur : un ordinateur puissant, allumé 24h/24, connecté à Internet
- Hébergeur : l'entreprise qui met ce serveur à disposition (OVH, Ionos, Infomaniak, etc.)
- Site statique : un site composé uniquement de fichiers HTML, CSS, images et éventuellement JavaScript — pas besoin de base de données ni de langage serveur comme PHP
Votre site HTML est un site statique : les fichiers sont envoyés tels quels au navigateur du visiteur, sans aucun traitement côté serveur. C'est le type de site le plus simple à héberger.
Le nom de domaine
Un nom de domaine est l'adresse que les visiteurs tapent dans leur navigateur pour accéder à votre site, par exemple www.monsite.fr.
Un nom de domaine se compose de deux parties :
- Le nom : la partie que vous choisissez (ex :
monsite) - L'extension (ou TLD) :
.fr,.com,.org,.io, etc.
Un nom de domaine doit être loué chaque année auprès d'un registrar (bureau d'enregistrement) comme OVH, Gandi ou Google Domains. Il n'est jamais gratuit de manière permanente (sauf sous-domaines offerts par certains hébergeurs).
Le DNS : faire le lien entre nom de domaine et serveur
Le DNS (Domain Name System) est le système qui traduit un nom de domaine en adresse IP. C'est un peu comme un annuaire téléphonique pour Internet :
| Ce que vous tapez | Ce que le DNS traduit |
|---|---|
www.monsite.fr | 91.198.174.192 |
Quand vous saisissez www.monsite.fr dans votre navigateur :
- Le navigateur interroge un serveur DNS
- Le serveur DNS répond avec l'adresse IP du serveur hébergeant le site
- Le navigateur contacte ce serveur et récupère les fichiers HTML/CSS
Les types d'hébergement
| Type | Description | Pour qui ? |
|---|---|---|
| Hébergement mutualisé | Votre site partage un serveur avec d'autres sites | Petits sites, sites vitrines |
| Serveur dédié | Vous disposez d'un serveur entier pour vous | Gros sites avec beaucoup de trafic |
| VPS (Virtual Private Server) | Une portion isolée d'un serveur, avec plus de contrôle qu'en mutualisé | Sites moyens, applications Web |
| Hébergement statique gratuit | Services spécialisés pour les sites sans base de données | Sites HTML/CSS comme le vôtre |
Hébergement gratuit pour un site statique
Pour un site composé uniquement de fichiers HTML, CSS et images, il existe des solutions gratuites et fiables :
- GitHub Pages : hébergement gratuit directement depuis un dépôt GitHub
- Netlify : hébergement gratuit avec déploiement automatique
- Vercel : similaire à Netlify, très populaire pour les sites statiques
Pour un projet d'étudiant, GitHub Pages est la solution la plus simple : vous déposez vos fichiers HTML dans un dépôt GitHub et votre site est en ligne en quelques minutes.
Le protocole HTTPS
Quand vous visitez un site, vous remarquez que l'adresse commence par http:// ou https://. Le S signifie Secure : les échanges entre le navigateur et le serveur sont chiffrés.
http://: les données circulent en clair (non sécurisé)https://: les données sont chiffrées grâce à un certificat SSL/TLS
Aujourd'hui, tous les sites doivent utiliser HTTPS. Les navigateurs modernes affichent un avertissement « Non sécurisé » pour les sites en HTTP. Les hébergeurs gratuits comme GitHub Pages fournissent automatiquement un certificat HTTPS.
Le transfert de fichiers avec FTP
Le FTP (File Transfer Protocol) est le protocole historique pour transférer vos fichiers depuis votre ordinateur vers le serveur de l'hébergeur.
- On utilise un client FTP comme FileZilla (gratuit)
- L'hébergeur vous fournit : une adresse de serveur, un identifiant et un mot de passe
- Vous déposez vos fichiers HTML, CSS et images dans le dossier du serveur (souvent nommé
www/oupublic_html/)
Avec les hébergeurs modernes comme GitHub Pages ou Netlify, le FTP n'est plus nécessaire : le déploiement se fait directement depuis un dépôt Git ou par glisser-déposer.
Exemple pratique
Voici comment mettre en ligne un site statique sur GitHub Pages en quelques étapes :
1. Créer un dépôt sur GitHub
Rendez-vous sur github.com et créez un nouveau dépôt (repository). Nommez-le par exemple mon-site.
2. Ajouter vos fichiers HTML
Déposez vos fichiers dans le dépôt. Votre fichier principal doit s'appeler index.html :
mon-site/
├── index.html
├── contact.html
├── styles.css
└── images/
├── logo.png
└── photo.jpg
3. Activer GitHub Pages
Dans les paramètres du dépôt (Settings > Pages), sélectionnez la branche main comme source.
4. Accéder à votre site
Votre site est désormais accessible à l'adresse :
https://votre-pseudo.github.io/mon-site/
Le fichier index.html est la page d'accueil par défaut : c'est ce fichier que le serveur envoie quand un visiteur accède à la racine de votre site sans préciser de nom de fichier.
Test de mémorisation/compréhension
TP pour réfléchir et résoudre des problèmes
Pour ce TP, vous allez préparer votre site de jeu vidéo préféré (créé lors des séances précédentes) pour le mettre en ligne sur GitHub Pages.
Étape 1 — Vérifier la structure de votre site
Avant de publier un site, il faut s'assurer que sa structure est correcte. Le fichier principal doit s'appeler index.html et tous les chemins vers les images et la feuille de style doivent être relatifs.
Vérifiez que votre fichier index.html contient bien la balise <link> vers votre feuille de style :
N'utilisez jamais de chemins absolus comme C:\Users\MonNom\Documents\styles.css dans vos fichiers HTML. Utilisez toujours des chemins relatifs (styles.css, images/photo.jpg) pour que votre site fonctionne quel que soit l'endroit où il est hébergé.
Étape 2 — Valider le code HTML
Avant de publier votre site, il est important de valider votre code HTML pour vérifier qu'il ne contient pas d'erreurs. Utilisez le validateur officiel du W3C : https://validator.w3.org (onglet "Validate by Direct Input").
Votre page doit commencer par la déclaration <!DOCTYPE html> et contenir les balises structurantes essentielles :
Prenez l'habitude de valider votre code HTML sur le site du W3C avant de publier. Un code valide garantit un affichage cohérent sur tous les navigateurs et améliore le référencement de votre site.
Étape 3 — Créer un dépôt GitHub
Pour héberger votre site sur GitHub Pages, vous devez d'abord créer un dépôt (repository) sur GitHub.
- Connectez-vous sur github.com
- Cliquez sur le bouton "New" pour créer un nouveau dépôt
- Nommez-le
mon-site-jeu(ou un nom de votre choix, sans espaces ni accents) - Laissez le dépôt en Public
- Cliquez sur "Create repository"
Utilisez des noms courts, en minuscules, sans espaces ni caractères spéciaux pour vos dépôts GitHub. Utilisez des tirets - pour séparer les mots (ex : mon-site-jeu).
Étape 4 — Envoyer les fichiers sur GitHub
Une fois le dépôt créé sur GitHub et initialisé en local, il faut ajouter vos fichiers, créer un commit et pousser le tout vers GitHub.
Écrivez des messages de commit qui décrivent ce que vous avez fait, pas comment. Par exemple : « Ajout de la page de contact » plutôt que « Modification de fichiers ».
Étape 5 — Activer GitHub Pages
Dernière étape : activer l'hébergement GitHub Pages pour que votre site soit accessible en ligne.
- Sur GitHub, allez dans les Settings (paramètres) de votre dépôt
- Dans le menu de gauche, cliquez sur Pages
- Sous Source, sélectionnez la branche
main - Cliquez sur Save
- Après quelques secondes, GitHub vous indique l'URL de votre site :
https://votre-pseudo.github.io/mon-site-jeu/
Après avoir activé GitHub Pages, ouvrez votre site dans un navigateur et vérifiez que toutes les pages, images et styles s'affichent correctement. Si une image ne s'affiche pas, c'est souvent un problème de chemin relatif ou de majuscules/minuscules dans le nom du fichier.