En ligne en cinq prompts : créer et héberger un site fitness avec l IA

Les sites professionnels sont souvent vendus comme chers et lents, mais cette construction défend l inverse avec une démo concrète : un site complet de marque fitness assemblé en cinq prompts par étapes dans un outil de code assisté par IA. Le présentateur nomme d entrée la pile React Vite , l idée de build statique et la destination en hébergement partagé , pour que le spectateur connaisse l arrivée avant la première ligne de mise en page. Selon les guides de vite.dev, cette sortie statique est exactement ce que l hébergement bon marché sert le mieux, ce qui cadre le flux comme du travail de mise en page maintenant et aucun souci serveur.

Choisir le plan d abord

Choisir un hébergement semble bruyant car chaque fournisseur crie des limites différentes à la fois, donc la vidéo réduit le champ à une seule option Pro partagée avec stockage NVMe rapide, bande passante sans compteur, SSL gratuit et panneau amélioré. Ces détails comptent parce que le site final sera de simples fichiers, pas un serveur en marche, et le plan doit juste les servir vite avec une marge de croissance. Ce passage s appuie sur les pages de plans de hosting.com, et la lecture honnête est que hosting.com convient bien aux envois statiques, même si le code de réduction à l écran rend la recommandation moins indépendante.

Le prompt de fondation fait le travail à plus fort levier : il demande un projet React Vite TypeScript avec Tailwind, un chemin de base en slash pour le panneau, une structure de composants, une barre de navigation avec liens à défilement doux et un hero plein écran en crème, charbon chaud et doré. Seuls navigation plus hero sont construits, avec un aplatsombre où la photo viendra plus tard. Cette retenue est délibérée, car les choix de couleur et de type se propagent à chaque section suivante, et les fixer tôt évite de reconcevoir cinq composants deux fois.

Sections de contenu en ordre

Le style verrouillé, le deuxième prompt ajoute une rangée de services avec trois cartes pour coaching personnel, coaching nutrition et récupération, chacune avec courte description et lien doré, plus une section histoire en deux colonnes avec aplats charbon beside le récit du studio. Les composants atterrissent sous le hero sans toucher l existant, et la page répond soudain aux deux questions que tout visiteur pose : que propose-t-on et qui est derrière. Garder ici mêmes espacements et typographie donne une croissance dessinée plutôt qu empilée.

La preuve sociale vient ensuite car la persuasion exige des preuves, pas plus d adjectifs. Le troisième prompt ajoute trois cartes de témoignages avec citation, nom et résultat, puis une galerie de six tuiles encore en aplats charbon. Le présentateur contrôle lisibilité, densité et rythme de grille avant de mettre des photos, et cet ordre est juste : si la maquette respire avec des boîtes vides, elle respirera aussi avec de vraies photos. La page équilibre ainsi zones denses de texte et zones visuelles.

Le formulaire et les métadonnées transforment l intérêt en contact et en visibilité. Le quatrième prompt ajoute une section contact centrée avec nom, e-mail, téléphone et message plus bouton assorti, et met à jour index.html avec titre, description, balises Open Graph et lien canonique provisoire. Le formulaire garde seulement les valeurs dans l état React, donc rien n est vraiment délivré, une limite à dire clairement. Moteurs et réseaux lisent cette tête en premier, et la spécification de ogp.me explique pourquoi ces balises sociales décident de l aspect de l aperçu au partage.

Les visuels et les petits écrans décident si le site paraît fini. Le cinquième prompt remplace chaque aplats par des images distantes Unsplash dans hero, histoire et galerie, puis resserre tout pour 375 pixels avec menu hamburger repliable, cartes empilées, image au-dessus du texte et galerie en deux colonnes plus un pied simple. Référencer des fichiers Unsplash distants garde le dossier léger, même si le guide de hotlinking de unsplash avertit que disponibilité et comptage dépendent de bonnes adresses. La revue mobile vérifie les pannes typiques : espacement, taille d image, empilement et navigation.

Des sources au domaine réel

Les fichiers de développement ne peuvent pas partir en l état, donc l étape suivante les compile. L assistant lance le build de production dans la même session et produit un dossier dist avec un index.html compilé plus des paquets minifiés hachés, en laissant de côté sources, origines TypeScript et modules lourds. Cette propreté est le but : l envoi reste petit et le serveur ne reçoit que ce dont les navigateurs ont besoin. Le guide de build de vite.dev décrit exactement ce contrat, où le fichier d entrée plus le dossier d ressources forment l unité déployable.

Le déploiement est d un ennui rafraîchissant : se connecter au panneau, ouvrir la zone FTP et copier tout l intérieur de dist direct à la racine de public_html, pas le dossier lui-même, pour que index.html soit où le domaine l attend. Rien à décompresser ni à régler côté serveur pour de simples fichiers, plus un petit fichier de réécriture pour les routes monopages. La documentation responsive de tailwindcss.com aide à comprendre pourquoi cette étape casse rarement les mises en page : les points de rupture vivent déjà dans les classes, le serveur doit seulement livrer les mêmes octets.

L inspection finale sépare une démo d une livraison. Le présentateur ouvre le vrai domaine, parcourt du hero au pied, confirme que polices, couleurs et espacements égalent l aperçu local, clique la navigation pour vérifier que le défilement doux a survécu à la compilation, puis répète le passage sur téléphone. Le formulaire est montré mais non testé en envoi, car il reste un marqueur d interface. Cette limite honnête, jointe au comportement vérifié de hosting.com et aux règles de vite.dev, laisse un chemin reproductible : cinq prompts, une commande, un envoi, et un site que chacun peut cloner avec son contenu.