Réalisation d'un générateur de site statique depuis Airtable
Alexis crée un générateur de sites statiques en PHP avec Windsurf pour présenter ses sessions de vibe coding à partir de sa base Airtable, en explorant différentes architectures web.
À propos de cette session
Alexis a commencé par expliquer son projet : créer un site web qui liste ses sessions de vibe coding à partir de sa base Airtable contenant tous ses contenus (podcasts, vidéos, transcripts, etc.). Il a présenté trois architectures possibles : appel direct à l'API Airtable (problématique pour la scalabilité), génération d'un JSON statique (mieux), et générateur de sites statiques (son choix final).
Il a ouvert Windsurf et utilisé le modèle SWE-1, le nouveau modèle maison de Windsurf qu'il voulait tester. Alexis a créé un projet from scratch en mode chat d'abord, expliquant le contexte à l'IA : site listant des vidéos de live coding avec page d'index et pages détail. Il a fourni l'URL de sa vue Airtable et configuré l'API avec une clé en lecture seule.
L'IA a proposé un plan d'implémentation complet et posé des questions pertinentes sur la pagination, les filtres, le design. Alexis a répondu en utilisant son outil de transcription vocal pour gagner du temps, précisant ses besoins et préférences.
Le modèle SWE-1 a généré un projet complet avec fichier de configuration, templates, générateur PHP, et même une licence MIT non demandée. Malgré une erreur de syntaxe mineure (parenthèse manquante), l'ensemble fonctionnait. Le script a généré les pages HTML statiques avec succès.
Cependant, Alexis a identifié plusieurs problèmes : URLs basées sur les titres au lieu des GUID (mauvaise pratique), fichier de configuration avec clé API non ignoré par Git (problème de sécurité), et embeds vidéo affichés directement au lieu d'images de couverture.
Il a corrigé le problème de sécurité en ajoutant le fichier config au .gitignore et en créant un fichier d'exemple, puis a versionné le projet proprement.
Points clés
- Valeur des modèles spécialisés - SWE-1 montre une approche plus ingénieurale que les modèles généralistes, avec de meilleures pratiques automatiques
- Importance de l'architecture web - Comprendre les enjeux de scalabilité, sécurité et performance dès la conception
- Sécurité des fichiers de configuration - Critique de ne jamais commiter les clés API, utiliser .gitignore et fichiers d'exemple
- Avantages des sites statiques - Performance, simplicité d'hébergement, coût réduit vs solutions dynamiques
- Supériorité du PHP pour l'hébergement - Plus simple à déployer que Python sur la plupart des hébergeurs
- Bonnes pratiques d'URLs - Utiliser des identifiants normalisés plutôt que des titres avec caractères spéciaux
- Versioning au bon moment - Importance de corriger les problèmes de sécurité avant le premier commit
- Efficacité de la transcription vocale - Gain de temps significatif pour les instructions longues à l'IA
- Valeur des générateurs statiques - Solution élégante entre simplicité et fonctionnalités avancées
- Préparation vs improvisation - Session moins préparée mais fonctionnelle, confirme l'importance de la planification
- Templates et régénération - Architecture modulaire permettant les itérations sans tout réécrire
- Intégration d'outils tiers - Utilisation de services externes (Gumlet, Lorem Picsum) pour simplifier le développement
- Déploiement automatisable - Architecture permettant facilement l'automatisation du déploiement