☁️ Déploiement Cloudflare Pages

Council 10 en ligne en 15 minutes — gratuit à vie, le plus rapide au monde

💰 100% GRATUIT ⚡ CDN 8500 VILLES 🌍 BANDE PASSANTE ILLIMITÉE 🔒 HTTPS AUTOMATIQUE

🤔 Pourquoi Cloudflare Pages plutôt qu'un autre ?

Cloudflare possède le réseau CDN le plus rapide au monde. Quand un utilisateur en Espagne ouvre votre app, elle est servie depuis Madrid. À Tokyo, depuis Tokyo. À Paris, depuis Paris. Résultat : chargement quasi-instantané partout sur la planète. Et c'est gratuit pour toujours pour les sites statiques.

✅ Pas de carte bancaire nécessaire

✅ Pas de limite de bande passante

✅ Datacenters en France aussi

✅ Domaine custom gratuit (avec votre .fr)

✅ Analytics intégrés gratuits

✅ Protection DDoS gratuite

📋 Avant de commencer — prérequis

⏱️ 5 MINUTES 👍 SIMPLE

Ce dont vous avez besoin

Une adresse email valide (la même que celle utilisée pour votre activité, idéalement sarl.csenergies@gmail.com)
Le dossier "a determine future" avec tous vos fichiers Council 10 (vous l'avez déjà sur votre ordinateur)
Un navigateur (Chrome, Edge, Firefox ou Safari récent)
15 minutes de calme sans interruption (faites-le à la pause déjeuner par exemple)

💡 Astuce : Faites-le sur ordinateur, pas sur téléphone. C'est plus simple pour l'upload des fichiers.

🚀 Étape 1 — Créer votre compte Cloudflare gratuit

⏱️ 3 MINUTES 👍 SIMPLE

Inscription au service

Ouvrez votre navigateur et allez sur dash.cloudflare.com/sign-up
Saisissez votre email (ex : sarl.csenergies@gmail.com)
Choisissez un mot de passe fort (au moins 8 caractères, mélangez majuscules, chiffres, symboles). Notez-le quelque part.
Cliquez sur "Sign Up" (= S'inscrire). En français, l'interface n'existe pas, c'est en anglais.
Cloudflare vous envoie un email de vérification. Allez dans votre boîte mail, cliquez sur le lien dans l'email "Verify your email".
Vous arrivez sur le tableau de bord Cloudflare. Vous êtes connecté.

Vous arrivez sur une page avec écrit "Welcome to Cloudflare!" et plusieurs grandes cartes proposant les services. Pas de panique, on ignore tout sauf une seule chose : le menu de gauche, on cherche "Workers & Pages".

⚠️ Attention : Cloudflare propose plein de services payants (Workers, R2, AI...). Pour l'instant, vous n'avez besoin QUE de "Pages" qui est 100% gratuit. Ne cliquez sur rien d'autre.

📦 Étape 2 — Créer votre projet Pages

⏱️ 3 MINUTES 👍 SIMPLE

Initialiser le projet vide

Dans le menu de gauche, cliquez sur "Workers & Pages"
Cliquez sur le bouton "Create application" en haut à droite
Vous voyez 2 onglets en haut : "Workers" et "Pages". Cliquez sur "Pages" (le 2ème onglet).
Sur la page Pages, vous avez 2 options : "Connect to Git" et "Upload assets". Choisissez "Upload assets" (le plus simple, pas besoin de Git).
Saisissez un nom de projet : par exemple council10 ou council-10. Évitez les majuscules et les caractères spéciaux. Ce nom apparaîtra dans votre URL : council10.pages.dev
Cliquez sur "Create project"

💡 Astuce : Le nom du projet est permanent. Choisissez-le bien. Par exemple council10 donnera https://council10.pages.dev qui est court et facile à retenir.

📤 Étape 3 — Uploader vos fichiers Council 10

⏱️ 4 MINUTES 👍 SIMPLE

Drag-and-drop du dossier complet

Voici le moment crucial : vous allez glisser-déposer votre dossier "a determine future" sur Cloudflare.

Sur la nouvelle page, vous voyez une zone "Drop your files here or click to browse"
Ouvrez le Finder (Mac) ou l'Explorateur (Windows), allez dans votre dossier "Documents/Claude/Projects/a determine future"
Sélectionnez tous les fichiers dans ce dossier (Ctrl+A sur Windows, Cmd+A sur Mac). Vous devez voir environ 20 fichiers sélectionnés.
Glissez-déposez ces fichiers dans la zone Cloudflare. Une barre de progression apparaît.
Attendez la fin de l'upload (quelques secondes). Cloudflare affiche la liste des fichiers chargés.
Cliquez sur "Deploy site" en bas

⚠️ Important : Glissez les fichiers, pas le dossier lui-même. Si vous glissez le dossier, Cloudflare créera un sous-répertoire et votre URL deviendra council10.pages.dev/a-determine-future/Council10_App.html au lieu de council10.pages.dev/Council10_App.html. Sélectionnez TOUT à l'intérieur du dossier (Cmd+A ou Ctrl+A) puis glissez.

💡 Astuce : Si vous voulez que l'app s'ouvre directement sans passer par le dashboard, renommez avant l'upload Council10_App.html en index.html. Mais attention, ça remplace le dashboard actuel. Solution propre : laissez les noms tels quels et utilisez l'URL council10.pages.dev/Council10_App.html.

✅ Étape 4 — Premier déploiement et test

⏱️ 2 MINUTES 👍 SIMPLE

Récupérer votre URL et tester

Cloudflare construit votre site. Une page de progression apparaît avec écrit "Building..." puis "Deploying..."
Au bout de 30-60 secondes, vous voyez écrit "Success! Your project is deployed" avec votre URL en grand
Votre URL ressemble à : https://council10.pages.dev (ou ce que vous avez choisi à l'étape 2)
Cliquez sur cette URL — votre app Council 10 s'ouvre dans un nouvel onglet
Testez immédiatement : ouvrez la même URL sur votre téléphone, vérifiez que le bouton "Installer l'app" apparaît

🎉 Si vous voyez votre app fonctionner : bravo, vous venez de mettre Council 10 en ligne pour le monde entier. Cette URL est désormais publique et partageable.

Vous voyez maintenant le tableau de bord Council 10 (le fichier index.html) avec les cartes des différents documents. Si vous voulez aller directement à l'app, ajoutez /Council10_App.html à votre URL.

🌐 Étape 5 — (Optionnel) Domaine personnalisé council10.fr

⏱️ 15 MINUTES + 12€/AN ⚠️ MOYEN

Connecter votre propre nom de domaine

Pour passer de council10.pages.dev à council10.fr, il faut acheter le domaine puis le connecter à Cloudflare.

Allez sur OVH.com ou Gandi.net. Recherchez le domaine council10.fr (ou autre nom disponible)
Achetez-le (~12€/an chez OVH, ~14€ chez Gandi). Renseignez vos informations CSR Energies / Holding C-R-Y-S
Une fois acheté, retournez sur Cloudflare. Dans votre projet Pages, allez dans l'onglet "Custom domains"
Cliquez sur "Set up a custom domain"
Saisissez votre domaine (council10.fr) et cliquez "Continue"
Cloudflare vous donne 2 ou 3 enregistrements DNS (CNAME ou A) à ajouter chez votre registrar (OVH/Gandi)
Allez dans votre compte OVH/Gandi → DNS → ajoutez ces enregistrements (copier-coller exact)
Attendez 5 à 30 minutes la propagation DNS
Revenez sur Cloudflare, votre domaine s'affiche en "Active" avec une coche verte
Tapez council10.fr dans votre navigateur — votre app s'ouvre. HTTPS automatiquement actif.

💡 Astuce : Si vous n'êtes pas à l'aise avec les DNS, ouvrez un ticket de support OVH (gratuit), expliquez "Je veux pointer mon domaine vers Cloudflare Pages", ils vous aident en 24h.

⚠️ Attention RGPD : Cloudflare Pages héberge en USA par défaut. Si vous voulez l'argument "données 100% France" pour vos clients, gardez une URL council10.pages.dev mais hébergez sur OVH plutôt (vous perdrez la performance Cloudflare mais gagnerez la souveraineté).

🛡️ Étape 6 — Sécurité de base

⏱️ 5 MINUTES 👍 SIMPLE

Activer les protections gratuites

Dans votre projet Pages → "Settings" → "General" → vérifiez que "HTTPS Redirect" est activé (par défaut oui)
Toujours dans Settings → "Functions" → laissez désactivé (vous n'en avez pas besoin pour l'instant)
Optionnel : créez un fichier _headers à la racine de votre dossier pour ajouter des headers de sécurité avant de re-uploader. Mettez-y :

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: geolocation=(), microphone=()

💡 Astuce : Cloudflare offre par défaut une protection DDoS de niveau entreprise gratuitement. Si demain quelqu'un essaie de faire tomber votre app avec 100 000 requêtes par seconde, Cloudflare bloque automatiquement. Vous n'avez rien à configurer.

📊 Étape 7 — Activer Analytics gratuit

⏱️ 2 MINUTES 👍 SIMPLE

Mesurer vos visiteurs sans cookies

Dans votre projet Pages → cliquez sur l'onglet "Analytics"
Cliquez sur "Enable Web Analytics"
Cloudflare vous donne un petit script JavaScript à ajouter dans votre HTML
Copiez ce script (1 ligne)
Ouvrez votre fichier Council10_App.html en local
Collez le script juste avant la balise </body> à la fin du fichier
Re-uploadez le fichier modifié sur Cloudflare (étape 3 mais juste ce fichier)
Attendez 24h, vous verrez vos visiteurs en temps réel

✅ Cloudflare Web Analytics est unique : pas de cookies, pas de tracking publicitaire, pas de validation RGPD requise. Conformité native. Vous voyez les visiteurs uniques, les pages vues, les sources de trafic, les pays — sans dépendre de Google Analytics.

🔄 Étape 8 — Mettre à jour votre app plus tard

⏱️ 2 MINUTES À CHAQUE FOIS 👍 SIMPLE

Re-déployer après modification

Quand vous modifierez votre app (ajout d'agents, correction de bug, etc.), voici comment la mettre à jour :

Allez dans votre projet Pages → "Deployments"
Cliquez sur "Create deployment"
Choisissez à nouveau "Upload assets"
Glissez le ou les fichiers modifiés (par exemple uniquement Council10_App.html si c'est le seul que vous avez changé)
Cliquez sur "Save and Deploy"
En 30 secondes, vos visiteurs ont la nouvelle version

💡 Astuce avancée : Si vous voulez automatiser, connectez votre projet à GitHub. Chaque modification que vous pushez déclenche un déploiement automatique. Demandez à un développeur de vous aider, c'est 30 minutes de setup.

✅ Checklist post-déploiement

Vérifiez ces 8 points dans l'heure suivant le déploiement

L'URL council10.pages.dev charge correctement la page d'accueil

L'URL council10.pages.dev/Council10_App.html ouvre l'application

Sur smartphone Android, le bouton "Installer l'app" apparaît

Sur iPhone Safari, vous pouvez ajouter à l'écran d'accueil

Les icônes (icon-192.png, apple-touch-icon.png) chargent correctement

Le QR code que vous avez généré pointe bien vers votre nouvelle URL

Vous avez testé en mode incognito (pour vérifier que ça marche pour quelqu'un qui découvre)

Vous avez envoyé l'URL à 1 personne de confiance pour qu'elle teste

❓ Foire aux questions

À vie. Cloudflare Pages est un service gratuit illimité pour les sites statiques. Il n'y a pas de période d'essai. Vous pouvez l'utiliser pendant 10 ans sans payer un euro.

La bande passante est illimitée. Vraiment. Vous pouvez avoir 100 000 visiteurs par jour, c'est gratuit. La seule limite payante est le nombre de "requests" Pages Functions (10 000/jour gratuit) — mais vous n'utilisez pas ces fonctions pour le moment.

D'accord avec vous pour les comptes Premium. Achetez le domaine council10.fr chez OVH (~12€/an) et suivez l'étape 5 du guide. En 15 minutes, vous avez votre URL pro. Pour la Phase 0 de validation gratuite, council10.pages.dev fait largement le job — c'est un sous-domaine de Cloudflare, c'est techniquement crédible.

Pour l'instant, l'app stocke tout en localStorage (sur l'appareil de chaque utilisateur). Aucune donnée n'est envoyée à Cloudflare ni à personne. Cloudflare ne fait qu'héberger les fichiers HTML/CSS/JS. Quand vous passerez en V1 avec un backend (Supabase, Firebase), il faudra réfléchir à l'hébergement européen pour le RGPD.

Cloudflare gère 20% du trafic Internet mondial, ils ne disparaîtront pas. Si vous voulez vous prémunir, gardez une copie de votre dossier "a determine future" sur votre ordinateur (vous l'avez déjà). En cas de problème, vous pouvez ré-uploader sur Vercel/Netlify en 5 minutes.

Allez dans votre projet Pages → "Settings" → tout en bas de la page → bouton "Delete project". Confirmez. Tout est supprimé. Vous pouvez réinstaller un autre projet avec le même nom plus tard.

Oui, illimité. Si demain vous lancez un autre projet, créez juste un nouveau projet Pages dans le même compte Cloudflare. Vous pouvez héberger 100 projets différents gratuitement.

Oui, grâce au Service Worker que nous avons implémenté. Une fois que l'utilisateur a chargé l'app une première fois (et qu'il l'a installée sur son téléphone), elle marche même sans connexion. C'est un avantage clé d'une PWA.

⚡ C'est parti

Total : 15 minutes de votre temps · 0 € de coût · 1 URL publique partageable au monde entier.

→ Démarrer sur Cloudflare

Une fois fait, revenez générer votre QR code avec votre vraie URL.