Pionnier absolu de l'architecture Jamstack, Netlify permet d'automatiser entièrement la mise en ligne d'un site statique ou d'une SPA. De la publication instantanée par glisser-déposer au pipeline CI/CD relié à GitHub avec aperçus par branche (Deploy Previews), découvrez tous les secrets d'un déploiement professionnel sur Netlify.
Glissez-déposez votre dossier de fichiers (ex: dist/) sur l'interface pour obtenir une URL HTTPS active en 10 secondes.
Chaque git push sur votre branche main déclenche la compilation et le déploiement automatique sur le CDN mondial.
Chaque Pull Request génère automatiquement une URL temporaire unique pour tester vos modifications avant la mise en production.
Chaque déploiement est immuable. En cas de bug critique, revenez à la version précédente en 1 clic sans reconstruire le projet.
# Fichier de configuration déclaratif Netlify (à placer à la racine du dépôt Git)
[build]
# Commande exécutée dans l'environnement Netlify
command = "npm run build"
# Répertoire contenant les fichiers compilés à publier sur le CDN
publish = "dist"
# ✅ RÈGLE CRITIQUE SPA (Angular / React / Vue) :
# Redirige toutes les requêtes vers index.html pour que le routeur JavaScript prenne le relais
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
# En-têtes HTTP de sécurité pour un score Lighthouse maximal
[[headers]]
for = "/*"
[headers.values]
X-Frame-Options = "DENY"
X-Content-Type-Options = "nosniff"
Referrer-Policy = "strict-origin-when-cross-origin"Selon l'état d'avancement de votre projet, vous disposez de deux méthodes complémentaires :
Connectez-vous sur app.netlify.com/drop et déposez simplement le dossier contenant votre index.html. Votre site reçoit immédiatement un nom de domaine gratuit en .netlify.app et un certificat SSL Let's Encrypt actif.
Liez votre dépôt GitHub à Netlify. Dès qu'un développeur pousse du code avec git push origin main, les serveurs de build de Netlify installent les dépendances, exécutent le script de compilation et propagent le résultat sur le CDN mondial sans coupure de service.
Si vous déployez une application Angular, React ou Vue et que vous visitez mon-site.netlify.app/profil, tout fonctionne. Mais si vous appuyez sur F5 (Actualiser), Netlify affiche un écran blanc avec « Page Not Found » ! Pourquoi ?
profil.html. La route /profil est une route virtuelle gérée en mémoire par JavaScript. Solution : Créer à la racine du dossier publié un fichier texte nommé _redirects contenant cette unique ligne :
/* /index.html 200 Le code 200 (et non 301) indique à Netlify de renvoyer le contenu d'index.html tout en conservant l'URL /profil dans la barre d'adresse du navigateur.
Rappelez-vous la règle d'or : le fichier .env ne doit jamais être commité dans Git. Pour injecter vos variables de production sur Netlify :
VITE_API_URL ou NG_APP_API_URL).| Fonctionnalité | Netlify Drop (Manuel) | Netlify Git (Automatisé) |
|---|---|---|
| Configuration requise | Aucune (1 clic) | Dépôt GitHub + compte Netlify |
| Mise à jour du site | Re-glisser le dossier manuellement | Automatique à chaque git push |
| Prévisualisation par branche (PR) | Non disponible | Oui (Deploy Previews automatiques) |
| Historique et Rollback | Basique | Retour arrière instantané sur n'importe quel commit |