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. En 2026, les offres gratuites ont bien mûri, 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 tout le processus de configuration, du choix de la plateforme jusqu'à 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é-construits 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 justement cette simplicité qui rend l'hébergement de pages statiques gratuites si fiable : il n'y a rien qui peut planter, nécessiter un patch ou poser des problèmes de scalabilité.

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

• Rapidité : Les fichiers sont servis depuis un nœud CDN edge, 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 vraie contrainte, c'est les fonctionnalités dynamiques. Tout ce qui nécessite une logique côté serveur - authentification des utilisateurs, panier d'achat, traitement de formulaires - demande un service externe. Garde ça en tête au fil des étapes qui suivent.

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 travaille déjà sur GitHub et que tu veux la configuration la plus simple, 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. Rends-toi 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 au domaine racine, ou donne-lui n'importe quel autre nom si tu veux qu'il soit accessible depuis un sous-répertoire.
2. Pousse tes fichiers. Depuis le dossier local de ton projet, exécute :
   Copier

   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. L'URL publique (par exemple https://your-username.github.io) apparaîtra dans le panneau des paramètres Pages.
5. Connecte un domaine personnalisé (facultatif). Ajoute un fichier CNAME à la racine de ton dépôt contenant ton nom de domaine (par exemple www.tonsite.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 "Connecter à Git". Sélectionne ton dépôt dans la liste.
3. Configure les paramètres de build. Si ton site est en HTML simple, 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, utilise la commande hugo avec le répertoire de sortie public. Pour Jekyll, utilise jekyll build avec le répertoire de sortie _site.
4. Déploie. Clique sur "Enregistrer et déployer". Cloudflare va cloner ton dépôt, lancer 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 sur ta branche principale déclenchera un redéploiement automatique. Cloudflare crée également des déploiements de prévisualisation pour les pull requests, ce qui est très pratique pour vérifier les modifications avant qu'elles ne soient mises en ligne.

Ajouter un formulaire de contact à ton site statique

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

• Un service 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 e-mail.
• 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 les données d'un formulaire HTML avec JavaScript fetch() pour les détails techniques.

La solution la plus rapide pour avoir un formulaire fonctionnel, c'est un service dédié. Voici un exemple concret avec Sendform :

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

Imaginons que tu as un site portfolio déployé sur GitHub Pages. Tu veux que les visiteurs puissent t'envoyer un message, et que ces messages arrivent directement dans ta boîte mail. Voici le HTML complet :

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">Ton nom</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Ton e-mail</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">Envoyer le message</button>
</form>

C'est toute l'intégration. Tu remplaces YOUR_FORM_ID par l'identifiant disponible dans ton tableau de bord Sendform, et chaque soumission est envoyée par e-mail à l'adresse avec laquelle tu t'es inscrit. 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 e-mails de confirmation, consulte notre guide sur les bonnes pratiques pour les formulaires de sites statiques.

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

Les erreurs courantes à éviter

Après avoir accompagné des milliers d'utilisateurs dans la mise en place de leur 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é à la racine de ton répertoire. Ça garde les utilisateurs sur ton site et préserve l'expérience de ta marque.

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

Les clés API, les secrets d'endpoint de formulaire et les adresses e-mail 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. Créer un formulaire sans plan backend

C'est l'erreur la plus fréquente. Les développeurs créent un beau formulaire de contact, le 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 e-mail sans aucun code, ce qui élimine complètement le problème 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 à chaque déploiement. GitHub Pages propage les changements plus lentement ; 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 qu'il corresponde 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 recevoir des e-mails. Sendform supporte les webhooks et des intégrations qui te permettent d'acheminer 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 tout ça sans écrire de code backend.

Conclusion

L'hébergement de sites statiques gratuits 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 via 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 de serveur, sans prise de tête. Il suffit de faire pointer l'attribut action de ton formulaire vers ton endpoint et c'est tout.

Commence gratuitement sur Sendform.net →

Questions fréquentes