La stack technique du blog

Comme il est d'usage quand on monte un blog qui parle un peu de tech, l'un des premiers sujets abordés est la stack de ce même blog. Et pour le coup je n'échappe pas à la règle 😀

J'ai assez vite pensé à le développer "à la main". Mais bon, le développement web n'est pas vraiment ma spécialité, et comme je voulais monter avant tout un truc propre, ben j'ai eu un gros doute sur le chemin à prendre 🤔. J'ai longtemps réfléchi à savoir sur quoi j'allais baser ce blog, et j'ai creusé pas mal de pistes. Pour finalement choisir une solution à laquelle je n'avais jamais pensé au départ !

Détaillons un peu...

La méthode Wordpress, évidente mais overkill

https://www.webdschool.com/images/thumbs/wordpress.jpg

Worpress est souvent LA solution à laquelle on pense quand on souhaite monter un blog. Pour ceux d'entre vous qui ne le saurez pas, Wordpress est un CMS (Content Management System), c'est à dire que c'est un programme qui vous permet de monter un site internet orienté contenu (comme un blog, un forum, une galerie photo...) sans pour autant avoir besoin de toucher à une seule ligne de code. Wordpress vient avec interface d'administration et autres interfaces de publication en mode WYSIWYG qui facilitent pas mal la vie des moins aguerris (et des autres d'ailleurs). 

Les chiffres parlent d'eux-mêmes : plus d'un site sur trois est construit sur ce système, et si on ne considère que les CMS, il représente un peu moins de deux tiers des sites 😝. Simple de prime abord, il s'adresse aussi bien à ceux qui n'ont pas de bagage technique (quasiment tous les hébergeurs proposent Wordpress sur étagère) qu'aux publics plus avertis qui en connaissent la versatilité et les possibilités d'extensions.

Mais bon Wordpress c'est lourd, il faut un serveur PHP en dessous + une base de donnée + un reverse proxy... Et j'étais pas vraiment fan de faire tourner un VPS en permanence pour un projet aussi simple. J'avais dans l'idée de rester le plus simple possible, au moins dans un premier temps. L'idée d'un blog est de publier du contenu, donc restons concentrés sur le contenu. Less is more comme dirait l'autre.

La méthode Flask, la plus sexy mais la moins réaliste

Flask logo.svg

 

Flask pour le coup est bien différent. C'est un framework web orienté backend, écrit en Python 😍. Le framework n'embarque que le strict minimum pour faire fonctionner un site mais, il peut néanmoins être "pimpé" avec tout un tas de librairies externes. J'ai eu l'occasion de passer un peu de temps dessus sur un autre projet perso et j'ai beaucoup apprécié jouer avec. Bon par contre se lancer là-dessus ça signifiait fournir un travail bien plus long que pour un Wordpress :

  • développer intégralement la logique du blog (avec l'aide de ce super tuto malheureusement un peu vieillissant)
  • passer du temps à bouffer du front (structure des pages + CSS pour rendre tout ce beau monde agréable à la vue, ou au moins essayer 😅)
  • préparer une machine virtuelle pour accueillir l'application (serveur WSGI, reverse proxy, let's encrypt...) / la packager dans une image docker
  • la déployer sur le serveur/orchestrateur 

Bon je dis ça mais on croise des gens qui développent leur propre framework HTTP pour servir leur blog ! 😲

Du coup j'était très emballé par cette option, mais au vu de ma faculté à me concentrer sur un seul projet à la fois, j'aurais publié le premier post en décembre 2025. Et puis on retombait sur les mêmes problématiques que Wordpress, à savoir beaucoup de bruit pour (presque) rien.

La méthode Blogger

Blogger – Logos Download

Naaaaaan je déconne !

La méthode "static site generator", on se rapproche

   

Bon du coup on est pas loin de la solution que j'ai opté pour ce blog. Juste avant de développer un peu le sujet, prenons 5 minutes pour comprendre ce qui sépare le "statique" du "dynamique".

Y en a un qui bouge et pas l'autre !

Et ben c'est presque ça... 

La genèse du web a été écrite par un chercheur Britannique répondant au nom de Tim Berners-Lee. Le fait qu'il soit chercheur a ici son importance car le web à tout d'abord été conçu comme un moyen de fluidifier les échanges d'information entre les universités du monde entier (attention je parle bien ici du web et non de l'internet). Le tout premier site web est d'ailleurs toujours accessible. Nulle question alors d'y écouter de la musique, regarder des vidéos ou encore de discuter en direct avec ses semblables. Le web était concentré sur le contenu textuel uniquement (ça a pas mal bougé depuis).

Sur un site statique, le contenu est peu amené à évoluer et surtout, c'est le même pour tout le monde. Quand vous requêtez un site statique, un serveur web vous renvoi du contenu (HTML, CSS, Javascript) tel quel, sans le manipuler. En revanche, sur un site dynamique, la requête est interprétée par un logiciel côté serveur qui peut renvoyer un contenu qui sera différent en fonction d'un contexte. Il peut également modifier une entrée dans une base de données par exemple (quand vous changez votre mail sur Twitter ou que vous publiez un nouvel article dans votre Wordpress). 

Bon quand on a dit ça, on a pas dit grand-chose. Alors pourquoi je tiens tant à parler des sites statiques ? D'une part parce que ça revient à la mode, mais à mon avis pour plusieurs bonnes raisons :

  1. Sécurité : plus c'est simple, moins y a de risque de se faire pirater
  2. Rapide : à la fois pour l'utilisateur (c'est léger) que pour la maintenance du site
  3. Pas cher : Ça prend peu de place et nul besoin de backend ou de base de données

Évidemment ça impose tout un tas de limitations (qu'il est possible de palier par des services externes) mais pour un simple blog, ces limitations sont acceptables.

Pendant longtemps, les sites statiques restaient assez long à mettre sur pied car il fallait maîtriser l'art complexe du HTML, du CSS et du javascript. Avec l'apparition des générateurs de sites statiques (comme Jekyll, Hugo ou encore Gatsby), il est maintenant beaucoup plus simple de créer son site.

On peut donc construire un site web, parfois assez complexe, en utilisant la logique que l'on trouve dans les sites dynamiques (variables, templates, boucles...) mais une seule fois : à la génération du site. Une fois le site créé, plus de logique plus de templating, il ne reste que le contenu.

De plus, ces générateurs de sites statiques embarquent généralement des modèles de thèmes, une arborescence prédéfinie et tout un tas de fonctionnalités qui permettent une création rapide du site. Le seul défaut que je leur trouve : une complexité parfois inutile et la difficulté de gérer le contenu média (allez intégrer une image à la bonne taille dans un fichier markdown, ça devient vite un casse-tête).

 

La méthode Publii, le meilleur des deux mondes

On en arrive, après 5 bonnes minutes de lecture, à la solution retenue pour ce blog. L'intro est certes un peu longue, j'espère ne pas en avoir perdu trop en route 😉.

Publii se présente comme "CMS local de sites statiques". En gros: c'est un logiciel que vous faites tourner sur votre PC et qui contient tout le nécessaire pour facilement monter votre blog sans trop de prise de tête. Le logiciel est open source, et ça c'était très important pour moi.

J'ai pas encore complètement creusé le truc, et je sens qu'il va me falloir un moment pour complètement maîtriser l’outil, mais de prime abord c'est plutôt pas mal.

J'ai eu peur en découvrant l'outil que ce soit trop "simple" et pas assez personnalisable / souple et que je m'en lasserais assez vite. Mais j'ai assez vite balayé cette idée, d'une part parce que je vais essayer de ne pas passer des jours entiers sur  de la custo, et également parce que j'ai été pas mal rassuré par leur doc :

Designed with the simplicity for beginners to use, but boasting extensive options and functionalities that allow experienced web developers to make more complex modifications, Publii creates a safe, fast static website without all the hassle.

 Cooooooool !

Cerise sur le gâteau, l'ensemble du blog tient aujourd'hui dans 5 petits MB (dont 4MB de photos). C'est pas beau ça ? Bon OK, y a 2 articles à tout péter mais ça reste une belle prestation. Et en plus l'interface est plutôt sexy, jugez plutôt :

On a donc là le meilleur des 2 mondes, mais comment gérer l'hébergement ?

Je loue depuis des années un serveur (au début un VPS que j'ai échangé il y a 2 ans par une machine physique) sur lequel j'héberge tout à tas de services persos et qui me sers pour des petites expériences. Ça aurait été plutôt simple de caler un NGINX devant et roulez jeunesse. Et ben ouai mais non. J'ai pas eu envie de mélanger mes services persos et du contenu public sur la même machine, donc j'ai cherché une autre solution.

Je ne sais pas si vous connaissez le podcast Message à caractère informatique ? Ce podcast est produit par l'équipe qui est derrière clever cloud, une plateforme PaaS qui peut s'apparenter à Heroku. Ce podcast est vraiment génial (je ne peux que vous le conseiller) et par curiosité je suis allé voir s'il n'y avait pas une solution de leur côté.

Bingo !

Clever a une solution de stockage type S3 (stockage objet initialement créé par AWS) qui permet justement d'héberger un site statique. Je sais pas encore tellement comment ça fonctionne sous le capot mais en tout cas ça marche. La mise en prod n'a jamais été aussi facile :

rclone sync ~/projects/blog/ irbiis_blog:blog.irbiis.net --progress --s3-acl=public-read

Et voilà, on est en ligne ! 

Bon le résultat est pas encore parfait, j'ai déjà envie de rajouter tout un tas de fonctionnalités et de customiser le bouzin mais on va faire un pas à la fois 😋!