Infrastructure/Case study 06
This site: architecture
A bilingual static site, no framework, hosted on Cloudflare.
- GitHub repository
- Cloudflare Workers
- cedricheckly.ch
Principles
Each page is a static HTML file. JavaScript is limited to the site's own modules: Inspect mode, video players, the project list. There is no framework and no build step in the repository. The French and English pages are produced from the same content by a generation script kept outside the repository: handy, until the day I change computers.
Hosting
The GitHub repository is linked to a Cloudflare Worker that serves the static files. The main branch is production and dev is development. Images live in an R2 bucket exposed on a dedicated domain, with a dedicated cache rule. The setup aims to stay within Cloudflare's free limits.
Videos
YouTube videos load on click, from the youtube-nocookie domain. When a page loads, only the thumbnails are requested from YouTube.
HTTP headers
Headers include HSTS, X-Frame-Options, X-Content-Type-Options, a referrer policy and a permissions policy.
Inspect mode
The Inspect button shows the technical information of a page or project. Its state is stored in the browser and stays active across pages and languages. In the footer it shows the weight and number of requests of the loaded page.