Publier son site sur le Web

Le principe : du local au mondial

Jusqu’ici, vos pages HTML ne sont visibles que sur votre ordinateur. Pour qu’elles soient accessibles à tout le monde, il faut les envoyer sur un serveur connecté à Internet en permanence. Publier un site Web nécessite deux éléments :

• Un nom de domaine — l’adresse que les visiteurs taperont dans leur navigateur (ex : www.monsite.fr). C’est l’équivalent de votre adresse postale sur le Web.
• Un hébergement — un espace de stockage sur un serveur distant où seront déposés vos fichiers (HTML, CSS, images…). C’est l’équivalent de votre terrain et de votre maison.

Ces deux services sont fournis par un hébergeur Web. La plupart proposent des formules qui combinent nom de domaine et espace de stockage.

Choisir un hébergeur

Les hébergeurs classiques (payants)

Pour un site vitrine ou un projet professionnel, un hébergement mutualisé suffit largement. Les tarifs démarrent autour de 3 à 5 € par mois.

• OVHcloud (ovhcloud.com) — leader français, bon rapport qualité/prix
• Ionos (ionos.fr) — interface simple, offres d’entrée de gamme accessibles
• Infomaniak (infomaniak.com) — hébergeur suisse engagé dans une démarche éco-responsable

Les hébergeurs gratuits (pour débuter ou prototyper)

Un site statique est un site composé uniquement de fichiers HTML, CSS et JavaScript, sans base de données ni langage serveur (PHP, Python…). C’est exactement ce que nous avons construit pendant cette formation. Pour un exercice de formation ou un projet personnel, des solutions gratuites existent :

• GitHub Pages (pages.github.com) — gratuit, héberge des sites statiques directement depuis un dépôt GitHub. Idéal pour se familiariser avec Git en même temps.
• Netlify (netlify.com) — gratuit pour les sites statiques, déploiement par simple glisser-déposer d’un dossier. Très accessible pour des débutants.

Transférer ses fichiers via FTP

De quoi avez-vous besoin ?

Votre hébergeur vous fournit trois informations indispensables pour vous connecter :

1. L’adresse du serveur (ex : ftp.monsite.fr)
2. Votre identifiant (login)
3. Votre mot de passe

Ces informations se trouvent dans l’espace client de votre hébergeur, généralement dans la rubrique “Hébergement” ou “FTP”.

Le logiciel FileZilla

FileZilla est un client FTP gratuit et open source. Son interface se divise en deux panneaux : à gauche vos fichiers locaux, à droite les fichiers sur le serveur. Il suffit de glisser-déposer de gauche à droite pour publier.

Étapes de connexion dans FileZilla :
1. Hôte       → ftp.monsite.fr (adresse fournie par l'hébergeur)
2. Identifiant → votre login
3. Mot de passe → votre mot de passe
4. Port        → 21 (par défaut) ou 22 pour SFTP
5. Cliquez sur "Connexion rapide"

Ce qu’il faut envoyer

Envoyez l’ensemble du dossier de votre site en respectant l’arborescence : vos fichiers HTML, votre dossier css/, votre dossier images/, etc. Le serveur doit recevoir la même structure que celle de votre ordinateur, sinon les chemins relatifs (images, feuilles de style) ne fonctionneront plus.

• Votre page d’accueil doit impérativement s’appeler index.html — c’est le fichier que le serveur cherche par défaut quand un visiteur tape votre adresse
• Vérifiez que tous vos noms de fichiers sont en minuscules, sans espaces ni accents — certains serveurs sont sensibles à la casse

L’alternative moderne : le déploiement par glisser-déposer

Pour un site statique comme celui que nous avons créé pendant la formation, Netlify offre la méthode la plus rapide :

1. Rendez-vous sur app.netlify.com et créez un compte gratuit
2. Sur le tableau de bord, trouvez la zone “Deploy manually”
3. Glissez-déposez votre dossier de site complet dans cette zone
4. En quelques secondes, votre site est en ligne avec une URL générée automatiquement (ex : mon-projet-hello.netlify.app)
5. Vous pouvez ensuite connecter un nom de domaine personnalisé si vous en possédez un

Checklist avant mise en ligne

Avant de publier, prenez quelques minutes pour vérifier ces points essentiels :

• index.html : votre page d’accueil porte bien ce nom
• Noms de fichiers : tout en minuscules, sans espace, sans accents, sans caractères spéciaux
• Chemins relatifs : vos images s’affichent, vos CSS se chargent, vos liens fonctionnent
• Balise <title> : chaque page a un titre (= ce qui s’affiche dans l’onglet du navigateur et dans le moteur de recherche) pertinent
• Balises alt : toutes vos images ont un texte alternatif
• Test multi-navigateurs : votre site s’affiche correctement sur Chrome, Firefox et Safari
• Test mobile : ouvrez votre site sur un téléphone ou via l’outil responsive de l’inspecteur (F12)
• Poids des images : aucune image ne dépasse 200 Ko (utilisez Squoosh ou TinyPNG pour compresser)