Héberger son premier site web – GitHub Pages, Netlify, Vercel

Introduction : L’hébergement web en 2025

Vous avez créé votre premier site web et vous voulez le partager avec le monde ? Bonne nouvelle : en 2025, déployer un site web est devenu extrêmement simple et souvent gratuit. Fini l’époque où il fallait configurer des serveurs FTP compliqués ou payer des hébergements coûteux.

Aujourd’hui, des plateformes comme GitHub Pages, Netlify et Vercel permettent de déployer un site en quelques clics, avec des fonctionnalités professionnelles incluses : HTTPS automatique, CDN global, déploiement continu, et domaine personnalisé.

Qu’est-ce que l’hébergement web ?

L’hébergement web consiste à rendre votre site accessible sur Internet. Vos fichiers HTML, CSS et JavaScript sont stockés sur un serveur qui les envoie aux visiteurs qui demandent votre site.

Sites statiques vs dynamiques

• Site statique : Fichiers HTML/CSS/JS servis directement au visiteur. Pas de base de données ni de traitement côté serveur. Exemples : portfolio, blog, landing page.
• Site dynamique : Génère du contenu à la volée avec un serveur backend et une base de données. Exemples : réseau social, e-commerce complexe.

Les plateformes présentées ici excellent pour les sites statiques, mais Netlify et Vercel supportent aussi des fonctionnalités serverless pour des sites plus avancés.

Comparaison des trois plateformes

Critère	GitHub Pages	Netlify	Vercel
Difficulté	Très facile	Très facile	Très facile
Prix	Gratuit	Gratuit (100GB/mois)	Gratuit (100GB/mois)
Bande passante	100GB/mois	100GB/mois	100GB/mois
Build time	N/A (pas de build)	300 min/mois	6000 min/mois
HTTPS	Oui, automatique	Oui, automatique	Oui, automatique
Domaine personnalisé	Oui	Oui	Oui
Déploiement automatique	Oui (push Git)	Oui (push Git)	Oui (push Git)
Fonctions serverless	Non	Oui	Oui
Frameworks supportés	HTML/CSS/JS pur, Jekyll	Tous (React, Vue, Next, etc.)	Tous (optimisé pour Next.js)
Meilleur pour	Sites simples, portfolios	Sites statiques, JAMstack	Applications Next.js/React

GitHub Pages : Hébergement gratuit pour débutants

Avantages de GitHub Pages

• Gratuit et illimité pour les projets publics
• Intégration parfaite avec Git : push = déploiement automatique
• Simplicité : idéal pour apprendre
• Communauté : utilisé par des millions de développeurs
• URL gratuite : username.github.io/nom-projet

Limitations

• Sites publics uniquement (sauf avec GitHub Pro)
• Pas de backend/serveur
• Pas de fonctions serverless
• Build limité (principalement Jekyll)

Tutoriel : Déployer sur GitHub Pages

Méthode 1 : Projet simple HTML/CSS/JS

Prérequis : Avoir un compte GitHub et Git installé.

Étape 1 : Créer votre site localement

# Créer un dossier de projet
mkdir mon-portfolio
cd mon-portfolio

# Créer vos fichiers
touch index.html style.css script.js

Contenu minimal d’index.html :

    
    
    
    


    # Bienvenue sur mon portfolio
    
Je suis développeur web débutant.
    



Étape 2 : Initialiser Git et créer le dépôt
# Initialiser Git
git init

# Ajouter tous les fichiers
git add .

# Premier commit
git commit -m "Initial commit"

Étape 3 : Créer un dépôt sur GitHub
Allez sur https://github.com
Cliquez sur le bouton « + » en haut à droite, puis « New repository »
Nommez votre dépôt : mon-portfolio
Laissez « Public » sélectionné
Ne cochez PAS « Initialize this repository with a README »
Cliquez sur « Create repository »
Étape 4 : Lier votre projet local à GitHub
# Ajouter le remote (remplacez USERNAME par votre nom d'utilisateur)
git remote add origin https://github.com/USERNAME/mon-portfolio.git

# Pousser votre code
git branch -M main
git push -u origin main

Étape 5 : Activer GitHub Pages
Dans votre dépôt GitHub, allez dans « Settings »
Dans le menu de gauche, cliquez sur « Pages »
Sous « Source », sélectionnez « Deploy from a branch »
Sous « Branch », choisissez main et / (root)
Cliquez sur « Save »
Votre site sera disponible à : https://USERNAME.github.io/mon-portfolio/
Le déploiement prend généralement 1-2 minutes. Actualisez la page des paramètres pour voir l’URL finale.
Méthode 2 : Site utilisateur/organisation
Pour avoir une URL plus courte username.github.io, créez un dépôt nommé exactement username.github.io.
# Créer un dépôt nommé : votre-username.github.io
# Exemple : alice-dev.github.io

# Le site sera accessible directement à :
# https://alice-dev.github.io/

Mettre à jour votre site
# Modifiez vos fichiers localement
# Puis :
git add .
git commit -m "Mise à jour du contenu"
git push

# GitHub Pages redéploie automatiquement votre site

Netlify : La puissance et la simplicité
Pourquoi choisir Netlify ?
Déploiement ultra-rapide : En moyenne, plus rapide que la concurrence
Fonctionnalités intégrées : formulaires, fonctions serverless, redirections
CDN global : Site servi depuis des serveurs proches des visiteurs
Prévisualisations de déploiement : Testez chaque pull request avant de fusionner
Support de tous les frameworks : React, Vue, Next.js, Gatsby, etc.
Optimisations automatiques : Compression d’images, minification
Tutoriel : Déployer sur Netlify
Méthode 1 : Depuis GitHub (recommandé)
Étape 1 : Créer un compte Netlify
Allez sur https://www.netlify.com/
Cliquez sur « Sign up »
Connectez-vous avec GitHub (recommandé)
Étape 2 : Importer votre projet depuis GitHub
Dans le dashboard Netlify, cliquez sur « Add new site » > « Import an existing project »
Sélectionnez « Deploy with GitHub »
Autorisez Netlify à accéder à vos dépôts GitHub
Choisissez votre dépôt mon-portfolio
Étape 3 : Configuration du build
Pour un site HTML/CSS/JS pur :
Branch to deploy : main
Build command : laisser vide
Publish directory : . (ou laisser vide)
Pour un projet React/Vue/Next.js, Netlify détecte automatiquement la configuration.
Étape 4 : Déployer
Cliquez sur « Deploy site »
Netlify build et déploie votre site en quelques secondes
Vous obtenez une URL aléatoire : https://random-name-123.netlify.app
Étape 5 : Personnaliser le nom de domaine
Allez dans « Site settings » > « Domain management »
Cliquez sur « Options » > « Edit site name »
Changez en : mon-portfolio.netlify.app
Méthode 2 : Drag & Drop (super simple)
Dans le dashboard Netlify, cliquez sur « Add new site » > « Deploy manually »
Glissez-déposez votre dossier de projet dans la zone
Netlify déploie instantanément votre site
Inconvénient : Pas de déploiement automatique. Vous devez re-uploader manuellement à chaque mise à jour.
Déploiement continu avec Netlify
Une fois connecté à GitHub, chaque push sur la branche main redéploie automatiquement votre site :
# Faire des modifications localement
git add .
git commit -m "Ajout d'une nouvelle section"
git push

# Netlify détecte le push et redéploie automatiquement
# Vous recevez un email de confirmation quand c'est fait

Fonctionnalités avancées de Netlify
Formulaires
Ajoutez simplement l’attribut netlify à vos formulaires HTML :

    
    
    
    Envoyer


Netlify capture automatiquement les soumissions (visibles dans le dashboard).
Redirections et rewrites
Créez un fichier redirects à la racine :
# Redirection simple
/ancien-chemin  /nouveau-chemin  301

# SPA fallback (React Router, etc.)
/  /index.html  200

Vercel : Optimisé pour Next.js et React
Pourquoi choisir Vercel ?
Optimisé pour Next.js : Créé par la même équipe
Edge Network ultra-rapide : Performance exceptionnelle
Build time généreux : 6000 minutes/mois (vs 300 pour Netlify)
Serverless functions : Ajoutez facilement du backend
Prévisualisation automatique : Chaque branch a son URL
Analytics intégrés : Suivi des performances
Tutoriel : Déployer sur Vercel
Méthode 1 : Via l’interface web
Étape 1 : Créer un compte Vercel
Allez sur https://vercel.com/
Cliquez sur « Sign Up »
Connectez-vous avec GitHub
Étape 2 : Importer votre projet
Dans le dashboard, cliquez sur « Add New… » > « Project »
Sélectionnez « Import Git Repository »
Autorisez Vercel à accéder à vos dépôts
Choisissez votre dépôt
Étape 3 : Configuration
Vercel détecte automatiquement votre framework (Next.js, React, Vue, etc.) et configure le build.
Pour un site HTML pur :
Build Command : laisser vide
Output Directory : .
Étape 4 : Déployer
Cliquez sur « Deploy »
Vercel build et déploie votre site
URL fournie : https://mon-portfolio.vercel.app
Méthode 2 : Via la CLI Vercel (pour les pros)
# Installer Vercel CLI globalement
npm install -g vercel

# Dans votre dossier de projet
cd mon-portfolio

# Lancer le déploiement
vercel

# Suivre les instructions interactives
# Vercel configure automatiquement tout

# Pour déployer en production
vercel --prod

Déploiement automatique
Comme Netlify, Vercel redéploie automatiquement à chaque push :
Production : Push sur main → https://mon-site.vercel.app
Preview : Push sur une branche → URL unique de prévisualisation
Exemple : Déployer une app Next.js
# Créer une app Next.js
npx create-next-app@latest mon-app-nextjs
cd mon-app-nextjs

# Initialiser Git
git init
git add .
git commit -m "Initial commit"

# Créer un dépôt sur GitHub et pousser
git remote add origin https://github.com/USERNAME/mon-app-nextjs.git
git push -u origin main

# Sur Vercel : importer le dépôt
# Vercel détecte Next.js automatiquement et déploie !

Domaines personnalisés
Acheter un nom de domaine
Vous pouvez acheter un domaine chez des registrars comme :
Namecheap : ~10€/an pour un .com
OVH : Populaire en France
Google Domains : Simple et fiable
Cloudflare : Prix au coût, sans marge
Configurer un domaine personnalisé
Sur GitHub Pages
Dans votre dépôt, allez dans Settings > Pages
Sous « Custom domain », entrez votre domaine : www.monsite.com
Chez votre registrar, ajoutez un enregistrement DNS :
   – Type : CNAME

   – Name : www

   – Value : username.github.io
Attendez la propagation DNS (quelques minutes à quelques heures)
Sur Netlify
Site settings > Domain management
Cliquez sur « Add custom domain »
Entrez votre domaine
Netlify vous donne les DNS à configurer chez votre registrar
Ajoutez les enregistrements DNS fournis
Netlify active automatiquement HTTPS (certificat Let’s Encrypt)
Sur Vercel
Project settings > Domains
Ajoutez votre domaine
Suivez les instructions pour configurer les DNS
HTTPS activé automatiquement
Comparaison finale : Que choisir ?
Choisissez GitHub Pages si :
Vous débutez et voulez la solution la plus simple
Vous avez un site HTML/CSS/JS pur
Vous voulez rester dans l’écosystème GitHub
Vous créez de la documentation ou un blog Jekyll
Vous n’avez pas besoin de fonctions serverless
Choisissez Netlify si :
Vous voulez le déploiement le plus rapide
Vous utilisez un générateur de site statique (Gatsby, Hugo, Eleventy)
Vous avez besoin de formulaires sans backend
Vous appréciez les fonctionnalités intégrées (redirections, split testing)
Vous voulez une interface utilisateur très intuitive
Choisissez Vercel si :
Vous utilisez Next.js (optimisé pour ça)
Vous avez besoin de beaucoup de build time
Vous voulez les meilleures performances possibles
Vous prévoyez d’ajouter des fonctions serverless
Vous aimez utiliser la CLI pour déployer
Bonnes pratiques de déploiement
1. Testez localement avant de déployer
# Pour un site statique, utilisez un serveur local
npx serve .
# ou
python3 -m http.server 8000

# Pour Next.js/React
npm run dev

2. Utilisez des variables d’environnement
Ne commitez JAMAIS vos clés API dans Git. Utilisez les variables d’environnement de la plateforme :
Netlify : Site settings > Build & deploy > Environment
Vercel : Project settings > Environment Variables
3. Optimisez vos images
Compressez vos images avant de les uploader :
Utilisez TinyPNG ou Squoosh
Préférez le format WebP pour le web
Utilisez des CDN d’images (Cloudinary, Imgix)
4. Activez la mise en cache
Les trois plateformes configurent automatiquement le cache, mais vous pouvez l’améliorer avec des headers HTTP personnalisés.
5. Surveillez les performances
Utilisez Google Lighthouse (intégré à Chrome DevTools)
Vérifiez les Core Web Vitals
Activez les analytics (Vercel Analytics, Netlify Analytics, ou Google Analytics)
Dépannage des problèmes courants
Mon site ne se met pas à jour
Videz le cache de votre navigateur (Ctrl+Shift+R ou Cmd+Shift+R)
Vérifiez que votre commit a bien été poussé : git push
Consultez les logs de déploiement dans le dashboard de la plateforme
Erreur 404 sur certaines pages (React/Vue)
Pour les Single Page Applications, configurez une redirection :
Netlify : Créez redirects :
/  /index.html  200

Vercel : Créez vercel.json :
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Le build échoue
Lisez attentivement les logs d’erreur
Vérifiez que npm install et npm run build fonctionnent en local
Assurez-vous que toutes les dépendances sont listées dans package.json
Vérifiez la version de Node.js utilisée par la plateforme
Conclusion : Votre site en ligne en minutes
En 2025, déployer un site web n’a jamais été aussi simple. Que vous choisissiez GitHub Pages pour sa simplicité, Netlify pour ses fonctionnalités, ou Vercel pour ses performances, vous pouvez mettre votre site en ligne en quelques minutes.
Résumé du processus :
Créez votre site localement
Versionnez avec Git
Poussez sur GitHub
Connectez votre dépôt à GitHub Pages, Netlify ou Vercel
Votre site est en ligne avec HTTPS automatique !
Exercice pratique :
Créez un portfolio simple avec HTML/CSS
Déployez-le sur les trois plateformes
Comparez les performances avec Google Lighthouse
Choisissez celle qui vous convient le mieux

Le monde attend de découvrir vos créations. Bon déploiement !
Share this article
TwitterFacebookLinkedInRedditEmail
Related Articles
Configuration du Collector OpenTelemetry (otel-collector-config.yaml)
Guide complet de l'observabilité avec OpenTelemetry : implémentation des trois piliers (métriques, traces, logs) pour des systèmes de production résilients.
VS Code – Configuration et extensions essentielles pour développeurs
Visual Studio Code est l'éditeur de code le plus populaire en 2025. Découvrez comment l'installer, le configurer et installer les extensions essentielles pour booster votre productivité.
Architecture Event-Driven : CQRS, Event Sourcing et Message Queues
Guide complet des architectures événementielles modernes : CQRS, Event Sourcing, Kafka et RabbitMQ pour des systèmes scalables et résilients.