J’ai refait mon site en 3 heures sans coder, juste en parlant à Grok Bot

« F*ck it. Publies tout. On verra bien ce que ça donne. Je n’ai plus de visites sur ce site de toute façon. »

C’est la phrase que j’ai envoyée à Grok Bot le mercredi 28 octobre, à 16 h 33. Le site en question, c’était celui-ci : denisqs.com. Et si vous y passiez à ce moment-là, vous ne trouviez… pas grand-chose : une page d’accueil qui affichait simplement « Home », une page Blog vide, et un dernier vrai article qui datait de novembre 2020 (avant, c’étaient surtout des articles sponsorisés, et mes anciennes newsletters reviendront, mais sous une autre forme).

Environ trois heures plus tard, vers 19 h 10, le même site avait un en-tête en cuir cousu, un blog en fiches bristol, une page 404 baptisée « Pause café » et un formulaire de contact. Et je n’ai pas écrit une seule ligne de code : Grok Bot a tout fait, en autonomie. Moi, comme pour ma carte interactive d’Oingt, j’ai simplement parlé : j’ai regardé ce qu’il me montrait, validé, corrigé.

Et le plus fou ? Sur mes cinq premiers prompts et en une heure, j’avais déjà 80 % du travail fait.

Pourquoi ce chantier ? Parce que ce site, je l’avais adoré. Je l’ai utilisé de plusieurs manières au fil du temps. Mais une fois que j’ai vraiment démarré mon activité, HabitudeMieuxVivre, je n’ai plus trop su quoi en faire, et il est devenu quelque chose qui ne ressemblait à rien. Il était temps d’en faire quelque chose d’intéressant. Et vu que je fais plein de choses avec Grok Bot en ce moment, j’avais envie d’une plateforme pour partager ce que je fais, tout simplement, et pouvoir y renvoyer depuis ailleurs.

Si vous lisez ces lignes sur denisqs.com, vous avez donc le résultat sous les yeux. La preuve qu’on peut refaire son site sans coder. Dans cet article, je vais vous raconter comment ce site est passé d’une coquille vide à ce que vous voyez aujourd’hui : les décisions, les changements de cap, ce qui a coincé en route, et ce que j’en retiens.

C’est parti !

Dans quel état était mon site avant la refonte ?

Sur le papier, denisqs.com est un WordPress auto-hébergé. En pratique, c’était une coquille vide :

• le thème par défaut de WordPress, Twenty Twenty-Five ;
• un pied de page avec des liens fictifs « # » (FAQ, Boutique…) et un ancien menu « Portfolio » rempli de liens morts.

Pour ce chantier, j’ai utilisé un agent Grok Bot partagé sous forme de modèle : Personal Site Builder. Première étape, avant même de parler design : relier le site à l’agent. Pour ça, il a fallu connecter Jetpack depuis l’administration de WordPress. Sans ça, l’agent ne pouvait rien modifier.

Petite précision si vous débutez : un chatbot vous donne des conseils à recopier vous-même. Un agent, lui, fait le travail : une fois branché, Grok Bot pouvait modifier les pages, les styles, les modèles et le menu, en me demandant mon accord à chaque fois. Il propose, j’autorise.

Site-CV ou porte d’entrée : qu’est-ce que je voulais vraiment ?

Mon premier réflexe a été de demander un portfolio avec une partie blog. À 16 h 15, Grok Bot me propose donc un plan très classique : Accueil, À propos, Projets, Blog, Contact. Le tout en français, avec des textes repris de mon profil Notion, pour ne rien inventer.

Et puis, en avançant, j’ai changé d’avis. denisqs.com ne devait pas être un CV. Il devait devenir la porte d’entrée vers tout ce que je fais : mes passions, mes projets, mes écrits. Mon nom devient la marque, l’accueil ne porte aucun intitulé de poste, et mon parcours professionnel n’est plus qu’une porte parmi d’autres (une page « Parcours », rangée sous « À propos »). HabitudeMieuxVivre.com, lui, devient un univers à part entière, avec son propre lien.

Pourquoi « Denis-Q.S. » ? Parce que c’est déjà ma signature partout : « Les Cités d’Or », le podcast « À minima », ma chaîne YouTube… et le nom de domaine.

Les pages ont d’abord été créées en brouillon. Puis, à 16 h 33, est arrivé le fameux « Publies tout ». À partir de là, le site est devenu un terrain d’expérimentation en direct. Les pages ont été publiées, le menu créé, et l’ancienne page « Home » est partie à la corbeille.

Comment construire une marque quand on n’est pas designer ?

Avant de toucher aux couleurs, on a fait un vrai atelier de branding, dans une page de travail dédiée. Sa source principale : ma page de profil Notion, utilisée en lecture seule.

Les objectifs du site

Par ordre de priorité, sur les 12 prochains mois : une vitrine professionnelle, un relais vers HabitudeMieuxVivre, un espace perso sans objectif commercial, et peut-être, plus tard, la base d’une activité indépendante.

Les piliers

Ce que les gens viennent déjà chercher chez moi tient en une phrase : « s’organiser simplement, et utiliser l’IA et l’automatisation sans être développeur ». Avec une conviction : « on apprend mieux par l’action qu’en lisant la théorie ».

La phrase signature

Si vous me suivez sur YouTube, vous la connaissez : « N’oubliez pas qu’il n’est pas nécessaire d’être parfait, mais juste de faire de son mieux jour après jour. » On l’a raccourcie en une seule version :

• partout, sur le site comme sur les réseaux : « Pas besoin d’être parfait. Juste de faire de son mieux, jour après jour ! »

Papier, encre et café : à quoi ressemble la nouvelle identité ?

Pour le visuel, ma consigne tenait en une phrase : « Papier, dessins, écrit à la main. Je veux quelque chose de chaleureux et personnel. »

Côté inspiration, deux sources :

• une vidéo d’Elaya (@elayadesigns) sur des landing pages conçues avec l’IA, et la skill open source qu’elle a utilisée ;
• mon coup de cœur : le pied de page de « Metricra », une gravure ancienne à l’encre bleue sur papier crème, avec un menu moderne posé dessus.

Résultat : une palette qui sent le café, du crème à l’espresso, avec une touche de cerise pour l’accent. L’encre, elle, est café/sépia : plus chaleureuse qu’un bleu façon Metricra.

Pourquoi demander une maquette avant de toucher au site ?

À 17 h 15, j’ai posé une question toute simple : « Tu peux me proposer un rendu en image avant de commencer ? »

Grok Bot a construit une maquette de l’accueil, puis l’a capturée en version ordinateur et mobile : une illustration de bureau en gravure sépia, la phrase signature soulignée à la main en cerise, et six cartes « Mes univers » façon fiches scotchées.

À 17 h 24, j’ai validé la direction (« lance avec ça, et on mettra à jour par la suite »), avec deux réserves. Je n’aimais pas le favicon en forme de tasse de café. Et si j’aimais le style gravure, je n’aimais pas cette image-là.

Qu’est-ce que ça change de corriger directement sur le site ?

Entre 17 h 25 et 17 h 45, la première version « carnet papier » est passée en ligne, après une sauvegarde complète. En-tête, pied de page avec de vrais liens à la place des « # », accueil reconstruit : tout y est passé.

Ensuite, j’ai annoté le site en ligne depuis mon iPad : je faisais des captures d’écran, je les annotais à l’Apple Pencil, puis je les donnais en images à Grok Bot. Exit le sur-titre avec mon nom complet (« Pas nécessaire »), exit l’illustration du bureau. Et pour me présenter, après un portrait recadré puis un dessin à l’encre, j’ai finalement choisi une photo : le polaroïd avec Ariane, mon épouse, avec une étiquette manuscrite qui renvoie vers son site, arianedeca.com.

Les premières animations sont arrivées dans la foulée, en CSS avec un peu de JavaScript : le gribouillis cerise qui se dessine, le polaroïd qui se pose en tournant légèrement… Toutes courtes, et coupées si votre appareil demande de réduire les animations.

Et à 17 h 57, j’ai supprimé la page Outils. Plutôt que de laisser une adresse morte, /outils/ renvoie désormais vers l’accueil.

Pourquoi tout a basculé vers le cuir et les coutures ?

Grok Bot a ensuite passé le site en revue sur ordinateur, iPad et mobile, et maquetté plusieurs pistes d’amélioration.

Et c’est là que j’ai eu le déclic. À 18 h 23 :

« Je veux des textures, du cuir, des coutures, du papier, de l’encre… Skeuomorphisme ! »

J’ai adoré la maquette qui a suivi, et j’ai fixé une règle : seuls l’en-tête et le pied de page sont en cuir cousu. Tout le reste est en papier, pour rester lisible et simple, et les liens du menu sont soulignés par une couture. J’ai aussi voulu voir une page d’article : Grok Bot l’a maquettée avec un vrai article du site, sans texte inventé.

À 18 h 37 : « On part là-dessus… pour le reste tu peux implémenter directement sur le site. »

Au programme de cette version : cuir cousu en haut et en bas, papier partout, tache d’encre, tampon, auréoles de tasse et grains de café. Le blog passe en fiches bristol sur deux colonnes, et la page 404 devient « Pause café ».

Comment ajouter un formulaire de contact gratuit ?

Ma demande, à 18 h 55 : « Trouve quelque chose pour ajouter un formulaire de contact gratuit. » En précisant que j’avais un serveur n8n personnel, au besoin.

Le choix s’est porté sur Jetpack Forms : gratuit, déjà présent avec Jetpack, et capable d’envoyer les messages vers un webhook. Le formulaire demande votre nom, votre e-mail, votre message, avec une case de consentement RGPD, et l’anti-spam Akismet est installé. Le branchement vers n8n est possible, mais pas encore fait. On verra si je garde ça, mais en attendant, c’est fonctionnel.

Qu’est-ce qui a coincé en route ?

Tout ne s’est pas passé sans accroc :

• mon hébergeur a dit stop : o2switch renvoie des erreurs quand les requêtes sont trop rapprochées. Il a fallu les espacer d’environ 20 à 25 secondes ;
• le garde-fou de sécurité de l’agent a bloqué l’envoi des textures. Elles ont été intégrées directement dans le CSS (environ 80 Ko), qu’il faudra alléger ;
• une série de petits bugs CSS, corrigés un par un (grille de blog bloquée sur une colonne, carrés blancs derrière certaines images…) ;
• Rank Math : un réglage impossible à modifier via l’API, qu’il faudra changer à la main.

Et ce ne sont que quelques exemples. Pourtant, avant d’écrire cet article et de demander un compte rendu détaillé à mon bot, je n’en savais rien ! Parce qu’il a tout géré seul, à ma demande.

Que s’est-il passé le lendemain ?

Le jeudi 29 octobre, on a continué :

• toutes les polices sont désormais hébergées sur le site, sans aucun appel à Google Fonts ;
• une couverture en cuir s’ouvre sur l’accueil (une fois par session, et on peut la passer d’un clic), et les longues coutures du site se cousent point par point ;
• une plaque métal « Denis-Q.S. » a pris place à gauche de l’en-tête.

Et surtout, j’ai voulu des images à la une cohérentes avec le site. Le premier essai, en gravure sépia, ne m’a pas convaincu. Alors j’ai proposé : « Et si on imaginait un style tableau noir + dessin à la craie ? Ça donnerait du contraste, non ? » Bingo. À 15 h 33, les 66 articles publiés avaient leur illustration à la craie.

Refaire son site sans coder : qu’est-ce que je retiens de cette méthode ?

Le chiffre qui me reste, c’est celui-là : cinq prompts, une heure, 80 % du travail. Si je devais résumer ce qui a fonctionné :

• la maquette d’abord : rien n’est parti en ligne avant que j’aie vu un rendu, sur ordinateur, iPad et mobile ;
• des allers-retours courts, directement sur le site en ligne, avec mes annotations ;
• une confirmation de ma part avant chaque modification, une sauvegarde avant chaque grosse étape, et des suppressions uniquement via la corbeille ;
• une règle de vie privée appliquée partout : seuls le polaroïd avec Ariane et le lien vers son site sont publics.

C’est grâce à ces garde-fous que mon « Publies tout » n’était pas si imprudent. Si vous avez peur qu’une IA « casse tout », ce sont les premières choses à mettre en place.

Quelques phrases que j’ai vraiment dites à Grok Bot, si vous voulez vous lancer :

• « Tu peux me proposer un rendu en image avant de commencer ? »
• « Montre-moi à quoi ressemble une page d’article ? »
• « Lance avec ça, et on mettra à jour par la suite. »
• « Trouve quelque chose pour ajouter un formulaire de contact gratuit. »

Comme pour la carte d’Oingt, la clé, à mon avis, c’est de savoir ce que l’on veut, de le dire, de regarder ce que l’agent propose… et de dire non quand ça ne plaît pas.

Et le résultat ? Franchement, je ne ferais rien autrement. C’est trop bien. Je continue d’ailleurs à bosser avec lui pour des petits changements, pour rajouter des petits éléments. Moi qui utilisais Elementor avant, qui suis formé au web design et qui ai vendu des sites que je créais pour des clients, je ne voudrais pas travailler autrement à l’heure actuelle. Ce mode de fonctionnement est incroyable.

Qu’est-ce qu’il reste à faire ?

Le site n’est pas fini : il manque encore un vrai logo et un favicon, les pages légales, les liens vers YouTube, le podcast et les réseaux sociaux, et un CSS à alléger.

Pour la suite, rendez-vous sur mon profil X : je vais y partager en direct les petites modifications que je fais, sous forme d’expériences comme celle-ci.

Pas besoin d’être parfait, donc. Juste de faire de son mieux, jour après jour !

Et vous, quel site aimeriez-vous refaire si vous n’aviez pas besoin de savoir coder ? Dites-le-moi en commentaire !

À bientôt pour un prochain article !