Créez un site web de blog en quelques heures grâce à un modèle Gemini 3 Pro, Google AI Studio et Cursor. @fofrAI, qui a récemment rejoint Google, a partagé l'intégralité de son processus de création de son blog personnel « fofr » à partir de zéro en seulement quelques heures, en utilisant un modèle Gemini 3 Pro et une combinaison de Google AI Studio et Cursor par étapes et itérations. Le processus de développement utilise un développement itératif piloté par des invites, se déroulant par étapes : 1. Prototypage avec AI Studio : Un prototype de blog a été généré avec le framework React dans Google AI Studio, accompagné de conseils détaillés. Les premiers conseils insistaient sur une typographie soignée, une mise en page centrée et une longueur de ligne optimale, et précisaient les composants nécessaires pour les images, les vidéos, les médias générés, les blocs de code et les fiches de conseils. Les itérations suivantes ont ajouté un thème « Monstera » (texture chaude, évoquant le papier, avec la police Merriweather pour les titres et Inter pour le corps du texte) et affiché les derniers articles sur la page d’accueil. La conception était optimisée pour les mobiles (largeur max-w-3xl) et le code a été exporté pour le développement local. 2. Améliorations et ajout de fonctionnalités : Téléchargez le code sur le dépôt GitHub, installez les dépendances avec Cursor et exécutez-le localement. Ajoutez le routage multipage (react-router-dom), l’analyse Markdown (react-markdown gère les composants personnalisés) et créez un répertoire `posts` pour stocker des exemples de contenu. Principales améliorations : • Composants multimédias : MediaCard prend en charge l’affichage d’images/vidéos, la copie d’invites, l’affichage plein écran et le téléchargement ; la fenêtre modale lightbox permet la navigation gauche et droite à travers plusieurs images ou l’itération d’invites en plusieurs étapes. • Éléments interactifs : CompareSlider pour comparer les résultats, PromptCard pour mettre en évidence des exemples de projets. En fournissant des captures d'écran comme moyen de retour d'information, Gemini peut corriger les bugs visuels et garantir une intégration transparente des composants. 3. Qualité du code et optimisation du déploiement : Le plugin ESLint et le workflow GitHub ont été mis en place pour la vérification automatique du code. Hébergés sur Vercel, les ressources sont stockées sur Cloudflare R2. Les premières tentatives de génération d’images Open Graph à l’aide des packages OG de Vercel ayant échoué, une génération statique via un script Satori a été privilégiée. Les favicons ont été simplifiés et remplacés par des emojis. L’image de couverture a été générée à l’aide d’un modèle Nano Banana Pro, basé sur le Markdown du blog et des captures d’écran. Technologies et outils utilisés : Modèle d'IA principal : Gemini 3 Pro (prototypage AI Studio, génération/débogage de code Cursor). Pile technologique front-end : React 18+, TypeScript, Tailwind CSS, bibliothèque d’icônes lucide-react. • Outils de support : react-markdown (analyse syntaxique), Vercel (déploiement), Cloudflare R2 (stockage), ESLint (contrôle qualité). Défis et solutions : Limitations de la navigation multipage : AI Studio ne gère pas bien les itinéraires complexes, nous avons donc d’abord conçu une seule page, puis l’avons implémentée manuellement. • Code désordonné : le code généré par l’IA est sujet à la redondance, c’est pourquoi des outils d’analyse statique de code (linters) ont été introduits très tôt pour le corriger automatiquement. • Génération d'images dynamiques : Open Graph est la solution la plus gourmande en temps, et la solution statique est simplifiée après plusieurs itérations. • Débogage visuel : s’appuie sur des captures d’écran et des indications d’IA pour des solutions efficaces, éliminant ainsi le besoin de codage manuel. Lire le texte original
