Comment créer son site perso avec l’IA et le Vibe Coding
Découvrez la méthode complète d’Alexis Kovalenko pour créer un site web professionnel en utilisant Claude Code, Netlify et des automatisations intelligentes.
Dans ce guide pratique, nous allons décortiquer le processus complet utilisé par Alexis Kovalenko pour créer son site personnel alexiskovalenko.fr en utilisant le Vibe Coding avec Claude Code. Un tutoriel qui démontre la puissance des outils d’IA générative pour créer des landing pages et sites statiques de qualité professionnelle.
🎯 Qu’est-ce que le Vibe Coding ?
Le Vibe Coding est une approche de développement web qui repose sur la collaboration étroite avec une intelligence artificielle. Plutôt que d’écrire chaque ligne de code manuellement, le développeur guide l’IA en lui décrivant ce qu’il souhaite obtenir, puis affine itérativement le résultat.
« L’utilisation des IA génératives pour faire des landing pages et des sites statiques, c’est vraiment une masterclass. C’est là où on voit tout le potentiel de ces outils. »
Cette méthode permet aux personnes n’ayant pas de compétences en design ou en développement front-end de créer des sites professionnels, tout en offrant aux développeurs expérimentés un gain de temps considérable sur les tâches répétitives.
🛠️ Les outils utilisés
⚡ Configuration de l’environnement
Un point crucial du workflow d’Alexis est l’utilisation d’une machine virtuelle dédiée pour le développement. Cela permet d’utiliser Claude Code avec le flag spécial qui lui donne une autonomie complète.
⚠️ Attention : Le mode dangereux
Le flag --dangerously-skip-permissions donne à Claude la possibilité d’exécuter des commandes sur l’ordinateur sans demander de permission. Ne l’utilisez jamais sur votre machine personnelle ! Des cas ont été rapportés où des agents IA ont accidentellement effacé des répertoires importants ou appliqué des permissions incorrectes.
❌ Développement local classique
- Risques sur les fichiers personnels
- Demandes de permission fréquentes
- Interruptions dans le workflow
- Sécurité compromise potentiellement
✅ Machine virtuelle dédiée
- Environnement isolé et sécurisé
- Agent IA complètement autonome
- Workflow fluide sans interruption
- Possibilité de tout réinitialiser
📋 L’importance du PRD
Avant de lancer le développement, Alexis a créé un PRD (Product Requirement Document) détaillé. Ce document contient non seulement les spécifications techniques mais aussi tout le copywriting du site.
- La description générale du projet et ses objectifs
- Les fonctionnalités attendues page par page
- Le contenu textuel complet (copywriting)
- Les contraintes techniques (framework, style)
- Les intégrations prévues (APIs, services tiers)
L’avantage d’un PRD complet est qu’il permet à l’IA de comprendre le contexte global du projet et de produire un résultat cohérent dès la première itération. Alexis précise qu’il a obtenu une première version fonctionnelle du site en une seule itération après avoir fourni son PRD à Claude.
🔄 Le processus de développement étape par étape
Préparation du PRD
Rédiger un document complet décrivant le site souhaité, incluant le contenu, les fonctionnalités et les contraintes de design. Plus le PRD est détaillé, meilleur sera le résultat initial.
Première génération
Soumettre le PRD à Claude Code et laisser l’agent générer la première version du site. C’est souvent déjà très proche du résultat final souhaité.
Itérations et ajustements
Demander des corrections spécifiques : ajout d’icônes SVG, harmonisation des couleurs, amélioration du responsive. Claude corrige et adapte au fur et à mesure.
Intégration des APIs
Connecter les flux RSS YouTube et podcast pour afficher dynamiquement les derniers contenus. Création d’un simple script PHP pour contourner les contraintes CORS.
Déploiement sur Netlify
Import du projet GitHub sur Netlify pour un déploiement automatique et continu. Configuration du nom de domaine personnalisé via Gandi.
Finalisation et automatisations
Ajout des analytics Umami, configuration de Google Search Console, et création du workflow n8n pour la newsletter avec MailerLite.
🎨 Le style néo-brutaliste
Le site adopte un design « néo-brutaliste » volontairement simple, avec une seule couleur d’accent (jaune) sur un fond sobre. Alexis insiste sur l’importance de l’homogénéité : tous les boutons doivent avoir le même comportement et le même style à travers le site.
💡 Astuce design avec le Vibe Coding
Les fichiers SVG peuvent être facilement générés par l’IA puisque ce sont du code. Plutôt que d’utiliser des emojis partout (une tendance qu’Alexis trouve dépassée), demandez à Claude de créer des icônes SVG personnalisées qui s’intègrent parfaitement au design de votre site.
🔌 L’intégration des flux RSS
Pour afficher dynamiquement les derniers contenus (vidéos YouTube et épisodes de podcast), Alexis a opté pour une solution élégante utilisant les flux RSS natifs.
// Structure de l'API PHP pour les flux RSS
// Endpoint: /api/content.php
// Retourne un JSON avec les dernières vidéos et podcasts
{
"youtube": {
"title": "Dernière vidéo",
"url": "https://youtube.com/...",
"thumbnail": "..."
},
"podcast": {
"title": "Dernier épisode",
"url": "https://...",
"duration": "45:00"
}
}L’avantage de cette approche est l’utilisation du cache Varnish de Gandi qui rend les requêtes instantanées et ne sollicite aucune ressource serveur après la première requête.
📧 Automatisation de la newsletter avec n8n
Pour gérer les inscriptions à la newsletter, Alexis a créé un workflow n8n simple mais efficace qui connecte le formulaire du site à MailerLite.
- Webhook qui reçoit les données du formulaire
- Node MailerLite pour créer le subscriber
- Response webhook pour confirmer l’inscription
- Gestion des erreurs côté frontend
🚀 Déploiement et mise en production
La mise en production se fait de manière fluide grâce à l’intégration GitHub/Netlify. Chaque commit déclenche automatiquement un nouveau déploiement.
« Franchement, Netlify pour le déploiement de sites statiques, c’est magnifique. Je suis toujours sur la partie gratuite et j’ai beaucoup de sites. J’ai presque envie de prendre un plan payant juste pour les soutenir. »
Configuration finale
- Netlify : hébergement gratuit avec déploiement continu
- Gandi : gestion du nom de domaine avec redirections HTTPS
- Umami : analytics respectueux de la vie privée
- Google Search Console : indexation et suivi SEO
📈 Évaluation de la méthode
💬 Vibe Coding vs Spec Coding
Alexis évoque également la méthode BMAD et le « Spec Coding » mais avoue avoir une intuition que cela pourrait être trop « over-engineered » pour ses besoins. Le Vibe Coding avec un bon PRD lui semble suffisant pour des projets personnels ou des sites vitrines.
🎸 Vibe Coding
- Approche intuitive et créative
- PRD + itérations guidées
- Idéal pour makers et créateurs
- Projets personnels et MVP
📐 Spec Coding
- Méthodologie structurée
- Spécifications techniques détaillées
- Plutôt pour développeurs
- Projets complexes et équipes
🎓 Les leçons à retenir
📌 Points clés du tutoriel
- Toujours préparer un PRD détaillé avant de commencer
- Utiliser une machine virtuelle pour le mode autonome
- L’IA excelle pour les sites statiques et landing pages
- Les flux RSS sont une solution élégante pour le contenu dynamique
- Netlify + GitHub = déploiement sans friction
- Demander des commits à l’IA pour de meilleurs messages
- Itérer progressivement plutôt que tout changer d’un coup
- Ne pas hésiter à être spécifique dans ses demandes
🚀 Prêt à vous lancer ?
Le Vibe Coding ouvre de nouvelles possibilités pour créer des sites web professionnels rapidement. Que vous soyez développeur ou non, cette approche peut transformer votre façon de travailler.
🎬 Voir la vidéo complète
Retrouvez le tutoriel complet en vidéo où Alexis Kovalenko détaille tout le processus en live, avec toutes les astuces et les coulisses du développement.
