0:00 Dans cette vidéo, je vais vous montrer comment créer un site web à 10 000 $ avec Claude Code. Tous les sites que vous voyez ont été créés avec Claude Code, et à la fin de cette vidéo, le vôtre en fera partie. Nous installerons Claude Code, l'améliorerons avec deux compétences de design, rédigerons une requête, peaufinerons le résultat et l'hébergerons sur un vrai nom de domaine. Le site aura l'air du travail d'un développeur freelance facturant 10 000 $, et personne ne se doutera qu'il a été créé par une IA. Ne manquez surtout pas le chapitre sept. C'est là que les effets de curseur et le motion design transforment le site professionnel en un site haut de gamme. Enfin, je vous montrerai la méthode la plus économique pour le mettre en ligne sur un nom de domaine personnalisé. Mais d'abord, qu'est-ce que Claude Code exactement ? Claude Code est un assistant de codage IA. Vous lui décrivez un site web en langage naturel
0:46 et il écrit le code pour vous, sous vos yeux. Nous utilisons aujourd'hui l'application de bureau Claude Code, car elle regroupe tout ce dont vous avez besoin dans une seule fenêtre, sans configuration supplémentaire. Avant de commencer, je voulais définir précisément à quoi ressemble un site web à 10 000 $. J'ai donc interrogé Claude : huit éléments distinguent un site à 10 000 $ d'un site à 200 $. Le point de vue, la typographie, les couleurs, la hiérarchie visuelle, les images, les animations, l'optimisation mobile et tous ces détails invisibles qui donnent au site une impression de fluidité et de finition. Ces huit éléments se répartissent en trois catégories : esthétique, contenu et qualité perçue. Aujourd'hui, nous allons les aborder tous. Voici pourquoi Claude Code peut atteindre le niveau d'un site à 10 000 $
1:34 , contrairement à la plupart des créateurs de sites web sans code. Avec des outils comme Wix ou Squarespace, vous partez d'un modèle et votre site ressemble à tous les autres créés à partir de ce modèle. Claude Code fonctionne différemment. Il génère le code de votre site sur mesure , en fonction de vos descriptions. Vous obtenez ainsi un résultat entièrement personnalisé, sans avoir à coder. De plus, Claude intègre des compétences en design qui subliment toutes ses créations. Vous pouvez intégrer des composants préfabriqués provenant de bibliothèques en ligne, le genre de choses qui nécessitaient auparavant un véritable développeur, et vous pouvez peaufiner chaque détail avec Claude jusqu'à obtenir un résultat professionnel. C'est ce que nous allons faire aujourd'hui. La première étape consiste à installer Claude Code sur votre ordinateur.
2:19 Rendez-vous sur claude.com via le lien dans la description ci-dessous et choisissez l'abonnement Pro. Au moment où j'enregistre cette vidéo, il est à seulement 20 $ par mois et couvre tout ce dont nous avons besoin. Inscrivez-vous et je passerai rapidement sur les détails techniques. Une fois connecté, en bas à gauche de la page, cliquez sur l'icône de téléchargement, accédez à la section Claude Code, téléchargez la version pour ordinateur, puis ouvrez le fichier pour lancer l'installation. Une fois l'installation terminée, ouvrez l'application et connectez-vous. À ce stade, il est important de noter que, selon la date à laquelle vous regardez cette vidéo, l'interface du logiciel peut être différente de celle que je vois ici. Claude est régulièrement mis à jour, alors si l'interface ne vous semble pas identique, pas de panique.
3:05 Essayez de comprendre les concepts généraux que j'explique et de les appliquer à l'interface du logiciel . Une fois connecté, passez du mode chat au mode code. Dans mon application, cet onglet se trouve en haut à gauche. Vous pouvez également utiliser le raccourci clavier Commande 3 sur Mac ou Ctrl 3 sur Windows. Claude Code fonctionne de manière optimale lorsqu'il est installé dans son propre dossier. Créez-en un sur votre ordinateur, puis cliquez sur le bouton de sélection de dossier près de la fenêtre de chat et sélectionnez votre nouveau dossier pour l'ouvrir dans l'application. Ce dossier sera votre espace de travail pour ce projet. Voilà, la configuration est terminée. Nous allons maintenant améliorer Claude en installant deux compétences. Par défaut, Claude est une IA généraliste :
3:52 il possède de vastes connaissances, mais ses créations graphiques sont simplement correctes. Il a tendance à utiliser les mêmes polices, les mêmes couleurs et les mêmes mises en page prévisibles que l'on retrouve sur tous les sites web générés par IA. C'est pourquoi beaucoup de sites web créés par IA ont un aspect générique. Les compétences permettent de remédier à cela. Une compétence est comme un mode d'emploi pour Claude, un fichier texte qui développe ses connaissances dans un domaine spécifique. Une fois installée, Claude l'utilise indéfiniment. Nous installons deux compétences aujourd'hui, et elles sont toutes deux gratuites. La première s'appelle « Conception Front-End ». Elle est développée par Anthropic, la société à l'origine de Claude. Elle fonctionne en arrière-plan et améliore discrètement les compétences graphiques de Claude. Concrètement, elle bloque les polices les plus utilisées
4:39 sur Internet et encourage Claude à adopter des styles graphiques audacieux plutôt que de produire des designs génériques. Pour l'installer, copiez le lien de conception front-end dans la description ci-dessous et collez-le dans Claude Code avec le message « Installer cette skill ». Envoyez ensuite le message et laissez-le s'exécuter. Autorisez les modifications lorsque le système vous le demande et installez-le globalement. La deuxième skill est développée par la communauté. Elle s'appelle UI UX Pro Max. Comme vous pouvez le voir à l'écran, elle inclut 57 styles d'interface utilisateur, 95 palettes de couleurs et 56 combinaisons de polices. Contrairement à la première skill, celle-ci s'appelle directement lorsque nous souhaitons une intervention majeure sur la conception, et c'est précisément ainsi que nous allons construire notre site aujourd'hui. Pour l'installer, copiez le lien UI UX Pro Max
5:26 dans la description ci-dessous et collez-le dans Claude Code avec le message : « Installer ce plugin avec NPM ». Cette formulation précise est importante car elle permet une installation propre via le terminal. Autorisez les modifications lorsque le système vous le demande et installez-le globalement. Il reste une dernière étape de configuration avant de commencer la construction. Cliquez sur le sélecteur de mode en bas à gauche de votre chat et activez le mode automatique. Claude pourra ainsi travailler sans avoir à vous demander la permission à chaque étape. Une fois le mode activé et les deux compétences installées, nous sommes prêts à rédiger la commande qui générera le site. Mais il y a un point important à aborder auparavant : la précision du brief que vous fournissez à Claude.
6:12 Plus vous êtes précis, meilleur sera le résultat. Si vous savez déjà exactement ce que vous voulez, il vous suffit de le décrire , comme je l'ai fait pour ce projet. Mais exprimer ses goûts visuels avec des mots est difficile, surtout si vous débutez en design. Vous ne maîtrisez pas encore le langage du design , ce qui complique la tâche pour expliquer vos attentes à Claude. Dans ce cas, les références sont la solution. Il s'agit simplement de captures d'écran de sites que vous appréciez et que vous fournissez à Claude pour qu'il puisse s'inspirer du style visuel. C'est beaucoup plus facile de montrer à Claude ce que vous voulez que de le décrire. Les références sont également utiles pour affiner votre projet avant de vous engager. Vous faites défiler les sites, vous trouvez des choses qui vous plaisent et vous commencez à cerner vos goûts. Je vais partager avec vous quelques-uns de mes sites préférés dont vous pourrez vous inspirer.
6:59 Voici Dribbble. C'est une plateforme où les designers publient leurs créations et qui regorge d'inspiration pour presque tous les styles de sites web. Voici Awards. Ce sont des sites qui ont remporté des prix de design, c'est donc un excellent endroit pour découvrir des créations de haute qualité. Et vous pouvez toujours faire une recherche sur Pinterest pour trouver le type de site que vous souhaitez créer. On y trouve des exemples de partout. Ici, j'ai cherché « design de site web moderne pour restaurant ». J'ai inclus les liens vers tous ces sites dans la description ci-dessous. Trouvez trois à cinq sites qui vous plaisent et faites des captures d'écran. Il ne s'agit pas de copier ces sites. Au lieu de cela, vous montrez à Claude ce que vous aimez et comment vous souhaitez que votre design final apparaisse. Pour mon exemple, je crée un site web pour un restaurant à Seattle. Voici la consigne que j'ai utilisée. C'est toute la vidéo en une seule phrase.
7:46 /ui-ux-pro-max est le nom que nous donnons à la compétence de design que nous venons d'installer. Ensuite, nous rédigeons le brief pour l'IA. L'astuce pour que cela fonctionne réside dans cette dernière phrase : « Posez-moi des questions de clarification. » C'est cette phrase qui fait réfléchir Claude avant qu'il ne commence la construction. Claude nous pose alors sept questions. Elles portent sur le nom du restaurant, le style recherché, les sections souhaitées, le rédacteur, les technologies utilisées, le niveau d'animation et toute autre précision que nous souhaitons apporter. Et voici le point crucial : Claude propose trois styles : un steakhouse new-yorkais à l'ambiance sombre et mystérieuse, un style moderne inspiré du Nord-Ouest Pacifique
8:31 ou un steakhouse classique. Il vous offre un véritable choix de styles. J'ai opté pour un style luxueux, sombre et mystérieux, mais avec une touche du Nord-Ouest Pacifique pour éviter l'écueil du steakhouse new-yorkais. Cinq sections au total, pas de galerie, pas de système de réservation, une seule page à défilement continu. C'est l'étape cruciale de la création du site. Vos réponses ici définiront l'intégralité du site. Plus vous serez précis à ce stade, moins vous aurez à négocier avec Claude pour obtenir des modifications. Prenez le temps de répondre aux questions avec soin. Ensuite, envoyez le projet et admirez la magie opérer. Claude lit le brief et il lui faut environ trois minutes avant d'écrire la première ligne de code. Puis, il consacre
9:16 quatre ou cinq minutes à la construction proprement dite. Passons donc à la partie la plus intéressante : la révélation. Et voilà ! C'est déjà mieux que la plupart des démos de sites web IA que j'ai vues, et nous n'avons même pas encore commencé les finitions. Alors, comment se compare-t-il à notre checklist pour un site web à 10 000 $ ? Commençons par le point de vue. Regardez le brief que nous avons donné à Claude. Nous avions une direction précise en tête lorsque nous avons répondu aux questions, et pas seulement une planche d'inspiration. Ensuite, il y a la typographie. Claude a choisi Fraunces pour les titres et Inter pour le corps du texte. Nous remplacerons Inter plus tard, car c'est l'une des polices générées par IA les plus surutilisées sur Internet actuellement. Pour la couleur, Claude a opté pour cinq valeurs hexadécimales : noir profond, crème chaud, bordeaux, laiton et ardoise.
10:03 Pas de palettes arc-en-ciel ici. La sobriété dans l'utilisation des couleurs est un gage de qualité. Vient ensuite la hiérarchie. Observez la mise en page de cette section. Le nom de la ville est en grand, l'adresse est de taille moyenne et la description de la chambre est petite. Ce n'est pas un choix aléatoire de taille. Cela guide le regard sur l'ordre de lecture. Sans cela, un site paraît plat et difficile à parcourir. Regardez aussi le texte : « Côte de bœuf maturée à sec, 450 g, 60 jours, cuite au four à bois ». Ce n'est pas un texte générique généré par IA. C'est un texte de restaurant qui sonne comme s'il avait été écrit par un vrai chef. Nous y reviendrons au chapitre sept. Voilà, quatre points sont validés. Il nous en reste encore quatre, et les prochains demanderont un peu plus de travail. Le cinquième point de la liste concerne les images.
10:50 C'est un aspect que Claude ne peut pas gérer entièrement seul. Vous devrez fournir certains éléments vous-même. L'idéal pour un site web haut de gamme est d'avoir des photos ou des graphismes personnalisés, des images réalisées ou conçues spécifiquement pour votre marque. Si vous en avez, parfait ! Déposez-les dans le dossier de votre projet et le tour est joué. Indiquez simplement à Claude de quoi il s'agit, où il se trouve et comment l'utiliser. Cependant, beaucoup de personnes n'ont pas le budget pour une séance photo professionnelle. La meilleure alternative est donc la génération d'images et de vidéos par IA. Les outils sont aujourd'hui si performants que, correctement utilisés, la différence est imperceptible. Pour une image unique, ChatGPT est la solution la plus rapide, si vous avez déjà un abonnement. Son dernier modèle d'image est excellent pour un rendu photoréaliste,
11:35 mais il y a un hic : ChatGPT ne peut pas créer de vidéo. Par conséquent, si votre site nécessite une animation, comme l'effet de défilement que je vais créer, ChatGPT seul ne suffira pas. C'est là que les agrégateurs entrent en jeu. Ces outils vous donnent accès à tous les principaux modèles de génération d'images et de vidéos depuis un seul onglet. J'utilise personnellement 11ElevenLabs. 11ElevenLabs est un service payant, mais ses abonnements sont abordables . En utilisant le lien 11ElevenLabs dans la description ci-dessous, vous bénéficierez de 50 % de réduction sur votre premier mois d'abonnement au forfait Créateur, qui vous donne accès à toutes les fonctionnalités que je vais vous présenter. Ici, dans 11ElevenLabs, je génère une image avec le modèle d'image de ChatGPT. Une fois le rendu terminé, je choisis l'une des quatre options , puis j'utilise cette image comme image de départ
12:21 dans Google Veo 3.1 pour la convertir en vidéo. Ensuite, une fois le résultat obtenu, je sélectionne une autre option, puis j'optimise la résolution avec Topaz, le tout sans quitter l'onglet. C'est le processus que nous utilisons pour créer l'image principale de notre restaurant. Voici l'astuce pour gagner du temps : vous n'avez pas besoin de rédiger vous-même le texte de l'image. Claude connaît déjà votre projet ; vous pouvez donc lui demander de le faire pour vous. Il vous suffit de coller ce texte dans le générateur d'images pour obtenir du premier coup une image parfaitement adaptée à votre marque et à votre charte graphique. Une fois votre image créée, déposez-la dans le dossier de votre projet : Claude dispose de tout le nécessaire. Voilà pour les images. Mais comment faire pour améliorer les visuels de votre site qui ne sont ni des photos ni des vidéos ?
13:08 C'est là qu'intervient 21st.dev. 21st.dev est une bibliothèque de composants web, d'animations, d'effets de défilement, de boutons et bien plus encore, tous conçus par de vrais développeurs et disponibles gratuitement. Vous pouvez utiliser 21st.dev de deux manières. Vous pouvez parcourir le site pour trouver l'inspiration visuelle, si vous ne savez pas quoi ajouter à votre site ou si vous trouvez un design ou un élément qui vous plaît, vous pouvez copier une instruction qui indique à Claude exactement comment le recréer dans votre projet. Pour notre exemple, je souhaite créer un élément visuellement percutant pour la section principale, un effet d'image vraiment sympa qui donne une impression de qualité dès l'arrivée sur le site. En parcourant 21st.dev, je trouve un composant d'image à défilement fluide qui me plaît.
13:54 Je clique donc sur le bouton « Copier l'instruction » et, de retour dans Claude Code, je colle cette instruction, j'ajoute la vidéo d'introduction que nous venons de générer et j'indique à Claude d'utiliser le composant pour créer la section principale. Regardez maintenant ce que fait Claude ensuite : il repousse l'écran. Le composant 21st.dev que j'ai choisi est destiné à un système appelé React. React est une configuration plus complexe que celle que nous utilisons ici. Notre projet est un simple site statique, Claude refuse donc d'intégrer le composant React tel quel, car cela modifierait le fonctionnement de l'ensemble du projet. Pour votre projet, vous pourriez avoir besoin de quelque chose de plus complexe , comme un tableau de bord, un processus de paiement ou un site avec authentification. Dans ce cas, Claude accepterait React, car il est adapté à votre projet. L'important est que Claude protège l'architecture
14:41 que vous avez mise en place. Il ne la perturbe pas simplement parce que vous le lui demandez. Pour notre site statique, un fichier HTML unique est le bon choix, et vous comprendrez pourquoi lors du déploiement au chapitre huit. Claude reconstruit donc le héros sans React , mais la première tentative échoue. La vidéo s'affiche sur la page, Mais la page ne défile pas, alors j'explique le problème à Claude. Il détecte et corrige deux bugs. La page reste cependant cassée, alors je demande à Claude d'approfondir l'analyse. Il ouvre la page directement dans mon navigateur, inspecte le comportement en direct et trouve la véritable cause du problème. Après trois couches d'analyse, ça fonctionne. La leçon à retenir : il faut persévérer face aux problèmes. Il suffit d'expliquer ce qui s'est passé et le résultat attendu. Claude parvient généralement à résoudre le problème si on lui donne l'occasion d'examiner la page de plus près.
15:27 Et voilà ! Une section d'introduction dynamique, avec défilement, exactement comme prévu. Ensuite, nous peaufinons une dernière fois la section d'introduction, en veillant à ce que le texte soit lisible sur l'image de fond lumineuse et en faisant en sorte que le contenu s'affiche au fur et à mesure que l'utilisateur fait défiler la page. L'important est de savoir que l'on peut itérer ainsi jusqu'à obtenir une section d'introduction parfaite. Une fois cette section finalisée, il est temps de prendre du recul et de l'évaluer par rapport à l'ensemble du site. Une fois la structure de base du site en place, il est conseillé de s'auto-évaluer par rapport à la liste de contrôle initiale avant de poursuivre les finitions. C'est cette étape qui distingue un résultat soigné d'un résultat générique. Vous pouvez télécharger le PDF de la checklist pour site web de 10 000 points via le lien dans la description ci-dessous.
16:13 Vous avez placé la barre haut dès le départ et il s'agit maintenant de vous évaluer par rapport à elle. Pour ce faire, collez cette checklist dans Claude et demandez-lui : « Où se situe ce site par rapport à chacun de ces critères ? Soyez honnête. » Dans mon cas, Claude analyse chaque critère en soulignant les points forts, les points faibles et les lacunes. Pour notre projet, Claude conclut que le point de vue, les couleurs et la hiérarchie sont excellents, tandis que la typographie, les images, les animations, l'expérience mobile et les éléments invisibles sont mitigés. Vous obtiendrez probablement une répartition similaire pour votre projet, et c'est tout à fait normal. L'important est de savoir précisément ce qui reste à faire. Pour les points à améliorer, ne demandez pas à Claude de les corriger un par un. Demandez-lui plutôt de proposer une série de corrections et formulez votre demande en mettant l'accent sur l'objectif, sans entrer dans les détails. Voici la requête exacte que j'utilise pour notre projet.
17:00 Je dis à Claude : « Il nous faut des micro-interactions plus travaillées. Les sections du bas manquent un peu de profondeur. Inutile de les surcharger, il faut juste les rendre plus attrayantes. » Remarquez ma démarche : je ne lui dis pas quoi ajouter, mais comment je souhaite que le site paraisse. Claude est bien meilleur pour traduire une intention en détails que la plupart des gens pour rédiger un cahier des charges. Il revient avec une série de modifications : un fond vert métallisé sur tout le site, des lignes métalliques animées entre les sections, un effet de braise incandescente dans la section « Réserver une table », les titres se dévoilent mot à mot, et quelques autres petits détails viennent s'ajouter. Cinq petites modifications en une seule commande. Je les approuve et Claude les déploie immédiatement. On évite
17:46 ainsi les allers-retours. On dépense moins de jetons et le résultat est plus cohérent que si on lui fournissait chaque modification au compte-gouttes. Voici maintenant l'étape que la plupart des gens négligent, et pourtant c'est celle qui a le plus d'impact sur l'impression de qualité perçue de votre site. Une fois la série de modifications intégrée, parcourez votre site section par section et repérez celles qui manquent encore de dynamisme, voire de relief. Il y en aura toujours quelques-unes. Claude ne les remarquera pas, car il ne perçoit pas votre regard comme vous. Cette fois-ci, c'est à vous de jouer. Pour chaque section qui manque de dynamisme, indiquez à Claude une animation ou une interaction de curseur spécifique à ajouter, une par section, toutes discrètes et subtiles. Vous pouvez demander quelque chose de précis,
18:32 vous inspirer de 21st.dev ou simplement demander à Claude ce qui lui semble pertinent. Dans notre section « Réserver une table », l'effet de braise issu de la série de modifications est intégré, mais l'animation reste statique. Il n'y a aucun mouvement, alors je dis à Claude : « Fais bouger les braises comme du feu. Fais-les réagir au curseur lorsqu'il se déplace sur la page. » Claude ajoute un effet de parallaxe aux braises qui suit le curseur. L'effet de feu est maintenant plus vivant. Ensuite, je fais défiler jusqu'à la section de l'histoire et elle est toujours plate. Je dis donc à Claude : « Ajoute des micro-mouvements élégants et des interactions avec le curseur ici. Cette section paraît très statique. » Claude ajoute un halo de lumière de bougie qui suit le curseur pendant la lecture. Le premier essai est cependant trop évident, alors j'insiste. Je dis : « Rends-le plus subtil, plus raffiné. »
19:19 Claude ajoute un léger mouvement de traînée au halo pour qu'il soit légèrement en retard sur le curseur. C'est la version que nous allons publier. Deux invites, deux sections. C'est tout ce qu'il faut pour cette couche, mais cette couche fait toute la différence entre un site qui a l'air cher et un site qui donne l'impression d'être cher lorsque les visiteurs naviguent sur les pages. La méthode consiste à examiner chaque section, à repérer celles qui manquent de dynamisme, puis à demander à Claude d'ajouter une interaction de curseur ou un mouvement par section , en lui précisant de le rendre plus subtil, jusqu'à ce que la section paraisse vivante sans être surchargée ni désagréable. En parlant de finition, parlons du contenu. Les textes de votre site sont un autre point faible de l'IA. Ils sont souvent trop longs, utilisent trop d'adjectifs et cherchent à impressionner.
20:06 Prenez par exemple cette phrase de notre site : « Six plats, un feu. » Voilà de la concision, pas des adjectifs. C'est ce qui distingue un menu à 10 000 $ d'un menu à 200 $. La compétence de conception front-end que nous avons installée au début de cette vidéo permet à Claude de rédiger des textes de cette qualité. Une écriture sobre et sensorielle est l'un des objectifs de cette compétence, ce qui explique son utilité dans chaque projet. Voici une autre astuce simple à appliquer à n'importe quel site généré par IA : la police Inter est tellement omniprésente sur les sites de ce type qu'elle trahit instantanément une création IA. Si la police Inter apparaît dans votre rendu, demandez à Claude de la remplacer. Pour notre exemple, Claude Swaps a choisi la police Geist. C'est un petit changement, mais il améliore considérablement la lisibilité du site.
20:52 Le point sept de la liste de contrôle concerne une version mobile réellement conçue, et non simplement réduite. Par défaut, Claude rend votre site responsive, c'est-à-dire qu'il s'affiche correctement sur les téléphones et autres petits écrans. Cependant, responsive ne signifie pas conçu spécifiquement pour les mobiles. Les utilisateurs de téléphones consulteront votre site bien plus souvent que ceux d'ordinateurs de bureau. Si votre version mobile est simplement une version réduite de votre version de bureau, vos visiteurs le remarqueront. Vous devez donc le demander explicitement à Claude. Demandez-lui d'effectuer un traitement dédié à la version mobile. Indiquez-lui ce qui doit être masqué sur les petits écrans, ce qui doit être plus compact et ce qui doit être redimensionné. Dans notre exemple, la navigation se réduit sur les téléphones. L'espacement du logo est réduit et les boutons sont plus petits. Une fois ces traitements effectués,
21:37 les huit points de la liste de contrôle sont validés. Votre site a une allure professionnelle. Maintenant, il faut le mettre en ligne. Vous pouvez créer le plus beau site du monde, mais pour l'instant, il n'existe que sur votre ordinateur. Si vous copiez l'URL de votre aperçu, celle qui commence par « localhost » , et que vous l'envoyez à un ami, il sera très déçu. Cette URL ne fonctionne que sur votre machine. Pour partager votre site avec le monde entier, vous devez l'héberger sur un véritable serveur, avec une URL personnalisée. L'hébergement est le service qui permet à votre site web de fonctionner sur un serveur 24h/24 et 7j/7, afin que tout le monde puisse y accéder. C'est la partie fastidieuse de la gestion d'un site web, mais c'est indispensable pour tout site digne de ce nom. J'utilise Hostinger car c'est l'hébergeur professionnel le moins cher. Je sais que cette offre vous donne un nom de domaine gratuit la première année, en plus de votre forfait.
22:23 Voici comment ça marche : si vous souscrivez à un hébergement via le lien à l'écran ou le premier lien dans la description ci-dessous, vous bénéficierez de 10 % de réduction sur le prix promotionnel actuel de Hostinger. Les prix varient tout au long de l'année, mais une réduction de 10 % sur le meilleur prix disponible est toujours la solution la plus économique pour démarrer. Avant de cliquer, parlons du forfait qui vous convient. Pour le type de site que nous avons créé dans cette vidéo – un site statique simple, sans connexion, sans paiement et sans base de données – le forfait Premium de Hostinger répond à tous vos besoins. C'est celui que nous utilisons aujourd'hui. Cependant, si votre projet est plus complexe, par exemple un site avec des comptes utilisateurs, un système de paiement ou une base de données, le forfait Premium ne sera pas suffisant. Dans ce cas, privilégiez le forfait Business de Hostinger. Il prend en charge Node.js et les configurations plus avancées que Claude utilise généralement pour les sites complexes.
23:10 Même lien, même réduction de 10 %, juste un forfait au-dessus. Vous vous souvenez quand Claude a refusé de réagir au chapitre 6 ? C'est le genre de moment qui vous indique quel forfait vous convient. Si Claude a opté pour un site simple, le forfait Premium est parfait. S'il a créé un site avec une véritable infrastructure, il vous faut le forfait Business. Pour notre restaurant, le forfait Premium est le choix idéal. Ouvrez le lien dans la description. Vous arriverez sur cette page. Cliquez sur « Commencer maintenant », puis faites défiler la page jusqu'aux panneaux de prix. Sélectionnez le forfait souhaité. Choisissez une durée de 12 mois. 12 mois est la durée minimale pour bénéficier d'un nom de domaine gratuit la première année. Recherchez ensuite le nom de domaine que vous souhaitez. S'il est disponible, réservez-le. Le total de votre panier dépendra de la promotion en cours chez Hostinger au moment de votre inscription. Pour ma part, cela revient à environ 43 $ pour l'année. Ce prix comprend l'hébergement, un nom de domaine
23:56 et une adresse e-mail gratuite. Le montant exact affiché peut varier de quelques dollars, mais en utilisant le lien ci-dessous, vous obtiendrez toujours le meilleur prix disponible. Si vous ajoutez un mois d'abonnement à Claude Pro ( environ 20 dollars), vous aurez créé un site web d'une valeur de 10 000 dollars pour environ 60 dollars au total. Cliquez sur Continuer. Ajoutez ensuite votre adresse e-mail et un mot de passe pour créer un compte. Sur la page suivante, saisissez vos informations de facturation pour finaliser la transaction. Une fois le paiement effectué, le processus d'intégration vous demandera le type de site que vous possédez. Puisque nous importons nos propres fichiers, choisissez Migrer un site existant, puis importez les fichiers de sauvegarde. Sélectionnez ensuite le nom de domaine que vous venez d'acheter. Retournez maintenant dans le dossier de votre projet sur votre ordinateur pour visualiser les fichiers créés par Claude :
24:43 votre fichier index.html ainsi que toutes les images, vidéos et sous-dossiers qu'il contient. Voici l'étape cruciale : vous ne devez pas compresser le dossier du projet lui-même, mais uniquement les fichiers qu'il contient. Si vous compressez l'intégralité du dossier, Hostinger le décompresse sur son serveur et votre site se retrouve à un niveau de profondeur inutile, affichant une page blanche sur votre site web . Sélectionnez donc tous les fichiers contenus dans votre dossier de projet. Sur Mac, appuyez sur Commande + A, et sur Windows, Ctrl + A. Faites un clic droit sur votre sélection. Sur Mac, cliquez sur « Compresser », et sur Windows, choisissez « Envoyer vers », puis « Dossier compressé ». Vous obtenez un fichier ZIP contenant votre fichier index.html à la racine.
25:28 C'est exactement ce que recherche Hostinger. Vous pouvez déplacer le fichier ZIP au même niveau que votre dossier parent et lui donner un nom pertinent. Glissez-déposez ce fichier ZIP dans Hostinger et, une fois le chargement des fichiers terminé, cliquez sur « Suivant ». Cliquez ensuite sur « Envoyer la requête ». Une fois la page chargée, cliquez sur votre nom de domaine : votre site est en ligne ! Votre site web à 10 000 $ est opérationnel sur votre propre nom de domaine personnalisé, créé en quelques étapes seulement. Si vous souhaitez également mettre le vôtre en ligne, optez pour Hostinger ! Utilisez le premier lien dans la description ci-dessous. Vous bénéficierez ainsi d'une réduction de 10 % cumulable avec toute autre promotion en cours. C'est la solution la plus économique que je connaisse pour créer un site web professionnel et performant. Merci d'avoir regardé.
