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

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 :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Bienvenue sur mon portfolio</h1>
    <p>Je suis développeur web débutant.</p>
    <script src="script.js"></script>
</body>
</html>

É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

1. Allez sur https://github.com
2. Cliquez sur le bouton « + » en haut à droite, puis « New repository »
3. Nommez votre dépôt : mon-portfolio
4. Laissez « Public » sélectionné
5. Ne cochez PAS « Initialize this repository with a README »
6. 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

1. Dans votre dépôt GitHub, allez dans « Settings »
2. Dans le menu de gauche, cliquez sur « Pages »
3. Sous « Source », sélectionnez « Deploy from a branch »
4. Sous « Branch », choisissez main et / (root)
5. 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

1. Allez sur https://www.netlify.com/
2. Cliquez sur « Sign up »
3. Connectez-vous avec GitHub (recommandé)

Étape 2 : Importer votre projet depuis GitHub

1. Dans le dashboard Netlify, cliquez sur « Add new site » > « Import an existing project »
2. Sélectionnez « Deploy with GitHub »
3. Autorisez Netlify à accéder à vos dépôts GitHub
4. 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

1. Cliquez sur « Deploy site »
2. Netlify build et déploie votre site en quelques secondes
3. Vous obtenez une URL aléatoire : https://random-name-123.netlify.app

Étape 5 : Personnaliser le nom de domaine

1. Allez dans « Site settings » > « Domain management »
2. Cliquez sur « Options » > « Edit site name »
3. Changez en : mon-portfolio.netlify.app

Méthode 2 : Drag & Drop (super simple)

1. Dans le dashboard Netlify, cliquez sur « Add new site » > « Deploy manually »
2. Glissez-déposez votre dossier de projet dans la zone
3. 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 :

<form name="contact" method="POST" data-netlify="true">
    <input type="text" name="name" placeholder="Votre nom" required>
    <input type="email" name="email" placeholder="Votre email" required>
    <textarea name="message" placeholder="Votre message"></textarea>
    <button type="submit">Envoyer</button>
</form>

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

1. Allez sur https://vercel.com/
2. Cliquez sur « Sign Up »
3. Connectez-vous avec GitHub

Étape 2 : Importer votre projet

1. Dans le dashboard, cliquez sur « Add New… » > « Project »
2. Sélectionnez « Import Git Repository »
3. Autorisez Vercel à accéder à vos dépôts
4. 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

1. Cliquez sur « Deploy »
2. Vercel build et déploie votre site
3. 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 : Hébergeur européen très répandu
• Google Domains : Simple et fiable
• Cloudflare : Prix au coût, sans marge

Configurer un domaine personnalisé

Sur GitHub Pages

1. Dans votre dépôt, allez dans Settings > Pages
2. Sous « Custom domain », entrez votre domaine : www.monsite.com
3. Chez votre registrar, ajoutez un enregistrement DNS :
   • Type : CNAME
   • Name : www
   • Value : username.github.io
4. Attendez la propagation DNS (quelques minutes à quelques heures)

Sur Netlify

1. Site settings > Domain management
2. Cliquez sur « Add custom domain »
3. Entrez votre domaine
4. Netlify vous donne les DNS à configurer chez votre registrar
5. Ajoutez les enregistrements DNS fournis
6. Netlify active automatiquement HTTPS (certificat Let’s Encrypt)

Sur Vercel

1. Project settings > Domains
2. Ajoutez votre domaine
3. Suivez les instructions pour configurer les DNS
4. 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

1. Lisez attentivement les logs d’erreur
2. Vérifiez que npm install et npm run build fonctionnent en local
3. Assurez-vous que toutes les dépendances sont listées dans package.json
4. 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 :

1. Créez votre site localement
2. Versionnez avec Git
3. Poussez sur GitHub
4. Connectez votre dépôt à GitHub Pages, Netlify ou Vercel
5. Votre site est en ligne avec HTTPS automatique !

Exercice pratique :

1. Créez un portfolio simple avec HTML/CSS
2. Déployez-le sur les trois plateformes
3. Comparez les performances avec Google Lighthouse
4. Choisissez celle qui vous convient le mieux

Le monde attend de découvrir vos créations. Bon déploiement !

À propos de l'auteur

Pascal

Pascal — SRE & Observability Engineer. J'applique les pratiques SRE (SLI/SLO, alerting, observabilité) à mon homelab Proxmox, avec les mêmes exigences qu'en production.

À propos nines.arewel.com LinkedIn GitHub X Tous les articles