/website-build - construire un site web correctement
Distillé de la construction, de la traduction en cinq langues, du lancement et du durcissement d'un vrai site marketing pour une entreprise d'applications mobiles. Chaque règle des références provient de quelque chose qui a réellement mal tourné ou qui a coûté du temps. Ce fichier est la route ; les références contiennent les détails.
| Ouvrez ceci | lorsque vous êtes sur le point de |
|---|---|
references/01-architecture-pipeline-deploy.md | configurer la structure des dossiers et la chaîne de build, choisir les bibliothèques, ajouter une étape de build, déployer, configurer l'hébergement/CSP/redirections, mettre en place les sauvegardes |
references/02-design-typography-mockups.md | définir les tokens et la typographie, gérer les polices et les sauts de ligne, créer des maquettes téléphoniques, placer les icônes/logos, construire les composants et l'animation |
references/03-i18n-seo-geo.md | traduire, ajouter un marché, rédiger les balises meta/JSON-LD, sitemap/robots/llms.txt, faire du GEO, optimiser les performances, configurer les analytics |
references/04-qa-devices-modes.md | tester n'importe quoi ; le harnais, la matrice appareil/largeur/mode, les navigateurs intégrés aux applications, l'accessibilité, les flux de consentement, la QA contradictoire et en direct |
references/05-process-content-legal-launch.md | gérer le projet : rôles, approbations, boucle de feedback, architecture de l'information, faits, pages légales, consentement, mise en ligne |
scripts/qa/ | exécuter le harnais de QA (CDP brut, rien à installer) et la matrice WebKit/navigateur intégré (Playwright) |
scripts/backup/snapshot.py | versionner un fichier avant une modification, lister les versions, restaurer ; ou l'installer comme hook PreToolUse |
1. Phases (dans l'ordre)
- Brief (
05) : objectif et CTA, marchés/langues, liste des pages, fiche des faits avec sources, assets de marque, entité légale par marché, suivi et consentement, hébergement, et qui fusionne la production. - Squelette (
01) : un dossier source, la langue maîtresse éditée à la main, chrome partagé injecté par blocs marqués idempotents, des constructeurs pour tout le reste,_dist(optimisé) et_deploy(hébergement) comme copies générées à sens unique, un verrou de build, git dès le premier fichier. - Système de design (
02) : tokens par fond,clamp()avec rem plus une petite pente vw,width/heightréelles sur les images,srcsetabsolu, polices subset auto-hébergées couvrant tous les diacritiques, un système d'animation par élément, sûr en mode mouvement réduit et JS désactivé. - Imagerie (
02) : écrans produits réels exportés par marché depuis l'outil de design (3x PNG -> WebP). Ne jamais coller de texte sur des rasters. Corriger les logos dans le fichier, pas avec des modes de fusion. - Copie et faits (
05) : une liste de faits, un terme par concept, entité légale par marché, adresse formelle/informelle par audience. - i18n (
03) : dictionnaire plus constructeurs à correspondance exacte de texte, typographie à l'exécution, hreflang (+ x-default), tableaux de données par marché, QA linguistique. - SEO (
03) : un post-processeur idempotent entre les marqueurs, un@graphJSON-LD par page, sitemap avec lastmod réel, robots (crawlers IA autorisés intentionnellement), une vraie 404. - GEO (
03) :llms.txt(+ complet),facts.json, données d'entité cohérentes sur et hors site, texte qui survit à l'extraction sans JS, puis le protocole de test GEO, y compris interroger les vrais moteurs IA. - Performance (
03) : assets en ligne -> fichiers hashés, WebP, chargement différé sous la ligne de flottaison, bibliothèques auto-hébergées, gestionnaire de balises différé, Lighthouse sur mobile et desktop. - Consentement, analytics, légal (
03,05) : barre de consentement, Consent Mode v2 (décider basic vs advanced délibérément), balises uniquement après consentement, chaque traqueur listé dans la politique de confidentialité, pages légales requises, CSP en mode Rapport-Seulement d'abord. - QA (
04) : la matrice complète page x largeur, modes, WebKit et navigateurs intégrés sociaux, clavier/focus, scénarios de consentement, liens/ancre/commutateur de langue, revue contradictoire, puis vrais téléphones. - Mise en ligne (
05,01) : sauvegarder l'ancien site et le DNS, rediriger chaque ancienne URL (garder les chemins listés en boutique exacts), tester la prévisualisation par rapport à la référence, basculer, exécuter la liste de vérification en direct.
2. Règles strictes
- Ne jamais éditer manuellement les fichiers générés (versions linguistiques,
_dist,_deploy). Éditer la source ou le constructeur, puis reconstruire. - Ne jamais insérer manuellement
/<br>dans une copie que les constructeurs de traduction font correspondre par texte exact. Les sauts de ligne sont effectués à l'exécution. - Une session construit et publie. Le verrou de build vérifie son propriétaire ; attendre s'il est détenu, ne jamais le supprimer. Vérifier la mémoire libre avant une construction complète.
- Une page qui s'affiche ne prouve rien : vérifier la syntaxe de chaque script en ligne, scanner les caractères de contrôle, exécuter la matrice complète.
- Chaque cycle de feedback devient une passe idempotente dans la build qui échoue si son texte cible disparaît.
- La production est fusionnée par le propriétaire. Les changements d'hébergement, CSP, consentement, suivi et légaux vont d'abord au relecteur technique sur une branche latérale.
- Les faits vivent dans une seule liste. Un nombre qui diffère entre deux pages est un bug de confiance et un bug GEO.
- Sauvegardes : git par site avec un commit à chaque phase ;
scripts/backup/snapshot.py(ou son hook) pour tout ce qui se trouve entre les commits ; ancien site et DNS sauvegardés avant la mise en ligne. - Re-tester les superpositions, les barres collantes et le menu sur la sortie buildée, minifiée. Les minifieurs peuvent supprimer la spécificité des sélecteurs.
- Tester CSP et consentement dans les navigateurs intégrés où vos publicités atterrissent, et sur les pages qui portent un état (tokens dans les URL).
3. QA en un souffle
Les chemins sont relatifs à ce dossier de compétence. node scripts/qa/jscheck.mjs site/_dist d'abord, puis
node scripts/qa/audit.mjs <dossier-ou-url> avec QA_WIDTHS=1440x900,1280x800,1024x768,768x1024,430x932,390x844,360x780,320x700,
puis anchors.mjs, modes.mjs, console-sweep.mjs, shots.mjs (regardez les captures d'écran vous-même),
et inapp.mjs pour WebKit plus les navigateurs intégrés Instagram/Facebook/TikTok. Chaque script respecte un
contrat de code de sortie : 0 propre, 1 résultats (y compris une page qui ne se charge pas), 2 mauvaise utilisation, 3 n'a pas pu s'exécuter
(Chrome, axe-core ou Playwright manquant). Listes de vérification : 04, sections "pré-publication" et "post-déploiement".