Featured image of post Déploiement Statique Rapide sur Cloudflare Pages

Déploiement Statique Rapide sur Cloudflare Pages

Documentation Technique : Déploiement Statique Rapide sur Cloudflare Pages

Cloudflare Pages est une plateforme performante dédiée à l’hébergement de sites web statiques. Bien qu’elle soit optimisée pour des déploiements automatisés via Git (GitHub, GitLab), elle offre également une solution de téléversement direct idéale pour les projets légers, les maquettes ou les mini-sites composés de quelques fichiers isolés, sans avoir à configurer de pipeline CI/CD.


1. Objectif et Cas d’Usage

Cette docs décrit la procédure pour mettre en ligne un site statique de manière instantanée. Cette approche est particulièrement recommandée pour :

  • Projets ultra-légers : Landing pages ou mini-sites contenant uniquement quelques fichiers (index.html, style.css, script.js).
  • Absence de Git : Projets locaux qui ne nécessitent pas de dépôt Git distant.
  • Tests rapides : Validation immédiate d’un rendu en environnement de production mondial.

2. Prérequis

Avant d’initier le déploiement, assurez-vous que votre projet respecte l’arborescence requise. Cloudflare Pages doit impérativement trouver un point d’entrée à la racine de votre dossier :

Arborescence du projet : mon-projet-statique/

├── index.html <– Point d’entrée principal (obligatoire à la racine)

├── style.css <– Feuilles de style

└── script.js <– Scripts optionnels


3. Procédure de Déploiement (Pas à Pas)

Étape 1 : Création du compte

Rendez-vous sur dash.cloudflare.com/sign-up pour créer votre compte ou connectez-vous si vous en possédez déjà un.

Étape 2 : Accès à l’espace Workers & Pages

Dans la barre de navigation latérale gauche de votre tableau de bord Cloudflare, cliquez sur l’onglet Workers & Pages. Cet espace centralise la gestion de vos applications et de vos sites statiques.

Étape 3 : Initialisation du projet Pages

  • Faites défiler la page vers le bas jusqu’à la section Pages.
  • Repérez la mention : « Vous souhaitez déployer Pages ? Commencer » et cliquez sur le bouton Commencer.
  • Dans l’interface suivante, sélectionnez l’option Faites glisser vos fichiers (Téléversement direct) et cliquez à nouveau sur Commencer.

Étape 4 : Configuration et chargement des ressources

  • Nom du projet : Saisissez un nom unique pour votre projet. Ce nom déterminera l’URL par défaut de votre site (ex: nom-du-projet.pages.dev).
  • Sélection des ressources : Chargez vos ressources en faisant glisser votre dossier complet ou vos fichiers uniques directement dans la zone de dépôt.

Étape 5 : Finalisation du déploiement

Cliquez sur le bouton Déployer le site. L’infrastructure de Cloudflare distribue instantanément vos fichiers sur son réseau mondial (CDN). Votre site est immédiatement disponible via une URL sécurisée HTTPS.


4. Gestion et Évolutivité

FonctionnalitéDescription et Action
Mises à jour du sitePour publier une nouvelle version, il suffit de retourner dans l’onglet du projet sur Cloudflare Pages et de téléverser à nouveau le dossier mis à jour.
Domaines personnalisésVous pouvez associer gratuitement votre propre nom de domaine (ex: www.mon-site.fr) avec génération automatique du certificat SSL.
Transition vers Git / CI-CDSi le projet grandit, vous pouvez à tout moment connecter ce projet à un dépôt GitHub ou GitLab pour automatiser les déploiements à chaque git push.