Construire ce site avec un LLM
2025-09-09
Introduction
Je voulais depuis quelque temps créer une page de présentation personnelle, mais je n’avais jamais le temps de commencer. Récemment, le vibe coding, où l’on pilote par le dialogue des outils comme Claude Code ou Codex, est devenu un sujet courant. Comme j’avais enfin un peu de temps, j’ai construit ce site de cette manière.
Processus
Voici ce que j’ai fait :
- définir les exigences
- les confier à Codex
- donner plusieurs retours sur le code généré
- écrire moi-même les textes de présentation, puis demander à l’IA de les relire
Définition des exigences
Comme j’utilise ChatGPT Plus, je suis parti de là. J’ai donné à GPT des idées de routes et de stack technique sous forme de liste, puis je lui ai demandé de les transformer en cahier des charges.
Demande
Je veux creer ma propre page web.
Aide-moi a definir les exigences.
Je n ai pas besoin d implementation pour le moment. Prepare un document de requirements que je pourrai donner a Codex.
## Idee de routing
- Structure
- /
- presentation personnelle et explication des routes
- /links
- URL externes
- /articls
- articles, papiers, etc.
- /blogs
- articles rendus depuis Markdown
## Exigences d implementation
- Utiliser TypeScript et Next.js pour une UI/UX moderne basee sur React.
- Utiliser GitHub Pages pour un site statique afin de reduire les couts d operation.
- Pour les mises a jour du blog, je veux eviter de toucher au code : ecrire du Markdown doit suffire a rebuild automatiquement.
- Les pages autres que celles generees depuis Markdown, comme la page d accueil, doivent supporter le japonais et l anglais.
- Le nom de route "articles" n est peut-etre pas ideal, car il contiendra des papiers et des billets techniques externes.
Resultat des exigences
# Vue d ensemble
Definition des exigences pour un site personnel. TypeScript + Next.js pour une UI/UX moderne, hebergement statique sur GitHub Pages, et cout de maintenance reduit grace aux contenus Markdown.
## 1. Objectif / Livrables
* Objectif : regrouper presentation, liens externes, publications/articles et blog dans un site statique facile a maintenir.
* Livrables : repository, design et composants, CI/CD, modeles de contenu et documentation.
## 2. Architecture de l information / Routing
* `/` : presentation personnelle, changement JP/EN et acces aux sections principales
* `/links` : liens externes comme SNS, GitHub et supports de presentation
* `/publications` : papiers, articles techniques externes et autres travaux publics
* `/blogs` : liste et pages detail des articles Markdown
`/articls` est une faute de frappe. Pour le nom, `/publications` est recommande parce qu il couvre les papiers, contributions et articles externes.
## 3. Exigences non fonctionnelles
* affichage rapide avec Core Web Vitals
* accessibilite visant WCAG 2.1 AA
* SEO avec OGP, Twitter Card, donnees structurees, sitemap et robots
* responsive design
* operation simple via mises a jour Markdown
## 4. Stack / Politique d implementation
* TypeScript et Next.js App Router
* export statique pour GitHub Pages
* Tailwind CSS et composants UI maison
* parsing Markdown avec gray-matter, remark/rehype et zod
* recherche et filtres cote client si necessaire
## 5. i18n
* L UI statique comme la page d accueil doit supporter japonais et anglais.
* Utiliser un prefixe d URL ou un mecanisme equivalent pour conserver la langue.
* La langue par defaut est le japonais.
## 6. Contenu
Le frontmatter de blog inclut `title`, `date`, `updated`, `tags`, `summary`, `thumbnail` et `draft`.
Le frontmatter de publication inclut `title`, `type`, `publishedAt`, `venue`, `publisher`, `authors`, `links`, `tags` et `abstract`.
## 7. Build / Deploiement
Utiliser GitHub Actions pour builder lors d un push sur `main` et deployer `out/` sur GitHub Pages.
## 8. Criteres d acceptation
* Ajouter un article Markdown puis merger dans `main` declenche build et deploiement automatiques.
* `/` permet le changement ja/en, et `/blogs` publie les articles uniquement depuis Markdown.
* Les filtres et la recherche de `/publications` fonctionnent cote client.
* Les objectifs LCP/CLS/INP sont verifies en test lab.
* Les controles d accessibilite de base passent.
Demande à Codex
Après avoir installé Codex, j’ai utilisé l’article ci-dessous comme référence de configuration, puis je lui ai donné le cahier des charges.
Retours sur le résultat généré
J’ai lancé le site, indiqué brièvement les points qui me gênaient, laissé Codex corriger, puis répété l’opération.
Impressions
Sans presque rien implémenter moi-même, j’ai obtenu en peu de temps une page d’un niveau pratique. Dans ChatGPT Plus, je gardais Reasoning Effort sur high et je n’ai jamais atteint la limite de débit.
Développer avec un coding agent fonctionne bien dès qu’on a assez d’expérience pratique pour juger le résultat. Le processus m’a peu stressé.