Introduction

Enfin ! Vous avez dans vos mains votre super site web statique tout neuf mais se pose la question de comment le mettre en ligne en 2018 où la sécurité n'est plus une option. Il existe bon nombre de sociétés d'hébergement qui propose ce service pour quelques euros/dollars par mois. Mais si vous aimez vous mouiller les mains, je vous propose de voir comment vous pouvez avoir un hébergement gratuit, efficace et sécurisé en HTTPS pour nada ! Pour l'anecdote, mon site est hébergé comme cela depuis maintenant 2 ans et fontionne à merveille :)

Qu'est ce qu'un site statique ?

Un site web statique consiste à un ensemble de fichiers HTML, CSS et Javascript mais ne nécessite pas de serveurs ni de base de données pour fonctionner. Contrairement à des sites dynamiques qui changent de contenus en fonction de l'utilisateur (comme Twitter ou LinkedIn), les sites statiques affichent la même information pour tout le monde.

Parlons un peu des solutions présentées dans la suite de l'article.

GitHub, comme solution d'hébergement

Comme son petit nom ne l'indique pas, GitHub est un plateforme de gestion de version, mais pas que. Il permet de travailler à plusieurs sur la même base de code mais aussi d'héberger du contenu et des pages web pour un large spectre de sites statiques personnels ou profesionnels. GitHub présente sa solution d'hébergement ainsi : GitHub Pages is a static site hosting service. It is designed to host your personal, organization, or project pages directly from a GitHub repository.

Cloudflare, sécurisez votre site web

Il y a plusieurs raisons d'utiliser Cloudflare : Il posssède un simple gestionnaire de DNS et est orienté HTTPS-first. Par défaut, il optimise automatiquement les fichiers statiques et offre une mise à l'échelle pour lutter contrôle les ruptures de service. Enfin il dispose d'un plan de facturation gratuit, what else ?

Ce qu'il vous faut pour bien démarrer

Avant de commencer, assurrez vous de disposer :

• D'un répertoire GitHub (soit votreusername.github.io soit sur une branche gh-pages d'un de vos répertoire). Cela génèrera une url avec la structure https://votreusername.github.io.
• D'un compte Cloudflare
• D'un nom de domaine réservé (le mien est chez OVH).

Step 1 : Déployez votre site statique sur GitHub

La première étape, indispensable et logique :), est de déposer votre code source du site statique sur votre répertoire GitHub.

Step 2 : Ajoutez votre nom de domaine dans la configuration du répertoire GitHub

Dans l'interface de GitHub, selectionnez l'option Settings dans la barre de navigation du répertoire. Naviguez jusqu'à la rubrique GitHub Pages et ajoutez votre nom de domaine dans le champ Custom domain. Sauvegardez pour prendre en compte la modification.

Step 3 : Configurez votre nom de domaine sur Cloudflare

Connectez vous sur Cloudflare et ajoutez un nouveau domaine afin de scanner les enregistrements DNS. Cloudflare configure par défaut les types d'enregistrement A et CNAME.

Les enregistrements A et CNAME sont deux manières communes de faire le lien entre un nom de domaine et une ou plusieurs adresses IP.

L'enregistrement A font le lien entre un nom et une adresse IP spécifique. Dans notre cas, notre domaine pointe sur le serveur 192.30.252.153.

Lors de cette étape, nous configurons deux enregistrements DNS de type A : c'est indispensable pour bien faire communiquer Cloudflare avec GitHub.

L'enregistrement CNAME lui fait le lien entre deux noms, en lieu et place d'adresse IP. Le nom à la source est un alias vers le nom clible. Dans notre cas, nous utilisons notre répertoire GitHub et mettons en place un CNAME d'alias www vers votreusername.github.io.

Maintenant, toutes les requêtes de votredomaine.com seront redirigés vers votre site statique hébergé sur GitHub.

Step 4 : Sélectionnez une offre Cloudflare

Enfin, dernière étape de la configuration Cloudflare, vous devez sélectionner une offre commerciale, je vous conseille l'offre gratuite qui couvre la prise en charge du SSL et un haut niveau de disponibilité. Libre à vous de souscrire à une autre offre, mais je ne vais pas me fourvoyer dans cette article! On a dit un hébergement sécurisé pour 0€ ! ;)

Step 5 : Mise à jour des noms de serveurs chez votre hébergeur de domaine

Copiez les noms des serveurs de Cloudflare et remplacez les noms existants dans l'interface d'administration de votre hébergeur de domaine.

Pour illustrer cet article, je me suis connecté sur ma fenêtre d'administration OVH en lien avec mon site maximegris.fr et j'y ai remplacé les anciennes entrées par celles de Cloudflare.

Une fois toute cette configuration en place, il faut quelques heures à Cloudflare pour que les modifications DNS soient prises en compte. L'état d'avancement peut être suivi dans le premier onglet de l'interface de Cloudflare. (quand c'est vert c'est prêt!)

Step 7 : C'est en place !

Votre site web sécurisé est en place. Vous pouvez en personnaliser le contenu en modifiant le code sur le repertoire GitHub, les changements apparaitront directement sur votre site web votredomaine.com

Ce type d'hébergement convient parfaitement pour 80% des usages : sites vitrines, sites personnels mais aussi sites professionnels. Moyennant d'essayer de comprendre comment tout cela fonctionne :)

Si vous avez besoin de contenus dynamiques ou de formulaires, il vous faudra mettre en place un serveur et une base de données. Ou alors vous orienter vers un architecture dite Serverless et utiliser la puissance d'une service comme Firebase de Google. On en reparle dans un futur article ! ;)