Déployer ton portfolio en ligne (Vercel)

Avant de commencer

Pourquoi déployer change tout

Jusqu'ici, ton portfolio s'ouvre uniquement sur ta machine (localhost). Pour qu'un recruteur, un jury ou un camarade le voie, il faut le déployer : le mettre sur un serveur accessible depuis Internet, avec une vraie adresse (une URL). Avant, c'était compliqué (louer un serveur, le configurer). Aujourd'hui, des plateformes comme Vercel le font en quelques clics, gratuitement pour un projet perso — et à chaque fois que tu pousses sur GitHub, ton site se met à jour tout seul.

Là où on en est dans la grande chaîne

Depuis le début de l'année, tu as construit un outillage complet. Aujourd'hui, on pose la dernière brique : rendre tout ça public.

La chaîne complète du dev web. Tu maîtrises déjà les 4 premières briques. Aujourd'hui : les 2 dernières (Vercel → URL).

Ce que tu sauras faire à la fin

0. C'est quoi « déployer » ?

Déployer (ou « mettre en production »), c'est publier ton site sur un serveur accessible depuis Internet, pour que tout le monde puisse l'ouvrir avec une adresse, sans avoir tes fichiers.

Déployer = déplacer une copie de ton site sur un serveur toujours allumé, accessible par tous.

1. Site statique vs site dynamique

Avant de déployer, comprends ce que tu déploies. Tous les sites ne se ressemblent pas, et ça change tout pour la mise en ligne.

Deux familles de sites

Un site statique, ce sont des fichiers déjà prêts (HTML, CSS, images). Le serveur n'a qu'à les envoyer tels quels au navigateur. Rien à calculer.

Un site dynamique, lui, fabrique la page à chaque visite : le serveur exécute du code, va chercher des données dans une base, et compose le HTML à la volée (un fil d'actu, un panier d'achat, ton compte personnalisé…).

Statique : le serveur renvoie un fichier déjà écrit. Dynamique : le serveur calcule la page et interroge une base.

2. C'est quoi Vercel ?

Vercel est une plateforme de déploiement. Tu lui connectes ton dépôt GitHub, et elle s'occupe de tout : prendre ton code, le publier sur ses serveurs, et te donner une URL. À chaque fois que tu pousses du nouveau code sur GitHub, Vercel redéploie automatiquement.

GitHub → Vercel → URL publique. Tu pousses ton code, Vercel le met en ligne automatiquement.

Vercel n'est pas seul — la culture générale

D'autres plateformes font la même chose. Tu n'as pas à les utiliser aujourd'hui, mais il faut savoir qu'elles existent (un jury peut te poser la question).

3. Créer ton compte Vercel

Le plus simple : se connecter avec GitHub (comme ça, Vercel voit déjà tes dépôts, sans config supplémentaire).

1. Va sur vercel.com → clique « Sign Up » (en haut à droite).
2. On te demande ton profil : choisis « Hobby » (l'offre gratuite, parfaite pour un portfolio).
3. Choisis « Continue with GitHub ».
4. GitHub te demande d'autoriser Vercel à accéder à ton compte → clique « Authorize Vercel ». (Vercel a besoin de lire tes dépôts pour les déployer.)
5. Tu arrives sur le Dashboard (tableau de bord) Vercel : c'est ta base de pilotage.

4. Importer ton portfolio

« Importer » = dire à Vercel quel dépôt GitHub tu veux déployer.

1. Sur le Dashboard, clique « Add New… » → « Project » (bouton en haut à droite).
2. Vercel affiche la liste « Import Git Repository » : tes dépôts GitHub.
3. Trouve portfolio dans la liste et clique « Import » à côté.
4. Vercel ouvre l'écran de configuration. Il détecte le type de projet. Pour un site HTML/CSS simple, le « Framework Preset » doit être sur « Other » — laisse le reste par défaut (pas de Build Command, pas d'Output Directory à toucher).
5. Clique le gros bouton « Deploy ».

5. Le déploiement en direct

Vercel travaille : il récupère ton code, le prépare, et le publie. Tu vois les logs défiler (les étapes du déploiement, en direct).

Cloning github.com/marc/portfolio...
Building...
Deploying...
✓ Deployment ready

Lire un log d'échec — cas réel annoté

Quand le déploiement passe en rouge, Vercel t'affiche le journal complet. Voici un log d'échec typique (mauvais Framework Preset) — chaque ligne décryptée :

[14:05:10] Cloning github.com/marc/portfolio...
[14:05:11] Running "npm run build"
[14:05:11] sh: npm: command not found
[14:05:11] Error: Command "npm run build" exited with 127
[14:05:11] ✗ Build failed

6. Ton URL publique (et le cadenas HTTPS)

Vercel te donne une adresse, du type :

https://portfolio-marc.vercel.app

Le cadenas (HTTPS) est automatique

Tu as sûrement remarqué le petit cadenas à gauche de l'adresse. Il signifie que la connexion est en HTTPS : les données échangées entre le visiteur et ton site sont chiffrées, donc illisibles pour un curieux sur le réseau.

7. Le déploiement continu

La magie : tu n'auras plus jamais à redéployer à la main. Vercel surveille ton dépôt GitHub. Dès que tu pousses un nouveau commit, il redéploie tout seul.

La boucle complète

Le déploiement continu : un seul git push et la mise à jour en ligne se fait toute seule.

Cas pratique — une modif de A à Z, avec sorties exactes

Tu veux changer le titre de l'onglet de "Mon Portfolio" en "Portfolio de Marc — BTS SIO SLAM". Voici le déroulement complet, étape par étape, avec les sorties terminal.

1 — Modifier le fichier en local

Ouvre index.html dans ton éditeur et localise la balise <title> :

<!-- avant -->
<title>Mon Portfolio</title>

<!-- après -->
<title>Portfolio de Marc — BTS SIO SLAM</title>

2 — Préparer et commiter

git add index.html
git commit -m "feat: update page title"

[main 3a7f29c] feat: update page title
 1 file changed, 1 insertion(+), 1 deletion(-)

3 — Pousser sur GitHub

git push

Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 342 bytes | 342.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
To github.com/marc/portfolio.git
   c4e2b1f..3a7f29c  main -> main

4 — Ce que Vercel fait (~30 secondes)

Dans l'onglet Deployments du dashboard, un nouveau déploiement « Building… » apparaît immédiatement. Clique dessus pour voir ses logs en direct :

[13:42:07] Cloning github.com/marc/portfolio (Branch: main, Commit: 3a7f29c)
[13:42:08] Cloning completed: 312ms
[13:42:09] No build command configured. Skipping build step.
[13:42:09] Uploading build outputs...
[13:42:11] Build Completed in /vercel/output [2s]
[13:42:21] ✓ Deployment completed

5 — Vérifier dans le navigateur

Ouvre ton URL Vercel. L'onglet du navigateur affiche maintenant « Portfolio de Marc — BTS SIO SLAM ».

8. Tester avant de publier : les Previews

Quand tu pousses sur ta branche principale (main), Vercel met à jour ton site public (la production). Mais que se passe-t-il si tu veux tester une grosse modif sans casser le site que le jury pourrait regarder ?

Réponse : tu travailles sur une autre branche Git. Vercel lui donne alors une URL de preview (aperçu), séparée de la production.

Chaque branche a son URL : main → la production publique ; une autre branche → une preview privée pour tester.

Les 3 environnements — tableau de synthèse

En développement professionnel, ton portfolio vit en 3 endroits simultanément. Repère bien les différences :

Essaie-le : crée une branche de test et observe la preview

Voici les commandes exactes pour expérimenter les branches Vercel depuis ton terminal :

# 1. Crée une branche "test-couleur" et bascule dessus
git checkout -b test-couleur

Modifie une couleur dans ton CSS (ex. change le fond de #ffffff en #f0f0f0), puis pousse :

git add .
git commit -m "test: couleur de fond alternative"
git push -u origin test-couleur

Branch 'test-couleur' set up to track remote branch 'test-couleur' from 'origin'.
To github.com/marc/portfolio.git
 * [new branch]      test-couleur -> test-couleur

Dans ton dashboard Vercel (Deployments), tu vois un déploiement avec l'étiquette « Preview » (et non « Production »). Clique sur l'URL de preview pour voir ton site avec la nouvelle couleur — sans toucher à la version officielle visible par le jury.

9. Revenir en arrière : le rollback

Tu pousses une modif… et elle casse ta mise en page. Panique ? Non. Vercel garde l'historique de tous tes déploiements. Tu peux revenir à une version précédente en deux clics. Ça s'appelle un rollback.

Comment faire un rollback

1. Va dans l'onglet « Deployments » de ton projet.
2. Tu vois la liste de tous tes déploiements, du plus récent au plus ancien (chacun correspond à un push).
3. Repère un déploiement qui marchait bien (statut « Ready »).
4. Clique le menu « … » à droite de ce déploiement → « Promote to Production » (ou « Rollback »).
5. En quelques secondes, ton URL publique repointe sur cette ancienne version. Ton site est réparé.

10. Les variables d'environnement (pour plus tard)

Ton portfolio n'en a pas besoin aujourd'hui. Mais c'est un mot que tu vas vite croiser, et le comprendre maintenant t'évitera de bloquer plus tard.

Le problème qu'elles résolvent

Imagine une app dynamique qui se connecte à une base de données avec un mot de passe. Tu ne veux surtout pas écrire ce mot de passe en clair dans ton code (il finirait public sur GitHub !).

La solution : une variable d'environnement. C'est un réglage secret rangé en dehors du code, que la plateforme fournit à l'app au moment où elle tourne.

Le fichier .env local — la règle d'or

En développement local, les variables d'environnement vivent dans un fichier .env à la racine de ton projet :

# .env  — fichier LOCAL uniquement, jamais sur GitHub !
DB_HOST=localhost
DB_PORT=3306
DB_PASSWORD=gsbpass
API_KEY=ma-cle-secrete-abc123

11. Mini-projet : ton portfolio public

La mission

Tu réunis tout ce que tu as appris en une livraison propre, présentable au jury.

1. Ton portfolio (sur GitHub) est déployé sur Vercel, avec une URL publique en https:// qui marche.
2. Tu vérifies qu'il s'affiche bien depuis un autre appareil (téléphone en données mobiles).
3. Tu fais une amélioration en local, tu la pousses, et tu constates le redéploiement automatique.
4. Tu repères ton historique de déploiements dans Vercel (la trace de chaque push).
5. Tu notes ton URL Vercel (pour le BTS blanc) et tu l'ajoutes, par exemple, dans la signature de ton portfolio.

Pour finir

Ton antisèche (la chaîne de déploiement)

Vérifie tes acquis

1. Quelle est la différence entre localhost et un site déployé ?
2. Pourquoi un portfolio HTML/CSS est-il « statique », et pourquoi ça simplifie son déploiement ?
3. Que fait Vercel, et d'où prend-il ton code ? Cite une alternative.
4. Que signifie le cadenas HTTPS, et qui le met en place ici ?
5. Qu'est-ce que le déploiement continu ? Que se passe-t-il après un git push ?
6. À quoi sert une URL de preview ? En quoi diffère-t-elle de la production ?
7. Ton dernier déploiement a cassé le site : comment reviens-tu en arrière ?
8. Cite la chaîne complète, de ta page jusqu'au site public.

Corrigé du quiz (auto-vérification)

Glossaire