Une phrase, un site de mairie en ligne.

Ce que tu obtiens, sans autre intervention que d'éventuelles validations :

• une refonte complète du site de la commune, reprenant ses vrais contenus (menus, horaires, contacts, actualités) ;
• habillée du design system APV Infos TV : palette papier et vert, grande lisibilité pour un public de 40 à 70 ans ;
• publiée sur ton compte Vercel et accessible à l'adresse https://thorame-basse.apvinfos.tv ;
• présentée comme une maquette : bandeau « proposition de refonte », invisible des moteurs de recherche tant que la mairie n'a pas dit oui.

Retiens une idée : Codex est le seul à agir. Il lit, il écrit, il lance des commandes. Vercel et OVH ne font que ce que Codex leur demande, avec les accès que tu lui auras donnés aux étapes 2 et 4.

Comment Codex est branché

Codex atteint quatre sources. Deux sont des fichiers ou des pages publiques qu'il lit sans autorisation. Deux sont des services où il agit en ton nom : il faut lui ouvrir la porte, une fois pour toutes.

• Codex installé, avec ton harnais ouvert dedans (le dossier créé à partir du dépôt « le harnais IA »).
• Les identifiants de ton espace client OVH, celui qui possède apvinfos.tv.
• Une adresse e-mail pour créer le compte Vercel (étape 2).
• Le fichier du design system APV v2 (02-design-system.md), que je t'envoie avec ce guide.
• Deux à trois heures au calme, sans rendez-vous derrière : certaines étapes demandent d'attendre quelques minutes.

Ouvrir le terminal

Vérifier Node.js

node --version

Tu dois lire un numéro qui commence par v20 ou plus (par exemple v22.11.0). Si le terminal répond « command not found » ou « n'est pas reconnu », va sur nodejs.org, télécharge la version marquée LTS, installe-la comme n'importe quel logiciel, ferme puis rouvre le terminal et recommence.

Installer Codex en version terminal

Même si tu utilises l'application Codex, la version terminal sert à poser le branchement OVH (étape 4). Les deux partagent les mêmes réglages : ce que tu configures ici vaut aussi dans l'application.

npm install -g @openai/codex
codex --version

Sur Mac, si tu vois « permission denied », relance la première ligne précédée de sudo et tape le mot de passe de ta session (rien ne s'affiche pendant la frappe, c'est normal). Si Codex te demande de te connecter, choisis la connexion avec ton compte ChatGPT.

2.1 Créer le compte

1. Va sur vercel.com/signup.
2. Choisis Hobby pour commencer (tu passeras en Pro avant le premier rendez-vous en mairie), indique ton nom.
3. Inscris-toi avec ton e-mail et confirme le code reçu.

2.2 Poser la clé sur ton ordinateur

npx vercel login

Au premier lancement, npx te demande d'installer le paquet « vercel » : réponds y. Choisis ensuite la même méthode de connexion que pour ton compte. Ton navigateur s'ouvre : valide. Le terminal affiche « Congratulations! You are now logged in ».

Vérifie :

npx vercel whoami

Le terminal répond par ton identifiant Vercel. C'est gagné.

Les réglages de Codex vivent dans un fichier texte : config.toml, rangé dans le dossier caché .codex de ton dossier personnel. Ouvre-le (il est créé s'il n'existe pas) :

mkdir -p ~/.codex && touch ~/.codex/config.toml && open -e ~/.codex/config.toml

New-Item -ItemType Directory -Force "$HOME\.codex" | Out-Null; notepad "$HOME\.codex\config.toml"

Ajoute ces deux lignes à la fin du fichier, enregistre, ferme :

# Autorise les commandes de Codex à accéder à internet
[sandbox_workspace_write]
network_access = true

4.1 Comprendre ce qu'on branche

4.2 Déclarer le connecteur

Rouvre le fichier config.toml de l'étape 3 (même commande) et ajoute à la fin :

# Connecteur officiel OVHcloud : gestion des domaines et des zones DNS
[mcp_servers.ovh_domaines]
url = "https://mcp.eu.ovhcloud.com/mcp/v1_domain"

4.3 Autoriser l'accès

codex mcp login ovh_domaines

Ton navigateur s'ouvre sur la page de connexion OVH. Connecte-toi avec ton identifiant client et accepte l'accès demandé. Aucune clé à copier : OVH et Codex s'échangent l'autorisation directement. Vérifie ensuite que le connecteur est bien listé :

codex mcp list

4.4 Premier test, en lecture seule

Ouvre Codex dans ton harnais et écris :

Avec le connecteur ovh_domaines, liste les enregistrements DNS de la zone apvinfos.tv. Ne modifie rien.

Tu dois voir apparaître notamment des lignes A (le site principal), MX (mx1.mail.ovh.net et suivantes, ta messagerie) et une ligne TXT commençant par v=spf1. Si c'est le cas, le branchement fonctionne.

5.1 Déposer le document dans le harnais

Dans ton harnais, crée le dossier 4.RESSOURCES/DESIGN-SYSTEM-APV/ et copies-y le fichier 02-design-system.md que je t'ai envoyé. Tu peux le faire dans le Finder (ou l'Explorateur Windows), ou le demander à Codex.

5.2 Demander à Codex de fabriquer le kit

Lis 4.RESSOURCES/DESIGN-SYSTEM-APV/02-design-system.md. C'est le design system d'APV Infos TV, un média local pour les 41 communes Alpes Provence Verdon, conçu pour un public de 40 à 70 ans.

Je veux m'en servir pour produire des refontes de sites de mairies. Crée dans le même dossier :

1. tokens.css : toutes les variables CSS du document (couleurs, typographie, espacements, rayons, ombres, anneau de focus), sans en inventer.
2. declinaison-mairie.md : comment appliquer ce design system à un site de mairie. Arborescence type (Accueil, La mairie, Vivre ici, Découvrir, Actualités, Contact, Mentions légales), gabarit de chaque page, composants retenus parmi ceux du document, règles de lisibilité (texte de base 20 px, rien sous 16 px, contraste d'au moins 7:1), et le bandeau de maquette « Proposition de refonte réalisée par APV Infos TV, maquette non officielle ».
3. exemple.html : une page d'accueil de mairie fictive, autonome, qui utilise tokens.css, pour que je valide le rendu.

Garde les règles du document : esthétique de presse locale, pas d'effets « générés par IA ». Montre-moi le plan avant d'écrire.

Codex te propose un plan : relis-le, réponds « ok » ou corrige. Quand il a fini, ouvre exemple.html d'un double-clic : il s'affiche dans ton navigateur. Si le rendu te plaît, le kit est prêt. Sinon, dis-lui ce qui ne va pas (« les titres sont trop petits », « plus d'espace entre les blocs ») jusqu'à ce que la page te convienne : chaque correction faite ici profitera à toutes les communes.

6.1 L'anatomie d'un skill

Codex cherche les skills d'un projet dans le dossier .agents/skills/ à la racine du harnais. Chaque skill est un dossier contenant un SKILL.md : un en-tête (son nom et quand l'utiliser), puis les étapes. C'est la description de l'en-tête qui permet à Codex de reconnaître ta phrase et d'ouvrir la bonne recette sans que tu la nommes.

6.2 Le cahier des charges à donner à Codex

Ouvre Codex dans ton harnais et colle ce texte en entier. Il est long à dessein : chaque ligne évite une erreur.

$skill-creator Crée un skill nommé site-mairie, rangé dans .agents/skills/site-mairie/ à la racine de ce harnais.

DÉCLENCHEUR
Je demande de générer, refaire ou mettre à jour le site d'une mairie à partir de son site actuel, et de le publier sur un sous-domaine de apvinfos.tv.

ENTRÉES À EXTRAIRE DE MA DEMANDE
- le nom de la commune ;
- l'adresse de son site actuel ;
- le sous-domaine voulu (par défaut : nom de la commune en minuscules, sans accents, mots séparés par des tirets, suivi de .apvinfos.tv).
Appelle "slug" ce nom court (exemple : thorame-basse). S'il manque une entrée, demande-la avant de commencer.

ÉTAPES, DANS L'ORDRE
1. Garde-fous. Le sous-domaine doit se terminer par .apvinfos.tv. Lis la zone DNS apvinfos.tv avec le connecteur ovh_domaines : si une ligne existe déjà pour ce sous-domaine et ne pointe pas vers Vercel, arrête-toi et demande-moi.
2. Lecture du site actuel. Parcours la page d'accueil et les pages du menu (30 pages au maximum). Note dans 1.PROJETS/SITES-MAIRIES/[slug]/inventaire.md : menus, textes, horaires et coordonnées de la mairie, actualités récentes, liens utiles, adresses des images. N'invente aucune information : ce qui manque est marqué "à compléter".
3. Génération. Crée le site dans le dossier APTV-sites/[slug]/ de mon dossier personnel (jamais dans le harnais), en Astro statique, avec 4.RESSOURCES/DESIGN-SYSTEM-APV/tokens.css et les gabarits de declinaison-mairie.md. Reprends les vrais contenus de l'inventaire. Sur toutes les pages : la balise meta robots "noindex, nofollow", un robots.txt qui interdit tout ("Disallow: /"), et le bandeau "Proposition de refonte réalisée par APV Infos TV, maquette non officielle". Ajoute un vercel.json contenant {"framework": "astro"}.
4. Contrôle local. npm install puis npm run build doivent réussir sans erreur. Vérifie : aucun lien interne cassé, texte de base à 20 px, contrastes conformes au design system, affichage correct en largeur mobile.
5. Mise en ligne. Depuis APTV-sites/[slug]/ : lance "npx vercel link --yes --project site-[slug]", supprime le fichier .env.local que cette commande a créé, puis lance "npx vercel deploy --prod --yes". Relève l'adresse marquée "Aliased".
6. Rattachement de l'adresse. Lance "npx vercel domains add [sous-domaine] site-[slug]", puis "npx vercel domains inspect [sous-domaine]" pour lire la valeur CNAME que Vercel recommande.
7. DNS chez OVH. Avec le connecteur ovh_domaines, crée UN SEUL enregistrement dans la zone apvinfos.tv : type CNAME, sous-domaine [slug], cible = la valeur lue à l'étape 6 terminée par un point, TTL 3600. Puis rafraîchis la zone. INTERDIT : modifier ou supprimer un enregistrement existant, toucher aux serveurs DNS, aux lignes MX, TXT ou à la racine apvinfos.tv, commander quoi que ce soit.
8. Vérification. Toutes les 2 minutes, pendant 30 minutes au maximum, teste https://[sous-domaine] : il faut un code 200 et le bandeau de maquette dans la page. Si Vercel réclame une vérification par enregistrement TXT "_vercel", montre-moi la valeur demandée et attends mon accord avant de la créer.
9. Compte rendu. Ajoute dans 1.PROJETS/SITES-MAIRIES/[slug]/journal.md : la date, l'adresse en ligne, le nom du projet Vercel, l'enregistrement DNS créé et la liste des points "à compléter". Termine en me donnant le lien.

MISE À JOUR D'UN SITE EXISTANT
Si APTV-sites/[slug]/ existe déjà, ne recrée rien : applique mes corrections, refais les étapes 4 et 5, puis ajoute une ligne au journal.

RÈGLES PERMANENTES
- Ne publie jamais le dossier du harnais.
- N'écris aucun mot de passe ni jeton dans un fichier.
- En cas d'erreur, arrête-toi, explique en français simple ce qui bloque et propose la correction.
- Écris pour un lecteur non technicien.

Codex rédige le SKILL.md et te le montre. Relis surtout deux choses : la description de l'en-tête (elle doit parler de mairie, de refonte et d'apvinfos.tv) et l'étape 7 (un seul CNAME, rien d'autre). Puis dis-lui de l'enregistrer.

Pour être certain que la recette est utilisée, tu peux aussi commencer ta phrase par $site-mairie. Voici ce que tu verras défiler :

1. 1

   Codex annonce le skill codex

   Il cite « site-mairie », reformule commune, site source et adresse. quelques secondes

2. 2

   Contrôle de la zone OVH ovh

   Il vérifie que « thorame-basse » est libre. 1 minute

3. 3

   Lecture de thorame-basse.fr web

   Une trentaine de pages : conseil municipal, services, associations, randonnées, hameaux, actualités. 3 à 5 minutes

4. 4

   Génération du site codex

   Le gros du travail : pages, menus, contenus, design APV. 10 à 20 minutes

5. 5

   Contrôle local codex

   Compilation, liens, contrastes. S'il trouve une erreur, il la corrige et recommence. 2 à 5 minutes

6. 6

   Publication sur Vercel vercel

   Création du projet « site-thorame-basse », mise en ligne. 1 à 2 minutes

7. 7

   Écriture du CNAME chez OVH ovh

   Une ligne ajoutée, la zone rafraîchie. 1 minute

8. 8

   Attente de la propagation codex

   L'annuaire se met à jour sur internet, Vercel émet le certificat HTTPS. 5 à 30 minutes

9. ✓

   Le lien toi

   Codex te donne https://thorame-basse.apvinfos.tv et la liste des points à compléter.

• Le bandeau de maquette est visible en haut de chaque page.
• Les horaires et coordonnées de la mairie et de l'agence postale sont exacts.
• Le nom du maire et les élus sont à jour.
• Les photos sont nettes et correspondent bien à la commune.
• Le site se lit bien sur ton téléphone.
• Les points « à compléter » du journal sont traités ou assumés.

Pour corriger, parle simplement à Codex, il republie à la même adresse :

Sur le site de Thorame-Basse : l'agence postale ouvre le mardi de 9 h à 12 h, et mets la photo du village en tête de la page d'accueil. Puis republie.

• Étape 1 · Node.js 20 ou plus et Codex en version terminal installés.
• Étape 2 · Compte Vercel créé, npx vercel whoami répond ton identifiant.
• Étape 3 · Internet ouvert aux commandes de Codex.
• Étape 4 · Connecteur ovh_domaines autorisé, la zone apvinfos.tv se lit.
• Étape 5 · Kit design system dans 4.RESSOURCES/DESIGN-SYSTEM-APV/, exemple.html validé.
• Étape 6 · Skill site-mairie écrit, relu, visible dans /skills.
• Étape 7 · Thorame-Basse en ligne sur son adresse.
• Étape 8 · Maquette relue avant tout envoi à la mairie.