🧑‍💻 Comment j'ai créé un site web avec Codex

Je continue de partager des nouvelles sur mon apprentissage des réseaux de neurones.

La semaine dernière, je me suis sérieusement mis au vibe coding. Pour m'entraîner, j'ai choisi un vrai projet : créer une page d'atterrissage pour mes services de conseil.

Avant, j'avais une page sur Taplink, mais le design, les fonctionnalités et le paiement mensuel ne me convenaient pas. J'ai donc décidé de créer mon propre site avec Codex d'OpenAI.

Pourquoi Codex ? D'après mon expérience, pour ce genre de tâches, il n'est presque pas inférieur à Claude, mais coûte moins de 20 $ par mois.

🙈 Processus étape par étape pour les débutants

1️⃣ J'ai trouvé des sites dont j'aimais la structure et le design.

2️⃣ J'ai préparé les textes, les photos et les liens. J'ai tout transmis à Codex avec les références.

3️⃣ Environ 15 minutes plus tard, j'ai obtenu la première version du site, déjà publiable.

4️⃣ Ensuite, je l'ai affinée via le chat : j'ai modifié les textes et les titres, supprimé les blocs inutiles, ajusté le design.

5️⃣ J'ai demandé d'adapter la mise en page pour les ordinateurs, les tablettes et les smartphones.

6️⃣ J'ai créé un dépôt GitHub et y ai téléchargé le projet. Après autorisation, Codex peut le faire tout seul.

7️⃣ Je me suis inscrit sur Vercel, j'ai connecté GitHub et importé le projet. Maintenant, à chaque modification du code, le site se met à jour automatiquement.

8️⃣ J'ai acheté un domaine chez Beget. Dans mon cas, il coûtait moins cher que sur Reg.ru.

9️⃣ J'ai connecté le domaine à Vercel et configuré les enregistrements DNS qui relient le domaine à l'hébergement.
Après un certain temps, le site est devenu accessible sur Internet.
Avant la publication, il faut aussi vérifier :
— la version mobile ;
— les boutons et les liens ;
— les formulaires de contact ;
— l'exactitude des textes ;
— le fonctionnement de HTTPS.

🚀 Niveau avancé

🔟 J'ai vérifié le site avec Page Speed Insight et obtenu un rapport sur la vitesse de chargement.

1️⃣1️⃣ J'ai transmis les recommandations à Codex. Il a optimisé le code, les images et le chargement de la page. Après cela, le site s'est ouvert nettement plus rapidement sur les anciens téléphones.

1️⃣2️⃣ J'ai demandé une optimisation SEO de base :
— configurer les titres et les descriptions des pages ;
— améliorer la structure des textes ;
— ajouter des descriptions aux images ;
— créer robots.txt ;
— créer un plan du site.

En complément, il est conseillé de connecter des outils d'analyse, Google Search Console et d'envoyer le plan du site pour indexation.

La première fois, tout le processus m'a pris environ 8 heures.
Toute modification sur le site existant prend 1 à 5 minutes. Même si je décide de changer complètement le design, il suffit de décrire la tâche dans le chat. Codex met à jour le code, et Vercel publie automatiquement la nouvelle version.

Le résultat est visible sur les images ci-dessus ☝️ Codex a choisi lui-même la police et les icônes.

Si vous voulez suivre ce chemin, je vous recommande le cours de vibe coding. Tout y est identique, mais avec des instructions vidéo détaillées :
👉 [lien vers le cours]

🎁 Réduction de 10% avec le code promo : IRECHEV