· 3 min de lecture
Mettre son portfolio en ligne gratuitement avec Vercel
Comment j'ai déployé ce portfolio Next.js sur Vercel sans payer d'hébergement, du repo GitHub au HTTPS automatique. Le chemin réel, et les endroits où ça coince.
- Déploiement
- Next.js
Ce portfolio, je l'ai mis en ligne un après-midi, sans payer un centime d'hébergement. Pas de serveur à louer, pas de certificat à bricoler, pas de fichier de configuration obscur à copier depuis un tutoriel de 2018. Voici le chemin réel, celui que j'ai suivi, avec les deux ou trois endroits où ça grince.
Pourquoi Vercel, et pas un serveur à moi
Vercel édite Next.js. Ça change tout, parce qu'une application Next se déploie chez eux sans configuration : ils reconnaissent le framework, lancent le bon build, servent les pages statiques et les routes dynamiques au bon endroit. Le plan gratuit (Hobby) suffit largement pour un site vitrine. Le HTTPS est posé automatiquement, et chaque branche Git obtient sa propre URL de prévisualisation, ce qui est confortable pour montrer un travail en cours sans toucher à la version en ligne.
L'alternative, un serveur à soi (un VPS), c'est louer une machine, installer un serveur web, gérer le certificat, les mises à jour de sécurité, la disponibilité. Beaucoup de plomberie pour un portfolio qui, au fond, ne fait qu'afficher des pages. J'ai fait ce choix par pragmatisme, pas par paresse : le temps que je ne passe pas à administrer un serveur, je le passe à écrire du contenu.
Le chemin réel, du repo au site
La séquence tient en quelques gestes, dans l'ordre :
- pousser le code sur un dépôt GitHub (privé, ça fonctionne aussi bien) ;
- l'importer sur Vercel, qui détecte Next.js tout seul ;
- ajouter la ou les variables d'environnement dont le site a besoin ;
- cliquer sur Deploy, et récupérer une URL en
.vercel.app.
Deux minutes de build plus tard, le site est en ligne. Et le vrai bénéfice arrive après : chaque fois que je pousse un commit, Vercel reconstruit et redéploie sans que j'aie à y penser. Le déploiement devient un non-sujet.
Le domaine, l'étape d'après
Une URL en .vercel.app fait le travail, mais un vrai nom de domaine change la perception au premier coup d'œil. Le brancher tient à deux enregistrements DNS, et c'est l'objet d'un autre article, où je détaille comment choisir et acheter un domaine sans se faire avoir : choisir un nom de domaine.
Ce que je ne vous vends pas
Soyons honnêtes. À l'inscription, Vercel demande une vérification par téléphone, ce qui surprend pour un outil gratuit (c'est une mesure anti-abus, mais ça reste une donnée qu'on donne). Le plan Hobby est pensé pour un usage personnel et non commercial, avec des limites sur les fonctions serveur et des démarrages à froid sur les routes peu visitées. Il y a aussi une dépendance à assumer : votre chaîne de déploiement vit sur leur plateforme. Et pendant la configuration du domaine, un avertissement « DNS Change Recommended » peut vous inquiéter alors que le site fonctionne très bien.
Aucun de ces points n'est rédhibitoire pour un portfolio. Mais mieux vaut les connaître avant, pas au milieu d'un déploiement un dimanche soir.
Verdict
Héberger un site vitrine n'est plus un problème technique, et ce n'est plus un problème d'argent. La question s'est déplacée. Elle n'est plus « où vais-je l'héberger », elle est « qu'est-ce que je montre dessus ». Le plus dur commence une fois que le site est en ligne.