Héberger gratuitement son portfolio : Vercel vs Netlify vs GitHub Pages

Aujourd’hui, il est possible d’héberger un portfolio professionnel gratuitement, avec des performances et une fiabilité dignes de solutions payantes. Des plateformes comme Vercel, Netlify et GitHub Pages permettent de publier un site statique en quelques minutes, tout en bénéficiant la sécurité du HTTPS, d’une excellente vitesse de chargement et d’une intégration native avec GitHub.

Mais laquelle choisir selon son profil et ses besoins ? C’est ce que nous allons comparer, puis déployer pas à pas pour chaque platforme.

Prérequis indispensables avant de commencer

Un compte GitHub : le point de départ obligatoire

Quelle que soit la plateforme choisie, GitHub est la base du workflow. Le code du portfolio doit être stocké dans un dépôt GitHub, qui servira de source pour le déploiement automatique.

Vercel, Netlify ou GitHub Pages : le match des plateformes

Avant d’entrer dans les tutoriels, il est important de comprendre ce que chaque plateforme propose et à quel type de projet elle s’adresse.

Comparatif rapide des fonctionnalités

Déployer son portfolio sur Vercel

Vercel est particulièrement apprécié pour les projets modernes et les frameworks front-end comme React, Next.js ou Vue. Son intégration avec GitHub est quasi instantanée.

Étapes de déploiement

1. Créer un dépôt : Assurez-vous que votre projet est poussé sur un dépôt GitHub.
2. Valider le code : Assurez-vous que la branche principale (main/master) contient la version finale du code.
3. Connexion : Connectez-vous à Vercel en utilisant votre compte GitHub pour une intégration automatique.
4. Nouveau projet : Cliquez sur le bouton « Add New » puis sélectionnez « Project ».
5. Importer le dépôt : Sélectionnez votre dépôt GitHub dans la liste des dépôts disponibles.
6. Configuration (Optionnel) : Vercel détecte automatiquement le framework. Vous pouvez configurer les commandes de build et les répertoires de sortie si nécessaire, ou ajouter des variables d'environnement.
7. Déployer : Cliquez sur le bouton « Deploy ».
8. Finalisation : Vercel va construire le projet et vous fournira une URL de production une fois le déploiement terminé.
9. Automatisation : Une fois connecté, tout git push sur la branche principale de GitHub déclenchera automatiquement une nouvelle construction et une mise à jour du site sur Vercel.

Déployer son portfolio sur Netlify

Netlify est une solution polyvalente, très populaire pour les sites statiques, avec une excellente gestion des builds et des formulaires.

Étapes de déploiement

1. Créer un dépôt : Assurez-vous que votre projet est bien hébergé sur un dépôt GitHub et que le code est à jour.
2. Connexion : Connectez-vous à Netlify en utilisant votre compte GitHub afin d’autoriser l’accès à vos dépôts.
3. Nouveau site : Depuis le tableau de bord, cliquez sur « Add new site » puis sélectionnez « Import an existing project ».
4. Importer le dépôt : Choisissez GitHub comme fournisseur, puis sélectionnez le dépôt correspondant à votre portfolio.
5. Configuration (Optionnel) : Netlify détecte automatiquement le type de projet. Vous pouvez définir la commande de build, le dossier de publication ou ajouter des variables d’environnement si nécessaire.
6. Déployer : Lancez le déploiement. Netlify va construire le projet et le mettre en ligne automatiquement.
7. Finalisation : Une fois le processus terminé, une URL publique Netlify est générée pour accéder au portfolio en ligne.
8. Automatisation : À chaque modification poussée sur la branche principale de GitHub, Netlify reconstruit et met à jour automatiquement le site.

Déployer son portfolio sur GitHub Pages

GitHub Pages est la solution la plus simple et la plus directe, idéale pour les portfolios HTML/CSS/JS ou les projets très légers.

Étapes de déploiement

1. Créer un dépôt : Hébergez votre portfolio dans un dépôt GitHub public contenant les fichiers du site.
2. Valider le code : Assurez-vous que la branche principale contient la version finale du projet et que la structure du site est correcte.
3. Accéder aux paramètres : Depuis le dépôt GitHub, ouvrez l’onglet « Settings ».
4. Activer GitHub Pages : Dans la section « Pages », sélectionnez la branche à utiliser pour la publication (généralement main) ainsi que le dossier source si nécessaire.
5. Enregistrer la configuration : Validez les paramètres en cliquant sur le bouton « Sauvegarder ». GitHub Pages va générer automatiquement le site.
6. Finalisation : Une URL publique de type https://username.github.io/repository est fournie une fois le site publié.
7. Automatisation : Chaque mise à jour poussée sur la branche configurée déclenche automatiquement une mise à jour du site sur GitHub Pages.

Ajouter un nom de domaine personnalisé

Même avec un hébergement gratuit, il est tout à fait possible d’utiliser un nom de domaine personnalisé, ce qui renforce immédiatement la crédibilité et le professionnalisme d’un portfolio. Le principe est identique quelle que soit la plateforme choisie : il consiste à faire pointer le nom de domaine vers l’infrastructure de Vercel, Netlify ou GitHub Pages via la configuration DNS.

Concrètement, cela passe par l’ajout d’enregistrements DNS chez le registrar du nom de domaine, généralement de type A ou CNAME, fournis par la plateforme d’hébergement. Une fois ces enregistrements correctement configurés, le domaine personnalisé peut être associé au projet directement depuis le tableau de bord de la plateforme choisie.

HTTPS automatique et sécurité

Une fois le domaine lié, les trois plateformes gèrent automatiquement la sécurisation du site via HTTPS. Un certificat SSL gratuit est généré et renouvelé sans intervention manuelle, garantissant une connexion chiffrée pour tous les visiteurs.

Cette automatisation évite toute configuration complexe et assure un niveau de sécurité équivalent à celui de solutions professionnelles payantes. Elle contribue également à de meilleures performances SEO et à une meilleure confiance côté utilisateurs, les navigateurs signalant désormais les sites non sécurisés.

Quel que soit le choix, ces solutions permettent de publier un portfolio professionnel gratuitement, rapidement et sans compromis sur la qualité.

Vous avez aimé cet article ? N'hésitez pas à le liker et à le partager avec vos groupes d'amis !