🌐 TUTORIEL PAS À PAS

⚡ Héberger un site statique sur Netlify

📅 Mis à jour : Août 2026 ⏱️ Durée : 15 min 📋 Niveau : Débutant 🌐 Netlify 📄 Site statique 🆓 Gratuit

Netlify est une plateforme d’hébergement moderne qui simplifie le déploiement de sites statiques et d’applications web. Avec son glisser-déposer ou son intégration avec Git, vous pouvez mettre en ligne votre site en quelques secondes. Ce tutoriel vous guide pour héberger un site statique sur Netlify, que vous partiez d’un dépôt GitHub ou d’un dossier local.

📖 Pourquoi Netlify ?
📌 Prérequis :

1 Créer un compte Netlify

1.1 – Se connecter
Rendez-vous sur netlify.com et cliquez sur Sign up.
Vous pouvez vous inscrire avec votre compte GitHub, GitLab, Bitbucket ou une adresse email.
✅ Compte Netlify créé.

2 Déployer par glisser-déposer (sans Git)

2.1 – Ouvrir la page de déploiement
Une fois connecté, vous arrivez sur le tableau de bord (Sites). Faites glisser votre dossier de site sur la zone prévue à cet effet (ou cliquez sur Drag and drop your site folder here).
📂 Glissez-déposez votre dossier ici
2.2 – Déploiement automatique
Netlify détecte automatiquement les fichiers, les compresse, et les déploie sur son CDN. En quelques secondes, votre site est en ligne.
✅ Site déployé. Une URL temporaire vous est attribuée : https://nom-aleatoire.netlify.app.

3 Déployer depuis un dépôt Git (déploiement continu)

3.1 – Connecter votre dépôt
Dans le tableau de bord Netlify, cliquez sur Add new site → Import an existing project.
Choisissez GitHub, GitLab ou Bitbucket et autorisez Netlify à accéder à vos dépôts.
3.2 – Sélectionner le dépôt
Sélectionnez le dépôt contenant votre site. Netlify détecte automatiquement le framework (ou le mode statique).
Configurez éventuellement les options de build (si vous utilisez un générateur de site comme Hugo, Next.js, etc.). Pour un site statique simple, laissez les valeurs par défaut.
✅ Dépôt connecté. Netlify déploie votre site.
3.3 – Déploiements automatiques
À chaque git push sur la branche principale, Netlify redéploie automatiquement votre site. Vous pouvez voir les logs de déploiement dans l’onglet Deploys.
✅ Déploiement continu actif.

4 (Optionnel) Utiliser un nom de domaine personnalisé

4.1 – Acheter ou utiliser un domaine
Vous pouvez acheter un domaine directement via Netlify ou utiliser un domaine existant (ex: mon-portfolio.fr).
4.2 – Configurer le domaine dans Netlify
Allez dans Site settings → Domain management → Add custom domain. Saisissez votre domaine.
Netlify vous fournira des enregistrements DNS à ajouter chez votre registraire (ex: un CNAME pointant vers votre URL Netlify).
✅ Domaine personnalisé configuré.

5 Conseils et bonnes pratiques

1. Utiliser un fichier _redirects
Netlify permet de gérer les redirections et les règles de réécriture via un fichier _redirects à la racine.
# Exemple de redirection
/old-page /new-page 301
2. Activer le Split Testing
Netlify propose des tests A/B pour optimiser l’expérience utilisateur.
3. Formulaires sans backend
Netlify intègre une gestion de formulaires : ajoutez l’attribut data-netlify="true" à vos formulaires HTML pour recevoir les soumissions par email.
4. Prévisualiser les déploiements
Netlify génère une URL de prévisualisation pour chaque pull request (si vous utilisez GitHub). Idéal pour valider les modifications avant la mise en production.

✅ Test de validation

🎉 Votre site est en ligne si :

📚 Ressources complémentaires

← Retour au portail
BTS SIO – Lycée NDLP Avranches – Tutoriel Netlify v1.0