</> HTML5Advent
ENFRESDEITPT

// hosting · Web Platform Advent #12

Hébergement de site statique : déployer un site Astro, Vite ou HTML

Ce qu'est l'hébergement statique, comment un CDN sert votre build, et comment déployer un site Astro, Vite ou JAMstack avec un nom de domaine et HTTPS gratuit.

La main d'un technicien manipulant un serveur éclairé en bleu dans une baie de datacenter

Un site statique est un ensemble de fichiers pré-générés — HTML, CSS, JavaScript et médias — qu'un serveur peut livrer tels quels au navigateur, sans rien exécuter à chaque requête. Des outils comme Astro, Vite, Eleventy ou un simple dossier HTML écrit à la main produisent ce type de sortie. L'héberger est plus simple, moins cher et plus rapide qu'une application dynamique, car il n'y a rien à exécuter côté serveur.

Ce que signifie vraiment « hébergement statique »

Avec l'hébergement statique, vous lancez une étape de build en local ou en CI, qui produit un dossier de fichiers bruts (souvent nommé dist ou _site). Le seul rôle de l'hébergeur est de stocker ces fichiers et de les servir en HTTP. Pas de PHP, pas de processus Node, pas de base de données — uniquement des fichiers. Cela a trois conséquences directes :

  • Vitesse — les fichiers se mettent en cache agressivement et se servent depuis l'edge, au plus près du visiteur.
  • Coût — pas de serveur allumé en permanence à payer ; beaucoup de fournisseurs offrent un palier gratuit généreux.
  • Fiabilité — moins de pièces mobiles, donc moins de choses susceptibles de casser sous la charge.

Générer votre dossier de sortie

Chaque framework statique expose une commande de build. Le résultat est le dossier que vous téléversez ou vers lequel vous pointez votre hébergeur :

# Astro
npm run build        # génère ./dist

# Vite
npm run build        # génère ./dist

# HTML brut
# pas d'étape de build — votre dossier de fichiers .html est déjà la sortie

Pour un site HTML brut, le « build » est simplement le dossier que vous avez déjà. Pour Astro ou Vite, c'est le répertoire dist qui est servi.

Une rangée de serveurs noirs montés en rack dans un datacenter
Derrière chaque site statique se cache une infrastructure physique — des baies de serveurs et des nœuds edge de CDN qui stockent et distribuent vos fichiers générés.

Où héberger : CDN ou hébergement statique classique

Vous avez deux grandes familles d'options :

Plateformes edge / CDN

Elles construisent votre projet depuis un dépôt Git et distribuent la sortie sur un réseau de diffusion de contenu. Un CDN stocke des copies de vos fichiers à de nombreux endroits dans le monde, si bien qu'un visiteur est servi depuis un nœud proche de lui. Cela réduit la latence et absorbe les pics de trafic. Les déploiements se déclenchent généralement par un git push.

Hébergement classique / stockage objet

Vous pouvez aussi servir un site statique depuis un hébergeur web traditionnel ou depuis du stockage objet avec un CDN devant. C'est pertinent quand vous avez déjà un hébergement pour d'autres projets, ou quand vous préférez gérer vous-même le téléversement via FTP/SSH ou un script de déploiement.

Connecter un nom de domaine

Quel que soit l'hébergeur, le câblage du domaine est le même dans son principe. Vous pointez les enregistrements DNS de votre domaine vers l'hébergeur :

  • Un enregistrement A (ou AAAA) pointant le domaine apex (example.com) vers l'IP de l'hébergeur, ou
  • Un enregistrement CNAME pointant un sous-domaine (www.example.com) vers le nom d'hôte fourni par l'hébergeur.

Beaucoup de plateformes acceptent aussi la délégation des serveurs de noms, où vous confiez entièrement la gestion DNS à l'hébergeur. Une fois les enregistrements propagés, l'hébergeur sert votre site sur votre propre domaine.

HTTPS gratuit

HTTPS n'est plus optionnel — les navigateurs signalent le HTTP simple comme « non sécurisé », et de nombreuses API de la plateforme web ne fonctionnent que dans un contexte sécurisé. Bonne nouvelle : la quasi-totalité des hébergeurs statiques modernes émettent et renouvellent les certificats TLS pour vous automatiquement, généralement via Let's Encrypt. Une fois votre domaine connecté, le certificat est provisionné sans aucune manipulation, et les renouvellements se font tout seuls.

Référence rapide

ÉtapeCe que vous faites
BuildLancer npm run build (Astro/Vite) ou utiliser votre dossier HTML
SortieServir le dossier dist / _site
HébergeurChoisir une plateforme edge/CDN ou un hébergeur compatible statique
DomainePointer les enregistrements A/AAAA ou CNAME vers l'hébergeur
HTTPSCertificat TLS automatique, aucune configuration manuelle

Tout l'intérêt de l'hébergement statique est de s'effacer : vous générez une fois, vous poussez, et les fichiers sont servis vite depuis l'edge. Réservez l'hébergement dynamique aux parties de votre projet qui ont réellement besoin de logique côté serveur — et gardez le frontend statique sur une infrastructure conçue pour livrer des fichiers rapidement.