Comment coder votre propre site Web avec l’IA
plate-forme d’hébergement pour votre propre site Web, où vous pouvez présenter votre portfolio et d’autres ressources utiles vous concernant. Avant de changer, j’utilisais WordPress depuis environ 1 an et j’ai commencé à réfléchir à quelques choses qui étaient difficiles lors de l’utilisation de WordPress :
- Création du site Web – Il a été difficile d’obtenir le design que je souhaitais
- Lent – La création et la mise à jour dans WordPress sont lentes car il s’agit d’un éditeur glisser-déposer
- Manque de flexibilité – vous devez utiliser des composants prédéfinis. Alternativement, vous pouvez utiliser du code HTML personnalisé, mais vous devrez alors toujours copier le code, ce qui est lent.
J’ai ensuite réfléchi à la simplicité de programmer mon propre site Web à l’aide d’un outil de codage agent comme Claude Code ou Cursor.
Pourquoi est-ce que je passe beaucoup de temps à glisser-déposer des composants, sans obtenir exactement la conception souhaitée, alors que je peux simplement demander à Claude Code de faire exactement cela en seulement 1 minute ?
C’est alors que j’ai décidé de passer de WordPress hébergé à la gestion de mon propre site internet, déployé sur Vercel (gratuitement). Le point principal de cet article est de vous montrer comment procéder et pourquoi vous n’avez pas vraiment besoin d’expérience en programmation pour le faire.
Vous pouvez trouver mon site internet, que j’ai conçu, dans cet article ici.
Pourquoi coder votre propre site Web
La principale raison pour laquelle vous devriez commencer à coder votre propre site Web, au lieu d’utiliser un éditeur glisser-déposer comme WordPress ou Webflow, est :
- C’est très simple à faire – vous n’avez littéralement pas besoin de toucher à aucun code
- C’est beaucoup plus rapide de créer et de mettre à jour votre site Web
- Les conceptions sont bien meilleures, car les agents de codage sont efficaces pour créer des conceptions de haute qualité.
Parce que c’est plus rapide, vous pouvez également parcourir les conceptions de votre site Web plus rapidement, ce qui est très utile lorsque vous essayez de créer le meilleur site Web possible.
Une vitesse d’itération rapide est la clé d’un progrès rapide
Bien sûr, il existe des arguments inverses, par exemple selon lesquels WordPress propose de nombreuses intégrations qui peuvent être utiles. Cependant, pour moi, les avantages dépassent largement les inconvénients.
Pouvoir mettre à jour mon site Web en saisissant simplement une invite, telle que :
Faire apparaître tous les boutons du site Web au survol
Cela met littéralement à jour l’intégralité de mon site Web en 1 minute environ (y compris Claude Code mettant à jour le code et déployant sur Vercel). Faire cette même action dans WordPress me prendrait probablement au moins 30 minutes.
Imaginez maintenant que vous deviez effectuer ce changement plusieurs fois par semaine. Chaque fois que vous ajoutez un nouveau contenu à votre site Web ou lorsque vous réalisez que vous souhaitez changer quelque chose. Le changer directement dans le code avec des agents de codage est tout simplement bien plus efficace.
Claude pour coder votre propre site internet
Création du site internet
J’espère que vous êtes convaincu de la raison pour laquelle vous devriez commencer à coder votre propre site Web (ou laisser Claude le coder pour vous), au lieu d’utiliser un éditeur glisser-déposer. Voyons maintenant comment procéder.
Le principal secret ici est que vous n’avez pas vraiment besoin de faire grand-chose vous-même, compte tenu de la compétence des agents de codage dans la création de sites Web. J’ai créé le site Web à partir de mon précédent site Web hébergé sur WordPress.
J’ai commencé par demander à Claude Code ce qui suit, où eivindkjosbakken.com était mon site WordPress :
Given my website here: eivindkjosbakken.com, copy this website exactly,
by using React. Create a GitHub repository and push the code thereLe code de Claude a ensuite créé une réplique presque exacte de mon précédent site Web, que je pouvais désormais exécuter localement. J’ai vérifié les conceptions et me suis assuré que tout allait bien, ce qui était le cas pour la plupart, à l’exception de quelques éléments que j’aborderai dans la section suivante.
Hébergement du site internet
Je suis ensuite passé à l’hébergement du site Web. J’utilise Vercel car il propose des déploiements gratuits de votre site Web, il est simple à utiliser et peut être entièrement géré depuis le terminal. L’avoir géré depuis le terminal est super sympa, donc Claude peut s’occuper des déploiements et autres soucis avec Vercel.
Cependant, lors du premier déploiement, j’ai dû créer un projet sur vercel.com et connectez ma base de code à ce projet. Vous pouvez demander à n’importe quel LLM comment procéder, et il vous donnera un guide précis, étape par étape, pour connecter votre code à Vercel. Vercel vous propose également 100 déploiements gratuits par jour, ce qui devrait être largement suffisant.
Après m’être connecté à Vercel, tout était prêt et j’ai pu accéder à mon site Web via le Web.
Mise à jour du site Internet
Après avoir copié mon site WordPress, j’ai également découvert quelques mises à jour que je souhaitais apporter à mon site Web. Je voulais par exemple :
Ces changements ont été rapides à effectuer et j’ai simplement dû demander à Claude une description de mon changement (c.-à-d. mettre la fiche des articles en surbrillance au dessus), et le changement a été effectué en moins d’une minute. Effectuer cette modification avec un éditeur glisser-déposer prendrait probablement beaucoup plus de temps.
Désormais, seule votre imagination peut vous empêcher de mettre à jour votre site Web, et vous pouvez, en réalité, apporter n’importe quelle modification et itérer rapidement sur les conceptions en invitant simplement votre agent de codage.
Les défis que j’ai dû résoudre
Claude a principalement recréé en une seule fois mon ancien site Web WordPress en code, uniquement à partir de l’URL de mon site Web. Cependant, j’ai dû résoudre certains problèmes, comme vous pouvez le voir ci-dessous :
- Mon WordPress avait la possibilité de m’envoyer des e-mails
- J’ai dû copier certaines images de l’ancien site, par exemple, pour mes articles (processus manuels)
- Quelques problèmes avec les liens sociaux – à la fois pour trouver les bons et s’assurer qu’ils sont de haute qualité
- WordPress a une liste de diffusion, et je devais la gérer moi-même maintenant
- Passer du domaine de WordPress à NameCheap
Pour les emails, j’ai utilisé EmailJS avoir la possibilité d’envoyer des emails depuis mon site internet. Ce service est gratuit et simple à mettre en place après avoir demandé un guide étape par étape à votre agent de codage.
Pour la copie des images, j’ai simplement téléchargé les images localement, les ai mises dans le référentiel de code et indiqué au code de Claude où il pouvait trouver les images. Claude a ensuite copié les images dans un dossier d’images spécifique, afin qu’elles puissent être hébergées sur le site Web.
Avec les liens sociaux, je devais simplement demander à Claude plusieurs fois, avec une capture d’écran de ce à quoi ressemblaient les liens sociaux (à un moment donné, ils avaient l’air très granuleux, par exemple), et Claude résoudrait le problème avec trois à quatre invites et commentaires.
Pour la liste de diffusion, j’ai décidé de passer à MailerLitequi propose des formulaires intégrés que vous pouvez utiliser sur votre site Web pour que les gens s’abonnent avec leur courrier électronique. Vous pouvez simplement confier le formulaire intégré à votre agent de codage, qui l’intégrera dans votre site Web.
Le déplacement de domaines était la tâche la plus chronophage. J’avais acheté mon ancien domaine sur WordPress, ce qui rendait le processus un peu plus délicat. Cependant, j’ai demandé à Gemini 3 de me fournir un didacticiel étape par étape, qui a bien fonctionné, et j’ai transféré des domaines vers NameCheap, où j’ai moi-même un contrôle total sur le domaine.
Conclusion
Dans cet article, j’ai expliqué comment déplacer votre site Web d’un éditeur par glisser-déposer comme WordPress ou Webflow vers votre propre site Web géré. Ce processus est relativement simple en utilisant les agents de codage et Vercel, qui vous offrent alors beaucoup plus de contrôle sur votre propre site Web. De plus, il vous permet de parcourir plus rapidement votre site Web et simplifie la mise à jour de votre site Web.
Je pense que nous nous éloignons complètement des éditeurs glisser-déposer, lorsque nous voyons à quel point les agents de codage d’aujourd’hui fonctionnent et avec le fait que vous n’avez plus vraiment besoin d’expérience en codage pour effectuer une programmation simple comme mettre à jour la conception d’un site Web.
👉 Retrouvez-moi sur les réseaux sociaux :
📚 Obtenez mon ebook gratuit sur les modèles de langage de vision
💻 Mon webinaire sur les modèles de langage de vision
📩 Abonnez-vous à ma newsletter
✍️ Moyen
