Comment créer et déployer gratuitement des sites Internet sur Cloudflare Pages en passant par GitHub ?

Mettre un site en ligne peut commencer avec une simple page HTML. GitHub conserve les fichiers et leur historique ; Cloudflare Pages les publie et déploie les mises à jour automatiquement. Ce tutoriel présente ce parcours avec un exemple que vous pouvez adapter.

Avant de commencer : Cloudflare recommande désormais Workers pour les nouveaux projets. Pages reste disponible et conserve une documentation dédiée. Nous suivons ici le parcours Pages, avec une connexion à GitHub. Source : présentation officielle de Pages.

1. Créer une première page

Pour cet exemple, préparez un dossier site contenant un fichier index.html. Vous pouvez l’écrire dans un éditeur de texte, puis l’ouvrir dans votre navigateur pour vérifier son contenu.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mon premier site</title>
  <style>
    body {
      max-width: 48rem;
      margin: 4rem auto;
      padding: 0 1.5rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
      color: #172033;
      background: #f7f9fc;
    }
    h1 { line-height: 1.2; }
  </style>
</head>
<body>
  <main>
    <h1>Bienvenue sur mon site</h1>
    <p>Une première page pour présenter mon projet.</p>
    <p>Vous trouverez bientôt ici mes actualités.</p>
  </main>
</body>
</html>

Le résultat est un site statique : le navigateur affiche les fichiers publiés. Cet exemple ne comporte ni base de données ni traitement de formulaire côté serveur.

2. Enregistrer le site sur GitHub

Connectez-vous à GitHub et créez un dépôt, par exemple mon-premier-site. Un dépôt est le dossier de votre projet, accompagné de l’historique des modifications.

Pour ce nouveau projet, ajoutez un README lors de la création afin d’initialiser le dépôt. Source : créer un dépôt GitHub.

Depuis le dépôt, utilisez Add file → Upload files, puis déposez le dossier site. Enregistrez les fichiers avec un message décrivant cet ajout. Un enregistrement dans l’historique s’appelle un commit. Source : ajouter des fichiers sur GitHub.

Vérifiez que l’arborescence obtenue est bien :

mon-premier-site/
├── README.md
└── site/
    └── index.html

3. Relier GitHub à Cloudflare Pages

Dans votre compte Cloudflare, ouvrez Workers & Pages, créez une application, puis choisissez Pages et l’importation d’un dépôt Git existant.

Connectez GitHub, autorisez l’accès au dépôt concerné et sélectionnez mon-premier-site. L’intégration Git permet à Pages de déployer les modifications envoyées au dépôt. Source : connexion Git à Pages.

Pour notre exemple, utilisez ces réglages :

La commande exit 0 termine sans transformation : notre HTML est déjà prêt à être publié. Le dossier de sortie indique où se trouvent les fichiers à servir. Ici, il s’agit de site. Source : déployer du HTML statique.

Lancez le déploiement. Après sa réussite, Pages fournit une adresse sous le domaine pages.dev. Ouvrez-la et vérifiez que votre page apparaît.

4. Mettre le site à jour

Modifiez le texte de site/index.html sur GitHub et enregistrez la modification sur la branche de production. Pages déclenche automatiquement un nouveau déploiement.

Pour préparer une modification avant sa publication, vous pouvez utiliser une autre branche et ouvrir une pull request. Pages propose des adresses de prévisualisation pour examiner les changements. Source : fonctionnement de l’intégration Git.

5. Comprendre ce qui est gratuit

Cloudflare indique que les requêtes vers les fichiers statiques sont gratuites et illimitées lorsqu’elles n’invoquent pas de Functions. Les fonctions exécutées côté serveur relèvent des quotas et de la tarification Workers. Source : tarification Pages Functions.

L’offre gratuite comporte notamment ces limites :

Ces limites concernent la préparation et les fichiers du site : les 500 constructions mensuelles ne correspondent pas à 500 visites. Les conditions peuvent évoluer ; consultez la documentation des limites Pages avant un projet plus volumineux.

6. Ajouter un domaine personnel

Vous pouvez conserver l’adresse fournie par Pages ou associer un domaine que vous possédez. L’achat et le renouvellement de ce domaine restent un coût distinct de l’hébergement.

Dans le projet Pages, ouvrez Custom domains et ajoutez le domaine souhaité. Pour un domaine racine comme example.com, Cloudflare demande que ses serveurs de noms soient utilisés. Pour un sous-domaine comme www.example.com, un enregistrement CNAME chez un autre fournisseur DNS est possible.

Associez d’abord le domaine dans Pages avant de configurer ce CNAME. Source : domaines personnalisés.

7. Vérifier le résultat

Après le premier déploiement, contrôlez l’affichage sur ordinateur et téléphone. Après une modification, attendez la réussite du nouveau déploiement et vérifiez que le texte mis à jour apparaît.

Si la page d’accueil renvoie une erreur 404, vérifiez que le dossier publié contient directement index.html. Dans notre exemple, le dossier de sortie doit être site, car il contient ce fichier. Source : dépannage du déploiement HTML.