heymath < Blog />

Héberger son site statique simplement et gratuitement

Publié le

Hey!

Avant de transformer mon site en blog tech, j’utilisais un repo public heymath.github.io en tant que GitHub Page pour héberger une simple page index.html gratuitement, avec une redirection DNS pour utiliser mon nom nom de domaine mathieudutto.fr. J’avais juste à git push pour que la modification du site soit en ligne dans la minute.

Puis j’ai fait ce blog avec Gatsby et je voulais juste avoir un premier résultat rapidement en ligne, alors j’ai gardé ce système de GitHub Page parce que c’est simple et c’est gratuit.

La méthode “crassou”

Je me retrouve donc avec un nouveau repo qui contient le code plus le contenu du blog, et l’ancien repo qui contient le build, c’est-à-dire le site statique. Pour faire une modification en ligne, je dois build le blog en local depuis le nouveau repo, supprimer le contenu de l’ancien repo, copier le build et le coller dans l’ancien repo. Enfin, je commit, je push et c’est en ligne.

Ça a l’avantage d’être c’est très simple comme procédé et surtout, ça me permet de rester concentré sur mon objectif : tester Gatsby et rédiger un premier article. Résultat, en un week-end j’ai un nouveau site et mon premier article en ligne, je suis content d’avoir livré rapidement en production.

Mais clairement, c’est pas ouf, je sais que ça va me saouler, je vais devoir changer ce processus bientôt. Et il y a quelque chose qui m’énerve depuis longtemps, c’est que mon site est en http. J’ai mon nom de domaine chez OVH d’un côté et un repo GitHub public de l’autre, impossible de configurer un certificat SSL pour passer mon site en https.

Testons une solution

Trois jours plus tard, je jette un premier coup d’œil aux solutions. Ça fait un moment que je vois des tweets passer, louant les mérites des solutions comme Netlify, à quel point c’est simple, à quel point c’est rapide, bref à quel point c’est la vie.

offre gratuite

Mono repo et déploiement continu

Je vais donc sur Netlify, je m’inscris en 2 secondes avec le GitHub connect. Ensuite je connecte Netlify à mon compte GitHub et que je sélectionne un repo, je choisis le nouveau repo avec les sources du blog. Je n’ai qu'à cliquer sur “Deploy site” (ça m’affiche un formulaire pour renseigner la commande à lancer et le dossier qui contiendra le build, mais tout est pré-rempli).

configuration des paramètres de build

1 minute plus tard, le build est fini et le site est en ligne sur une url qui ressemble à des-mots-aleatoires-123.netlify.app, c’est pas sexy comme url, mais ça fonctionne ! En 5 clics, je me suis retrouvé avec un seul repo à maintenir et du déploiement continu, plus de tâche manuelle, plus de copié/collé “crassou” !

contextes de déploiements

Domaine personnalisé

Netlify me propose de changer le sous-domaine des-mots-aleatoires-123, je teste heymath, c’est disponible ! OK, ça fait une url potable pour le blog si besoin. Encore mieux, je peux modifier la configuration pour utiliser un domaine personnalisé (comme avec ma GitHub Page). Je remplace les redirections DNS du domaine vers GitHub par les redirections vers Netlify. Et voilà c’est réglé, mon blog en production est passé de la GitHub Page à Netlify !

configuration des domaines

Certificat SSL/TLS

À ce moment-là, je suis déjà très content, j’ai amélioré mon process “crassou” en un rien de temps. Mais quand l’interface me propose d’activer le https sur le site avec renouvellement automatique de certificat chez Let’s Encrypt, là je suis très content. Et encore une fois, en un clic c’est plié, rien à configurer, pas de prise de tête.

configuration certificat SSL, site en https

Bien plus encore

Netlify propose d’autres fonctionnalités que je n’ai pas encore eu l’occasion de creuser ni tester, donc je ne vais pas approfondir, mais voici un aperçu :

Auto prévisualisation des branches et pull requests

auto prévisualisation des branches et pull requests

Formulaires

formulaires

Authentification

authentification

Fonctions

fonctions

Analytics

analytics

Media lourds

media lourds

Tests séparés (AB testing ?)

tests séparés

Conclusion

En quelques clics, je me suis retrouvé avec :

  • un seul repo qui contient juste les sources du blog
  • un déploiement à chaque push en moins d’une minute
  • un site accessible en https avec renouvellement automatique

Si on met de côté la durée de la propagation DNS qui m’a rendu fou, c’était d’une rapidité et d’une simplicité inattendue.

Tout est gratuit, il y a des options de configuration optionnelles, l’interface d’administration est simple, et il y a des fonctionnalités avancées payantes si besoin.

Le seul petit hic, c’est que l’offre pro me paraît assez cher, on passe directement de $0 à $50 par mois. Mais je ne pense clairement pas que j’en aurai besoin pour ce site.

Finalement, ça a tellement bien répondu à mon besoin, que je n’ai même pas tester ni chercher de solutions alternatives. Mais j’imagine qu’il y a d’autres plateformes qui sont aussi bien voire mieux, je jetterai peut-être un coup d’œil plus tard.


Mathieu Dutto / développeur frontend chez Evaneos. Je m’intéresse aux performances web et à la maintenabilité du code. Vous pouvez me retrouver sur Twitter et GitHub.

Mathieu Dutto © 2020, built with Gatsby