Documentation · Cadriciels

Déployer un site statique.

HTML, CSS et JavaScript purs — sans étape de build, sans package.json. S’il y a un index.html à la racine, Canner le sert. Le chemin le plus court entre un dossier et un URL.

Comment ça fonctionne

Quand un projet a un index.html à sa racine et aucun package.json, Canner saute complètement le build et sert les fichiers directement, avec HTTPS, une compression gzip ou Brotli et un repli de type SPA (les chemins inconnus servent index.html). Ça fonctionne par glisser-déposer, par la CLI ou depuis un dépôt GitHub.

Parfait pour les pages générées par IA. Une page produite par ChatGPT, Claude ou Gemini — un fichier HTML, peut-être un CSS — se déploie en quelques secondes. Déposez le dossier sur la zone de dépôt de l’accueil et c’est en ligne.

Depuis GitHub

Un dépôt qui n’est que des fichiers statiques se déploie de la même façon — et Canner retire le répertoire .git de ce qui est servi : l’historique de votre dépôt n’est jamais exposé. Chaque poussée sur la branche redéploie automatiquement.

Avec une étape de build?

Si votre site statique est généré — sortie Astro, Eleventy, Gatsby ou Hugo committée dans un dépôt, ou projet Vite — voyez les guides Vite et Astro; Canner exécute le build pour vous plutôt que de servir la source.

Compression

Les fichiers texte de plus de 1 Ko — HTML, CSS, JavaScript, JSON, SVG, cartes de source et polices TTF/OTF — sont compressés automatiquement avec Brotli ou gzip, selon ce que le navigateur demande. Il n’y a rien à configurer. Les images et les polices WOFF/WOFF2 sont déjà compressées et sont envoyées telles quelles. Cela s’applique à tout site servi de cette façon, y compris le résultat du build d’un projet Vite.

En-têtes personnalisés

Pour définir des en-têtes de réponse comme Content-Security-Policy, X-Frame-Options ou Referrer-Policy, ajoutez un fichier nommé _headers à la racine des fichiers que Canner sert. Avec Vite, placez-le dans public/_headers : il est copié dans dist/. Le format est le même que sur Netlify et Cloudflare Pages : un motif de chemin, puis ses en-têtes en retrait en dessous.

/*
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin
  Content-Security-Policy: default-src 'self'; img-src 'self' data:

/assets/*
  Cache-Control: public, max-age=31536000, immutable
  • * correspond à n’importe quoi, barres obliques comprises; :nom correspond à un seul segment de chemin.
  • Toutes les règles qui correspondent s’appliquent, dans l’ordre du fichier; pour un même en-tête, la dernière l’emporte. Cela inclut le Cache-Control par défaut, que vous pouvez remplacer.
  • Les en-têtes sont ajoutés à toutes les réponses, y compris les 404 et le repli SPA.
  • Les en-têtes que le serveur gère lui-même (Content-Length, Content-Encoding, Connection, Transfer-Encoding) et les lignes mal formées sont ignorés. Le fichier peut contenir jusqu’à 100 règles et n’est jamais servi aux visiteurs.
  • Cela vaut pour les sites statiques. Les applications Node, Next.js et autres définissent leurs propres en-têtes dans le code. Un site obtient la compression et _headers à son prochain déploiement.

Bon à savoir

  • Les sites statiques sont si légers que la veille du forfait gratuit se remarque à peine — ils se réveillent instantanément.
  • Les domaines personnalisés fonctionnent comme pour tout projet.
  • Les plafonds de téléversement sont par forfait et généreux — amplement pour tout site statique (voir les limites).