Mettre en ligne (Deploy) : De votre ordi au monde entier

Ton site marche sur ton ordinateur. Tu tapes localhost:3000 dans ton navigateur et ta création s'affiche. C'est beau, ça fonctionne, tu es fier de toi.

Mais là, tu veux que ta mère puisse le voir. Ton client. Le monde entier.

C'est le moment du déploiement. Et je vais te montrer que c'est beaucoup plus simple que tu ne le penses.

C'est Quoi "Déployer" ? (Explication Simple)

Ton site vit actuellement sur ton ordinateur. Quand tu fermes ton ordi ou que tu te déconnectes de ton WiFi, personne ne peut le voir. Il n'existe que pour toi.

Déployer, c'est copier ton site sur un serveur (un ordinateur ultra-puissant qui reste allumé 24h/24, 7j/7) quelque part dans le monde, avec une adresse accessible par tous.

Avant le déploiement :

• Adresse : http://localhost:3000
• Qui peut voir : Toi uniquement
• Disponibilité : Seulement quand ton ordi est allumé

Après le déploiement :

• Adresse : https://ton-super-projet.vercel.app (ou ton propre domaine)
• Qui peut voir : Tout le monde sur la planète
• Disponibilité : 24h/24, même quand tu dors

Une analogie : Tu as cuisiné un plat chez toi (localhost). Déployer, c'est ouvrir un restaurant où tout le monde peut venir goûter ton plat.

Pourquoi Vercel Est Le Plus Simple

Il existe des dizaines de services pour héberger un site. J'ai testé la plupart : AWS, Netlify, Render, Railway, Heroku... Pour un débutant, Vercel gagne haut la main.

Pourquoi ?

1. Créé par l'équipe de Next.js : Si tu utilises Next.js (et je te le recommande), Vercel est optimisé pour
2. Gratuit pour les projets perso : Tu ne paies que si tu as un vrai business avec beaucoup de trafic
3. Déploiement automatique : Tu push sur GitHub, ton site se met à jour tout seul
4. Interface simple : Pas besoin d'être ingénieur DevOps
5. HTTPS automatique : Le petit cadenas dans la barre d'adresse, gratuit et automatique

Le Processus Complet, Étape par Étape

Étape 1 : Créer un compte Vercel

C'est la partie la plus longue (et ça prend 2 minutes).

1. Va sur vercel.com
2. Clique sur "Sign Up"
3. Connecte-toi avec GitHub (c'est le plus simple car Vercel aura accès à tes projets automatiquement)

Si tu n'as pas encore de compte GitHub, c'est le moment d'en créer un. Tu en auras besoin de toute façon pour sauvegarder ton code.

Étape 2 : S'assurer que ton projet est sur GitHub

Avant de déployer, ton projet doit être sur GitHub. Si ce n'est pas encore le cas, demande à Claude :

Claude va t'aider à créer un repository (un "repo", c'est l'endroit où est stocké ton projet sur GitHub) et à y envoyer ton code.

Étape 3 : Connecter ton projet à Vercel

Tu as deux options, aussi simples l'une que l'autre.

Option A : Via le site Vercel (recommandé pour les débutants)

1. Sur Vercel, clique sur "Add New Project"
2. Tu verras la liste de tes repos GitHub
3. Sélectionne celui que tu veux déployer
4. Vercel détecte automatiquement le type de projet (Next.js, React, etc.)
5. Clique sur "Deploy"

En 2-3 minutes, ton site est en ligne. Vercel te donne une URL du type ton-projet-abc123.vercel.app.

Option B : Via Claude Code (plus rapide une fois que tu connais)

Claude va :

1. Vérifier que Vercel CLI est installé (sinon l'installer)
2. Te connecter à Vercel si ce n'est pas déjà fait
3. Déployer ton projet
4. Te donner l'URL

Étape 4 : Célébrer

Sérieusement. Tu viens de mettre un site en ligne. C'est une vraie compétence. Partage l'URL avec quelqu'un, montre ce que tu as créé.

Les Mises à Jour Automatiques (La Magie)

Le meilleur truc avec Vercel : une fois configuré, tu n'as plus rien à faire pour les mises à jour.

Le workflow magique :

1. Tu fais des modifications sur ton projet
2. Tu sauvegardes sur GitHub (push)
3. Vercel détecte automatiquement le changement
4. Vercel redéploie ton site (ça prend 30 secondes à 2 minutes)
5. Ton site en ligne est à jour

Tu n'as pas besoin de retourner sur Vercel, pas besoin de cliquer sur "Deploy" à nouveau. C'est automatique à chaque push.

Une analogie : Imagine un assistant qui surveille ton dossier Google Drive, et dès que tu modifies un fichier, il l'imprime automatiquement et l'affiche dans ta vitrine. Tu modifies, il affiche. Sans intervention de ta part.

Ajouter Ton Propre Nom de Domaine

L'URL Vercel (ton-projet.vercel.app) c'est bien pour tester et partager avec des amis. Mais si c'est un vrai projet, tu veux probablement ton-projet.com ou ton-projet.fr.

Où acheter un domaine ?

Plusieurs options, toutes se valent à peu près :

• OVH (français, support en français)
• Namecheap (souvent moins cher)
• Google Domains (simple si tu as déjà un compte Google)
• Porkbun (bon rapport qualité/prix)

Un domaine .com coûte environ 10-15€/an. Un .fr un peu moins.

Comment le connecter à Vercel ?

En gros, le processus est :

1. Dans Vercel, va dans ton projet > Settings > Domains
2. Ajoute ton domaine (mon-super-projet.com)
3. Vercel te donne des informations à copier
4. Va chez ton registrar (OVH, Namecheap, etc.) et configure les DNS
5. Attends quelques minutes à quelques heures pour la propagation

Claude peut te guider étape par étape selon où tu as acheté ton domaine.

Les Variables d'Environnement (Les Secrets)

Tu te souviens du fichier .env dont je parle dans l'article sur .claudeignore ? C'est le fichier qui contient tes secrets : clés API, mots de passe de base de données, etc.

Ce fichier n'est PAS sur GitHub (pour des raisons de sécurité). Donc quand Vercel clone ton projet, il n'a pas ces secrets.

Tu dois les ajouter manuellement sur Vercel :

1. Va dans ton projet Vercel
2. Settings > Environment Variables
3. Ajoute chaque variable avec son nom et sa valeur

Exemple : Si ton .env.local contient :

NEXT_PUBLIC_SUPABASE_URL=https://abc123.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1...

Tu dois ajouter ces deux variables dans Vercel avec exactement les mêmes noms et valeurs.

Claude te fera la liste exacte selon ton projet.

L'Erreur Classique (et Comment la Résoudre)

Tu déploies, tu vas sur ton URL, et... page blanche ou message d'erreur.

9 fois sur 10, c'est un problème de variables d'environnement.

Le site marche en local parce que tu as ton fichier .env.local. Mais sur Vercel, ces variables n'existent pas si tu ne les as pas ajoutées.

Comment diagnostiquer :

Claude va te montrer :

1. Où trouver les logs sur Vercel (c'est dans ton projet > Deployments > cliquer sur le dernier déploiement > "View Logs")
2. Comment interpréter les erreurs
3. Comment les corriger

Les autres causes fréquentes :

• Une dépendance manquante (un package que tu as oublié d'ajouter dans package.json)
• Une erreur dans ton code qui n'apparaît qu'en production
• Un chemin de fichier qui fonctionne sur ton Mac mais pas sur Linux (les serveurs Vercel sont sous Linux)

Ce Que Vercel Gère Pour Toi

Quand tu déploies sur Vercel, tu n'as pas à te soucier de :

Hébergement : Tes fichiers sont répliqués sur des serveurs dans le monde entier (CDN). Quelqu'un à Tokyo et quelqu'un à Paris chargeront ton site rapidement, depuis un serveur proche d'eux.

HTTPS : Le petit cadenas qui montre que la connexion est sécurisée. Vercel le configure automatiquement et gratuitement. Plus besoin de s'occuper de certificats SSL.

Mises à jour : Déploiement automatique à chaque push sur GitHub. Tu n'as rien à faire.

Logs et monitoring : Tu peux voir si ton site a des erreurs, combien de visiteurs tu as, etc.

Scalabilité : Si demain tu as 100 000 visiteurs, Vercel gère. Tu n'as pas besoin de "upgrader ton serveur" manuellement.

Combien Ça Coûte ?

Gratuit pour :

• Projets personnels et hobby
• Jusqu'à 100 Go de bande passante par mois (c'est énorme)
• Déploiements illimités
• Domaine personnalisé

Tu paies si :

• Tu as un projet commercial avec beaucoup de trafic
• Tu veux des fonctionnalités d'équipe avancées
• Tu dépasses les quotas du plan gratuit

En pratique, pour 99% des projets que tu vas créer en débutant, le plan gratuit suffit largement. Tu ne paieras que quand tu auras un vrai business qui génère du trafic (et donc probablement des revenus pour payer).

Alternative : Netlify

Netlify est l'autre grand concurrent de Vercel. Il fonctionne de la même façon et offre des fonctionnalités similaires.

Mon conseil simple :

• Tu utilises Next.js → Prends Vercel (c'est leur bébé, l'intégration est parfaite)
• Tu utilises Astro, Hugo, ou un autre framework → Les deux se valent, Vercel a une interface plus moderne
• Tu as déjà un compte sur l'un des deux → Reste dessus, pas la peine de compliquer

Résumé en 3 Minutes

Si tu es pressé, voici l'essentiel :

1. Crée un compte Vercel (gratuit, connecte-toi avec GitHub)
2. Mets ton projet sur GitHub si ce n'est pas déjà fait
3. Sur Vercel, clique "Add New Project" et sélectionne ton repo
4. Clique "Deploy"
5. Récupère ton URL et partage-la au monde entier

Pour les mises à jour, tu n'as plus qu'à push sur GitHub. Vercel redéploie automatiquement.

---

Tu as un site qui marche en local ? Mets-le en ligne aujourd'hui. C'est gratuit, ça prend 5 minutes, et c'est incroyablement satisfaisant de partager une URL qui marche vraiment.

Pour Aller Plus Loin

Pour ceux qui veulent aller plus loin : on a créé le Workshop "Bâtir avec l'IA".

Articles connexes qui pourraient t'intéresser :

• Ta première landing page avant ce soir - Un projet concret à déployer
• Git pour les nuls - Indispensable avant de déployer
• Le fichier .claudeignore - Protéger tes secrets
• Créer une base de données avec Supabase - Pour les projets qui stockent des données

Services mentionnés :

• Vercel - Pour déployer tes sites (gratuit)
• GitHub - Pour stocker ton code
• Netlify - Alternative à Vercel
• OVH - Pour acheter des domaines
• Namecheap - Alternative pour les domaines

— Charles