Déployer son site gratuitement sur Vercel : la roadmap complète

Vous avez généré un site ou une petite app avec l'IA (v0, Lovable, Bolt) et vous voulez le mettre en ligne sans payer d'hébergement ? Vercel le fait gratuitement, et chaque modification se publie automatiquement. Voici la roadmap, création du compte comprise, pour un débutant. Cette étape de mise en ligne clôt le guide créer son site avec l'IA.

Ce que Vercel fait pour vous

En une phrase : il transforme votre code (rangé sur GitHub) en site accessible sur internet, automatiquement.

• Gratuit pour un usage personnel ou une petite vitrine (offre Hobby).
• Automatique : à chaque modification poussée sur GitHub, le site se met à jour.
• Rapide et sécurisé : HTTPS et réseau mondial inclus, sans configuration.

Étape 1 — Avoir son code sur GitHub

Vercel se branche sur GitHub : c'est le prérequis.

• Si ce n'est pas fait, créez votre compte et votre dépôt (voir créer un compte GitHub).
• Assurez-vous que le code de votre site est bien dans un dépôt (poussé depuis l'outil IA ou GitHub Desktop).

Étape 2 — Créer le compte Vercel

Comptez 3 minutes.

• Allez sur vercel.com et cliquez « Sign Up ».
• Choisissez « Continue with GitHub » : un seul identifiant pour les deux, et la connexion est déjà faite.
• Autorisez Vercel à accéder à vos dépôts (vous pouvez limiter à un seul).

Étape 3 — Importer le projet

Le moment où votre site prend vie.

• Cliquez « Add New… → Project ».
• Sélectionnez votre dépôt GitHub dans la liste.
• Vercel détecte automatiquement le type de projet (Next.js, Vite, site statique…) — laissez les réglages par défaut si vous débutez.

Étape 4 — Configurer les variables d'environnement

Si votre projet utilise des clés (API, base de données), c'est ici — pas dans le code.

• Dans l'écran d'import, ouvrez « Environment Variables ».
• Ajoutez chaque clé (nom + valeur) fournie par votre outil ou service.
• Ne mettez jamais ces clés directement dans le code poussé sur GitHub.

Étape 5 — Déployer

Un clic, et c'est en ligne.

• Cliquez « Deploy » et patientez une à deux minutes.
• Vercel vous donne une adresse en .vercel.app : votre site est déjà accessible dans le monde entier.
• En cas d'erreur, lisez le log : il pointe en général la ligne du problème (souvent une variable manquante). La documentation Vercel décrit chaque type d'erreur.

Étape 6 — Brancher votre nom de domaine

Pour remplacer l'adresse .vercel.app par la vôtre.

• Dans Settings → Domains, ajoutez votre nom de domaine.
• Vercel vous donne les enregistrements DNS à copier chez votre registrar (voir acheter et connecter un nom de domaine).
• Le HTTPS s'active automatiquement une fois le domaine relié.

Étape 7 — Vérifier et suivre

Un dernier tour avant de partager.

• Testez le site sur mobile et sur ordinateur.
• Vérifiez que le domaine personnalisé fonctionne (avec et sans www).
• Gardez un œil sur l'onglet Deployments : chaque mise à jour y est historisée, et vous pouvez revenir à une version précédente en un clic.

Compte, import, variables, domaine : la mise en ligne est simple mais séquentielle. Le document interactif compagnon ci-dessous vous accompagne étape par étape, y compris pour GitHub.