Déployer un site statique sur Cloudflare Pages : guide complet

Cloudflare Pages est devenu l’une des meilleures solutions pour héberger des sites statiques gratuitement. Performances exceptionnelles, déploiement automatique, et réseau CDN mondial : découvrez comment en profiter.

Pourquoi Cloudflare Pages ?

Avantages

• Gratuit : Plan généreux sans carte bancaire
• Rapide : CDN mondial avec plus de 300 points de présence
• Simple : Déploiement automatique depuis Git
• Sécurisé : SSL automatique, protection DDoS

Limitations du plan gratuit

• 500 builds par mois
• 1 build concurrent
• Pas de limites de bande passante !

Prérequis

Avant de commencer, vous aurez besoin de :

1. Un compte Cloudflare (gratuit)
2. Un dépôt Git (GitHub, GitLab, ou Bitbucket)
3. Un site statique prêt à déployer

Étape 1 : Connecter votre dépôt

1. Connectez-vous à Cloudflare Dashboard
2. Allez dans Workers & Pages
3. Cliquez sur Create application > Pages > Connect to Git
4. Autorisez Cloudflare à accéder à votre dépôt

Étape 2 : Configurer le build

Cloudflare détecte automatiquement la plupart des frameworks. Voici les configurations courantes :

Astro

Build command: npm run build
Build output directory: dist

Next.js (Static Export)

Build command: npm run build
Build output directory: out

Hugo

Build command: hugo
Build output directory: public

Vue/Vite

Build command: npm run build
Build output directory: dist

Étape 3 : Variables d’environnement

Si votre projet nécessite des variables d’environnement :

1. Dans les paramètres du projet, allez à Environment variables
2. Ajoutez vos variables pour Production et/ou Preview

SITE_URL=https://monsite.com
API_KEY=votre_cle_api

:::tip Ne commitez jamais vos clés API dans votre dépôt. Utilisez toujours les variables d’environnement. :::

Étape 4 : Domaine personnalisé

Par défaut, votre site est accessible sur projet.pages.dev. Pour utiliser votre propre domaine :

1. Allez dans Custom domains
2. Cliquez sur Set up a custom domain
3. Entrez votre domaine (ex: monsite.com)
4. Suivez les instructions pour configurer les DNS

Si votre domaine est déjà sur Cloudflare, la configuration est automatique !

Optimisations recommandées

Activer les fonctionnalités Cloudflare

Dans les paramètres de votre domaine :

• Auto Minify : Minifie HTML, CSS, JS
• Brotli : Compression avancée
• Early Hints : Préchargement des ressources

Headers de cache

Créez un fichier _headers à la racine de votre dossier de build :

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin

/assets/*
  Cache-Control: public, max-age=31536000, immutable

/*.html
  Cache-Control: public, max-age=0, must-revalidate

Redirections

Créez un fichier _redirects pour gérer les redirections :

/ancien-chemin /nouveau-chemin 301
/blog/* /articles/:splat 301

Déploiement automatique

Chaque push sur votre branche principale déclenche automatiquement un nouveau déploiement. Les pull requests créent des preview deployments avec une URL unique.

C’est parfait pour :

• Tester les modifications avant mise en production
• Partager des previews avec votre équipe
• Revenir à une version précédente si nécessaire

Monitoring

Cloudflare Pages offre des métriques basiques :

• Nombre de requêtes
• Bande passante utilisée
• Builds récents

Pour un monitoring plus avancé, vous pouvez utiliser Cloudflare Analytics ou intégrer Plausible Analytics.

Conclusion

Cloudflare Pages est une excellente solution pour héberger des sites statiques. La combinaison de la gratuité, des performances et de la simplicité en fait un choix idéal pour les développeurs.

Pour les projets nécessitant un backend ou une base de données, vous pouvez combiner Cloudflare Pages avec un VPS chez FastHeberg pour héberger votre API.