Notre nouveau site Web est en ligne. Ce texte s’adresse à ceux qui veulent savoir comment il est construit.
Adieu WordPress
Le site est maintenant entièrement statique, construit avec Astro 7. Chaque page est générée en HTML au moment de la compilation, puis servie depuis un compartiment S3 privé derrière CloudFront. Il n’y a ni base de données, ni PHP, ni console d’administration à corriger.
Le seul code qui s’exécute à la requête est le formulaire de contact. C’est une fonction Lambda derrière la même distribution CloudFront, protégée par Cloudflare Turnstile et une limite de requêtes par adresse IP. Pour une firme de cybersécurité, cette surface d’attaque réduite est notre fonctionnalité préférée.
Durci par défaut
Nous utilisons une configuration stricte de la politique de sécurité du contenu (CSP). CloudFront ajoute HSTS, X-Frame-Options, Referrer-Policy et Permissions-Policy. Une suite Playwright teste cette politique sur chaque branche et bloque le pipeline en cas d’échec.
Les outils d’analyse ne se chargent qu’après consentement. Le mode Consentement de Google démarre avec tous les signaux refusés.
Une méthode de contribution adaptée à l’IA
Les faits sur OKIOK, nos produits et nos services sont réunis dans un dossier de référence du dépôt, en Markdown. Un guide de style obligatoire et un système de design l’accompagnent. Avec ces trois éléments, un assistant IA comme Claude Code peut rédiger une page, la valider contre le guide de style et vérifier la mise en page dans un vrai navigateur.
Rien n’est publié sans révision. Chaque changement passe par une demande de fusion qui a sa propre adresse de prévisualisation. Des vérifications à la compilation font échouer le build quand une route se brise ou qu’une page disparaît de llms.txt, la carte que nous publions pour les moteurs de réponse.
L’infrastructure en tant que code
Toute l’infrastructure d’hébergement est une application AWS CDK, dans le même dépôt:
- Le compartiment privé et la distribution CloudFront
- Une fonction en périphérie qui sert chaque ancienne adresse WordPress en redirection 301 depuis un KeyValueStore
- La fonction Lambda du formulaire de contact et sa table de limites de requêtes
- Les rôles IAM qu’assume le pipeline
GitLab CI la déploie avec des jetons OIDC de courte durée, si bien qu’aucune clé d’accès AWS n’est stockée nulle part. La branche principale va à l’environnement de test. La production attend derrière une approbation manuelle. Les sites de documentation de RAC/M Identity et de S-Filer Portal sont publiés dans le même compartiment depuis leurs propres dépôts.
Et les fractales dans l’image d’en-tête des nouvelles et des notes de version?
Chacune est une vue agrandie de l’ensemble de Mandelbrot, rendue en direct en WebGL. La vue est générée à partir de l’adresse du texte. Un même texte a donc toujours la même image, et deux textes différents ont des images différentes. Quand le navigateur ne peut pas afficher le WebGL, l’en-tête devient une simple bande sombre et le titre reste.
Pour le plaisir, suivez le lien « Explorez celle-ci » sous n’importe quelle fractale pour ouvrir l’explorateur. Tapez votre nom, ou ce que vous voulez, dans le champ de la graine pour obtenir votre propre fractale. L’adresse vous suit quand vous vous déplacez ou zoomez. Deux pour commencer: une psychédélique et la préférée d’Éric. Vous en trouvez une particulièrement belle? Partagez son adresse et identifiez-nous avec #okiok.