Comment héberger un site statique gratuitement en 2026 : GitHub Pages, Cloudflare Pages et formulaires de contact

Choisir la bonne plateforme d'hébergement de site statique peut te faire économiser des centaines d'euros par an, tout en gardant ton site rapide, sécurisé et facile à maintenir. Les offres gratuites ont beaucoup mûri ces dernières années, et des plateformes comme GitHub Pages et Cloudflare Pages proposent une infrastructure prête pour la production à coût zéro. Mais il y a un défi que la plupart des tutoriels ignorent : comment gérer les formulaires de contact sur un site statique quand il n'y a aucun serveur pour les traiter ? Ce guide te présente l'intégralité du processus, du choix de la plateforme à la mise en place d'un formulaire de contact fonctionnel, avec des exemples concrets et les vraies limites à connaître avant de te lancer.

Pourquoi l'hébergement statique gratuit mérite ton attention

Un site statique sert des fichiers HTML, CSS et JavaScript pré-générés directement au navigateur. Pas de PHP, pas de runtime Node.js, pas de requête en base de données à chaque chargement de page. C'est précisément cette simplicité qui rend l'hébergement de pages statiques gratuites si fiable : il n'y a rien qui peut planter, rien à patcher, rien à scaler.

Pour les petites entreprises, les portfolios, les landing pages SaaS et les sites de documentation, l'hébergement statique coche toutes les cases :

• Vitesse : Les fichiers sont servis depuis un noeud edge CDN, souvent en moins de 100 ms partout dans le monde.
• Sécurité : L'absence de runtime côté serveur réduit drastiquement la surface d'attaque.
• Coût : GitHub Pages et Cloudflare Pages sont gratuits pour les projets publics et de nombreux projets privés.
• Simplicité : Tu pousses ton code dans un dépôt, et le site se déploie automatiquement.

La seule vraie contrainte, c'est la fonctionnalité dynamique. Tout ce qui nécessite de la logique côté serveur - comme l'authentification des utilisateurs, un panier d'achat ou le traitement de formulaires - a besoin d'un service externe. Garde ça en tête pendant qu'on parcourt les étapes de configuration.

Comparatif des plateformes : GitHub Pages vs Cloudflare Pages

En résumé : Si ton audience est mondiale et que tu veux les temps de chargement les plus rapides possible, Cloudflare Pages l'emporte. Si ton équipe vit déjà dans GitHub et que tu veux la configuration la plus simple possible, GitHub Pages fait très bien l'affaire.

Déployer sur GitHub Pages étape par étape

Cet exemple suppose que tu as un site HTML/CSS simple prêt à publier. Si tu utilises un générateur de site statique comme Hugo ou Jekyll, le processus est quasiment identique.

1. Crée un dépôt GitHub. Va sur github.com/new et crée un dépôt public. Nomme-le your-username.github.io si tu veux qu'il soit servi à la racine du domaine, ou n'importe quel autre nom si tu veux qu'il soit accessible depuis un sous-répertoire.
2. Pousse les fichiers de ton site. Depuis le dossier de ton projet en local, exécute :

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. Active GitHub Pages. Dans le dépôt, va dans Paramètres > Pages. Sous "Source", sélectionne la branche main et le dossier /root (ou /docs si ton build y génère les fichiers). Clique sur Enregistrer.
4. Attends le déploiement. GitHub va builder et déployer en 1 à 3 minutes. Tu verras l'URL en ligne (par ex. https://your-username.github.io) apparaître dans le panneau des paramètres Pages.
5. Connecte un domaine personnalisé (optionnel). Ajoute un fichier CNAME à la racine de ton dépôt contenant ton nom de domaine (par ex. www.yoursite.com). Ensuite, mets à jour ton fournisseur DNS pour faire pointer un enregistrement CNAME vers your-username.github.io. GitHub provisionnera automatiquement un certificat SSL en quelques minutes.

Déployer sur Cloudflare Pages étape par étape

1. Inscris-toi ou connecte-toi à Cloudflare. Rends-toi sur pages.cloudflare.com et connecte ton compte GitHub ou GitLab.
2. Crée un nouveau projet. Clique sur "Créer un projet", puis sur "Se connecter à Git". Sélectionne ton dépôt dans la liste.
3. Configure les paramètres de build. Si ton site est en HTML pur, laisse la commande de build vide et définis le répertoire de sortie sur / ou là où se trouve ton index.html. Pour Hugo, définis la commande de build sur hugo et la sortie sur public. Pour Jekyll, utilise jekyll build et la sortie sur _site.
4. Déploie. Clique sur "Enregistrer et déployer". Cloudflare va cloner ton dépôt, exécuter le build et publier sur son réseau edge mondial. Ton site obtient immédiatement un sous-domaine *.pages.dev.
5. Ajoute un domaine personnalisé. Dans le tableau de bord de ton projet, va dans "Domaines personnalisés" et saisis ton domaine. Si ton domaine est déjà géré par Cloudflare DNS, la configuration se fait en un clic. Sinon, tu devras ajouter un enregistrement CNAME chez ton registrar pointant vers ton adresse *.pages.dev.

Chaque git push ultérieur sur ta branche principale déclenche un redéploiement automatique. Cloudflare crée aussi des déploiements de prévisualisation pour les pull requests, ce qui est pratique pour vérifier les changements avant qu'ils passent en production.

Ajouter un formulaire de contact à ton site statique

C'est là que la plupart des guides s'arrêtent, et là où la plupart des gens se retrouvent bloqués. Un formulaire de contact sur un site statique ne peut pas soumettre des données à lui-même - il n'y a aucun serveur en écoute. Tu as trois options réalistes :

• Un service de backend de formulaire (recommandé) : tu fais pointer l'attribut action de ton formulaire vers un endpoint tiers qui reçoit la soumission, la valide et te l'envoie par email.
• Une fonction serverless : tu écris une petite fonction (Cloudflare Workers, AWS Lambda) qui traite le formulaire. Ça fonctionne, mais ça demande du code et une maintenance continue.
• JavaScript fetch() : tu utilises l'API fetch du navigateur pour envoyer les données du formulaire vers un endpoint backend. Consulte notre guide sur comment envoyer des données de formulaire HTML avec JavaScript fetch() pour les détails techniques.

Le chemin le plus rapide vers un formulaire fonctionnel est un service de formulaire dédié. Voici un exemple concret avec Sendform :

Exemple concret : un formulaire de contact opérationnel en 5 minutes

Avant d'ajouter du code à ton site, tu dois créer un compte Sendform et configurer un endpoint de formulaire. Le processus prend environ deux minutes :

1. Inscris-toi sur Sendform.net. Crée un compte gratuit - aucune carte bancaire requise. Après l'inscription, tu auras un projet par défaut prêt à l'emploi.
2. Crée un formulaire. Dans ton tableau de bord, clique sur "Nouveau formulaire". Donne-lui un nom, sélectionne un projet et saisis l'adresse email où tu veux recevoir les soumissions. Sendform vérifiera cette adresse avant d'activer l'endpoint.
3. Copie l'URL de ton endpoint. Une fois le formulaire créé, tu verras une URL d'endpoint unique au format https://sendform.net/!your-form-id. Copie-la - c'est ce que tu vas coller dans ton HTML.

Une fois ton endpoint en main, ajoute le HTML suivant à ton site statique :

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

Remplace your-form-id par l'identifiant affiché dans ton tableau de bord Sendform. Chaque soumission est alors envoyée par email à l'adresse que tu as confirmée lors de la configuration. Pas de code backend, pas de serveur, pas de facture d'infrastructure mensuelle. Pour des patterns UX plus avancés, notamment les pages de redirection après soumission et les emails de confirmation, consulte notre guide sur les meilleures pratiques pour les formulaires de sites statiques.

Si tu utilises un constructeur de site en parallèle de ton site statique, nous détaillons aussi le processus d'intégration dans notre article sur comment intégrer Sendform avec ton constructeur de site.

Les erreurs courantes à éviter

Après avoir aidé des milliers d'utilisateurs à configurer un hébergement statique gratuit, voici les erreurs qui causent le plus de frustration :

1. Oublier la page 404

GitHub Pages et Cloudflare Pages afficheront une page d'erreur générique si une route n'est pas trouvée. Crée un fichier 404.html personnalisé dans ton répertoire racine. Ça garde les utilisateurs sur ton site et préserve leur expérience.

2. Committer des secrets dans un dépôt public

Les clés API, les secrets d'endpoint de formulaire et les adresses email ne doivent jamais se retrouver dans un dépôt GitHub public. Utilise des variables d'environnement dans Cloudflare Pages, ou référence un fichier de configuration privé listé dans .gitignore.

3. Construire un formulaire sans plan de backend

C'est l'erreur la plus fréquente. Les développeurs créent un superbe formulaire de contact, poussent sur GitHub Pages, et découvrent le jour du lancement que le formulaire échoue silencieusement. Décide de ton backend de formulaire avant d'écrire la moindre balise <input>. Des outils comme Sendform te permettent de configurer un formulaire de contact qui envoie directement par email sans aucun code, ce qui élimine complètement le problème de backend.

4. Ignorer les problèmes de cache de build

Si ton site ne se met pas à jour après un push, le cache CDN sert peut-être des fichiers obsolètes. Cloudflare Pages purge automatiquement son cache au déploiement. GitHub Pages est plus lent à propager les changements ; attends jusqu'à 10 minutes, ou ajoute un paramètre de requête à tes URLs d'assets pendant les tests.

5. Utiliser des chemins relatifs incorrectement

Si ton site GitHub Pages est hébergé à username.github.io/project-name/ (un sous-répertoire), tous les chemins d'assets doivent tenir compte de ce préfixe. Un lien vers /styles.css sera cassé. Utilise des chemins relatifs (./styles.css) ou configure le paramètre baseURL de ton générateur de site statique pour correspondre au sous-répertoire.

6. Négliger l'automatisation des workflows de formulaire

Une fois que ton formulaire collecte des soumissions, tu peux faire bien plus que simplement recevoir des emails. Sendform supporte les webhooks et des intégrations qui te permettent de router automatiquement les soumissions vers Slack, un CRM ou un tableur. Notre guide sur l'automatisation des workflows de formulaires avec des webhooks et des APIs te montre exactement comment configurer ça sans écrire de code backend.

Conclusion

L'hébergement de sites statiques gratuit n'a jamais été aussi performant. GitHub Pages convient aux équipes déjà ancrées dans l'écosystème GitHub, tandis que Cloudflare Pages offre de meilleures performances mondiales et une offre gratuite plus généreuse. Le vrai défi n'est pas l'hébergement en lui-même - ce sont les fonctionnalités dynamiques, notamment les formulaires de contact, qui posent problème. En combinant l'une ou l'autre de ces plateformes avec un service de formulaire dédié, tu obtiens un site web professionnel et entièrement fonctionnel à coût d'infrastructure zéro. Commence par l'un des guides de plateforme ci-dessus, mets ton site en ligne, puis connecte ton formulaire de contact avec Sendform pour gérer les soumissions de manière fiable dès le premier jour.

Ajoute un formulaire de contact à ton site statique en quelques minutes

Utilise Sendform pour collecter les soumissions de formulaires depuis n'importe quel site statique hébergé sur GitHub Pages ou Cloudflare Pages. Pas de code backend, pas de configuration serveur, pas de prise de tête. Fais simplement pointer l'attribut action de ton formulaire vers ton endpoint et c'est tout.

Commence gratuitement sur Sendform.net →

Questions fréquemment posées