Infrastructure/Étude de cas 06

Ce site : architecture

Site statique bilingue, sans framework, hébergé sur Cloudflare.

  1. Dépôt GitHub
  2. Cloudflare Workers
  3. cedricheckly.ch

Principes

Chaque page est un fichier HTML statique. Le JavaScript se limite aux modules du site : mode Inspect, lecteurs vidéo, liste des projets. Il n'y a ni framework ni étape de build dans le dépôt. Les pages en français et en anglais sont produites à partir d'un même contenu par un script de génération, hors dépôt : pratique, jusqu'au jour où je changerai d'ordinateur.

Hébergement

Le dépôt GitHub est relié à un Worker Cloudflare qui sert les fichiers statiques. La branche main correspond à la production et dev au développement. Les images sont dans un bucket R2 exposé sur un domaine dédié, avec une règle de cache dédiée. La configuration vise à rester dans les limites gratuites de Cloudflare.

Vidéos

Les vidéos YouTube sont chargées au clic, depuis le domaine youtube-nocookie. Au chargement d'une page, seules les miniatures sont demandées à YouTube.

En-têtes HTTP

Les en-têtes comprennent HSTS, X-Frame-Options, X-Content-Type-Options, une politique de référent et une politique de permissions.

Mode Inspect

Le bouton Inspect affiche les informations techniques d'une page ou d'un projet. Son état est mémorisé dans le navigateur et reste actif d'une page, et d'une langue, à l'autre. Dans le pied de page, il indique le poids et le nombre de requêtes de la page chargée.