Site vitrine (B1)

En bref

Cette offre crée et met en ligne un site professionnel qui présente clairement l'activité du client et qu'il peut ensuite mettre à jour simplement. Le site est adapté aux téléphones et aux ordinateurs, rapide et préparé pour être correctement compris par les moteurs de recherche. Le suivi mensuel associé, appelé suivi C dans le catalogue, couvre l'hébergement, la maintenance, le support et de petites évolutions.

Stack de référence de l'offre B1 et de ses options (B1.1 à B1.7).

Périmètre de la baseline

La baseline fournit un site vitrine professionnel à partir de la charte du client :

• jusqu'à 5 pages ;
• mise en page responsive ;
• blog ou contenu éditable ;
• référencement naturel et métadonnées ;
• animations sobres ;
• optimisation des performances ;
• mise en ligne sur le domaine du client ;
• documentation et prise en main de l'édition.

Les contenus sont fournis par le client. Leur rédaction relève de l'option B1.2. Toute collecte structurée, stockage de données ou logique métier relève de B1.5 ou de l'offre B2.

Stack de référence

Brique	Référence	Règle
Framework	Astro avec TypeScript	Génération statique par défaut
Interface	HTML, CSS et composants Astro	Pas de framework client global sans besoin démontré
Interactivité	Îlots React uniquement si nécessaire	Chargement côté navigateur limité au composant interactif
Contenu	Collections de contenu Astro	Schéma typé et contenu versionné avec le code
CMS	Keystatic pour les sites simples ; Directus uniquement pour les contenus structurés ou plusieurs éditeurs	Le contenu doit rester exportable dans un format standard
Images	Pipeline d'images Astro	Dimensions explicites, formats modernes et chargement différé
Qualité	ESLint, Prettier et vérification TypeScript	Exécutés avant chaque mise en production
Tests	Playwright pour les parcours critiques	Navigation, formulaires et affichage mobile

Astro est la référence pour B1 : son approche centrée contenu, la génération statique et l'absence de JavaScript côté client par défaut correspondent au besoin d'un site vitrine rapide et facilement réversible. Un autre framework n'est retenu que si une contrainte fonctionnelle précise le justifie.

Structure du projet

Le projet sépare :

• composants de mise en page ;
• composants éditoriaux ;
• contenus et médias ;
• styles et tokens de design ;
• configuration du site ;
• intégrations externes.

Les informations propres au client, comme le domaine, les identifiants d'analytics, les endpoints et les clés, sont injectées par variables d'environnement. Aucun secret n'est stocké dans le dépôt Git.

Design et accessibilité

• Les composants récurrents sont documentés et réutilisés entre les pages.
• Les couleurs, espacements, typographies et rayons sont centralisés sous forme de tokens.
• Le responsive est vérifié sur mobile, tablette et ordinateur.
• La navigation et les composants interactifs sont utilisables au clavier.
• Les contrastes, labels et textes alternatifs visent le niveau AA de WCAG.
• Les animations respectent prefers-reduced-motion.
• Aucun composant externe n'est ajouté uniquement pour un effet visuel facilement réalisable en CSS.

Référencement et partage

Chaque page publique dispose de :

• titre et description spécifiques ;
• URL canonique ;
• métadonnées Open Graph ;
• image de partage lorsque nécessaire ;
• données structurées JSON-LD adaptées au contenu ;
• sitemap et règles d'indexation ;
• hiérarchie de titres valide ;
• redirections lors d'un changement d'URL.

Le SEO couvre la qualité technique et la structuration du contenu. Il ne constitue pas une garantie de positionnement dans les résultats de recherche.

Performance

Le site est livré avec un budget de performance :

• génération statique pour toutes les pages qui le permettent ;
• polices auto-hébergées ou limitées au strict nécessaire ;
• images redimensionnées et compressées ;
• absence de script tiers non justifié ;
• chargement différé des contenus non critiques ;
• cache long sur les ressources versionnées.

Les pages principales sont contrôlées avec Lighthouse avant livraison. Une régression significative de performance provoquée par un script tiers est documentée et soumise à validation.

Contenu éditable et CMS

Le client doit pouvoir modifier les contenus convenus sans intervenir dans le code.

Pour un site simple, le contenu reste dans le dépôt Git et le CMS fournit une interface d'édition au-dessus de ces fichiers. Cette approche conserve l'historique, facilite le rollback et rend la restitution immédiate.

Un CMS séparé comme Directus est réservé aux cas qui nécessitent :

• plusieurs rôles éditoriaux ;
• un workflow de validation ;
• des contenus fortement structurés ;
• une API consommée par plusieurs canaux ;
• un volume incompatible avec une gestion dans le dépôt.

Formulaires

Un formulaire simple peut transmettre un message sans créer de base métier. Il inclut : validation côté serveur, protection contre le spam, consentement explicite et durée de conservation définie.

Les formulaires avancés, pièces jointes, workflows, exports, stockage structuré ou synchronisations relèvent de B1.5. Ils utilisent un service commun Alpene construit avec Fastify, PostgreSQL et un stockage compatible S3 pour les pièces jointes. Les données collectées ne transitent pas dans les outils d'analytics.

Options du catalogue

Option	Déclinaison technique
B1.1 · Page supplémentaire	Même stack, composants et contrôles que la baseline
B1.2 · Copywriting	Contenus intégrés dans le CMS, métadonnées et structure SEO comprises
B1.3 · Multilingue	Routage internationalisé Astro, contenus séparés par langue, balises hreflang et sitemap adapté
B1.4 · Analytics	Umami auto-hébergé, sans cookie lorsque la configuration le permet, avec tableau de bord client
B1.5 · Collecte de données	Service Fastify, validation, consentement, stockage PostgreSQL, pièces jointes sur stockage compatible S3 et politique de rétention documentée
B1.6 · Prise de rendez-vous	Intégration de l'outil du client ou de Cal.com, avec synchronisation des agendas et contrôle des données transmises
B1.7 · Identité visuelle	Livraison des sources, exports, typographies autorisées et tokens intégrés au site

Hébergement et mise en ligne

Le résultat de build est un ensemble de fichiers statiques déployable sans dépendance à Astro en production.

La cible de référence est Netlify, avec :

• déploiement automatique depuis la branche principale du dépôt GitHub ;
• aperçu isolé pour chaque pull request ;
• certificat TLS automatique ;
• redirections et en-têtes de sécurité versionnés ;
• rollback vers un déploiement antérieur.

Le nom de domaine reste au nom du client. Alpene administre la zone ou les enregistrements nécessaires pendant le suivi. Le dépôt, le build statique et les contenus sont transférables vers un autre hébergeur.

Sécurité

• En-têtes de sécurité définis avec le déploiement.
• Dépendances maintenues et vulnérabilités critiques traitées avant livraison.
• Accès au CMS nominatifs et protégés par MFA lorsque le fournisseur le permet.
• Secrets limités aux intégrations serveur.
• Scripts tiers inventoriés avec leur finalité et les données transmises.
• Formulaires protégés contre le spam, les soumissions automatisées et les entrées invalides.

Les contrôles transverses sont détaillés dans Sécurité par défaut.

Livraison

Chaque site B1 est livré avec :

• dépôt Git et historique ;
• procédure de développement et de build ;
• inventaire des services et scripts tiers ;
• accès au CMS et guide d'édition ;
• configuration du domaine et de l'hébergement ;
• rapport des contrôles de performance et d'accessibilité ;
• procédure de sauvegarde, de rollback et de transfert.

Décisions validées

• Astro et TypeScript constituent la stack B1 de référence.
• Keystatic est le CMS simple de référence ; Directus est réservé aux besoins éditoriaux structurés.
• Netlify est l'hébergement standard des sites statiques, sans dépendance du build à cet hébergeur.
• Umami est la solution d'analytics auto-hébergée de référence.
• Les formulaires B1.5 utilisent un service commun Fastify, PostgreSQL et un stockage compatible S3.