Refonte du blog

18 août 2014

Ca faisait un moment que j'envisageais du changement sur le blog, j'ai profité des congés d'été pour concrétiser tout ça! Les raisons étaient multiples, mais pour le principal :

  • Changement de moteur : j'ai suivi une des tendances du moment : plutôt que d'utiliser des languages dynamiques, comme PHP par exemple, pour gérer son blog, revenir aux fondamentaux, à savoir générer un site statique. Pour un petit blog cela permet :
    • de mettre les sources du blog sous contrôle de version
    • d'être compatible avec 100% des hébergeurs, les prérequis sont quasi nuls
    • une fois le commit effectué, de publiers via un simple git push par exemple
    • d'accroitre la sécurité du serveur (on retire tout ce qui est lié au language dynamique)
  • Refonte de l'interface graphique : Pour la v2, j'avais intégralement fait le design moi même, et je dois dire que ce n'est pas ma tasse de thé. En plus le site était lisible sur un téléphone, mais pas confortable, le premier objectif était donc d'avoir un site web adaptatif (responsive en anglais) qui se lirait aussi bien sur un pc que sur un téléphone / une tablette.

Pour l'instant je vais surtout décrire la démarche, sans entrer dans les détails techniques, j'approfondirai certains points plus tard.

Changement de moteur

Après avoir fait le tour des solutions existantes, j'ai choisi Pelican, un générateur de site statique en python. Difficile de donner une raison précise, quand on compare la liste des candidats, chacun a ses avantages et inconvénients, la plupart utilisent des langages/technos que je ne connais que de nom (nodejs, ruby, python souvent). Je me suis donc arrêté sur pelican qui dispose de toutes les fonctionnalités que je cherchais et d'une communauté active.

La seule partie qui peut être problématique sur un blog statique, ce sont les commentaires, mais ce n'était pas vraiment un problème pour moi étant donné que déjà sur la v2 j'utilisais Disqus. Mon objectif plus tard est d'ailleurs de migrer sur une solution similaire mais hébergée par moi même.

La migration de dotclear vers pelican s'est bien passée grace à l'outil fourni qui a relativement bien fait son travail (il m'a quand même fallu reprendre à la main tous les articles, heuresement il n'y en a pas beaucoup, et les modifications requises étaient mineures).

J'ai désormais toutes les sources du blog dans un dépôt git, qui contient aussi bien les articles (au format markdown) que la configuration et le thème.

Refonte de l'interface graphique

En plus du confort de lecture sur les petits écrans dont je parlais plus haut un autre point m'a poussé à refaire le design (parce que j'aurai pu réutiliser l'ancien en l'adaptant simplement à pelican) : les images.

Sur la v2 j'avais mis en place un petit effet de bordure sur les images, et pour faire plus clean, j'avais défini une largeur d'image pour que tout soit à la même taille, aligné avec le texte.

Sur le moment ça m'avait parru être une bonne idée.

En pratique, je me retrouve avec des screenshots fortements liés à l'ancien thème (alors que le même efet était faisable en css, et bien sûr je n'ai pas gardé les originaux...), et souvent la largeur était trop petite le contenu ne tenait pas, je devais rogner.

Responsive design

Je voulais donc partir sur un design "responsive", et après avoir fait un petit tour ce qui existait, j'avais choisi Bootstrap, le framework de twitter. Sauf que voilà je ne suis pas web designer, et j'ai très vite laissé tomber pour partir sur un template tout fait, qu'il ne me resterait plus qu'à adapter à Pelican et personnaliser un peu.

Mon choix s'est donc porté sur Tales, un thème responsive basé sur un autre sujet à la mode en ce moment : le flat design.

Au final le design est peut être un peu commun par rapport à ce que l'on trouve aujourd'hui un peu partout mais il me plait bien (et encore que j'ai bien défiguré le thème de base pour y intégrer tout ce que je voulais).

Changement de machine

Après avoir été hébergé quelques temps sur un vps chez OVH, la v2 avait finalement fini sur mon serveur à la maison. Ce n'était pas idéal étant donné que ma connexion laisse quelque peu à désirer.

J'ai donc fait l'aquisition d'une Kimsufi KS-1 (ce qui demande beaucoup de patience, la plupart des modèles sont constamment en cours de réapprovisionnement) qui est devenu mon nouveau "joujou".

Niveau OS, je suis passé de Debian à Ubuntu. Je suis longtemps resté sous Debian et j'appréciais la distribution, mais je me suis souvent retrouvé limité par les versions des paquets trop anciennes. Du coup j'ai donné sa chance à Ubuntu, étant donné qu'il est basé sur Debian je n'ai pas trop été dépaysé.

Ensuite j'ai trouvé un autre "joujou" : Docker. C'est une solution de virtualisation assez récente qui dispose de fonctionnalités asez sympa.

D'après Wikipedia :

Docker est un outil qui peut empaqueter une application et ses dépendances dans un conteneur virtuel, qui pourra être exécuté sur n'importe quel serveur Linux

Dans la pratique, mon utilisation est un peu différente. Sur l'hôte Ubuntu de la kimsufi il y a très peu de choses installées : la distrib de base d'Ovh, fail2ban, git et docker. Tous les autres services/appli tournent sous forme de conteneurs docker.

Pour chaque service j'ai créé un dépôt git qui contient le Dockerfile (fichier qui décrit la création d'un image docker) et les fichiers nécessaires (config ou script de démarrage principalement).

Liste des dépôts

De cette manière, je peux disposer à tout moment de n'importe quel service, pré-configuré à ma manière, dans un environnement défini et ce sur n'importe quelle machine (pour peu que ladite machine puisse faire tourner Docker), voire même faire tourner plusieurs fois le même service sur la même machine.

~ $ docker ps
CONTAINER ID        IMAGE               COMMAND                CREATED             STATUS              PORTS                                                          NAMES
062fb221b77d        nginx:latest        nginx                  7 days ago          Up 6 days           0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp                       nginx                     
49569b2984c5        php:latest          php5-fpm -R            7 days ago          Up 7 days           9000/tcp                                                       nginx/php,php             
496397d7ab60        syncthing:latest    /usr/bin/supervisord   2 weeks ago         Up 7 days           8080/tcp, 0.0.0.0:21025->21025/udp, 0.0.0.0:22000->22000/tcp   nginx/syncthing,syncthing 
ab19a89458e4        kiwiirc:latest      /home/fabien/KiwiIRC   2 weeks ago         Up 7 days           7778/tcp, 0.0.0.0:113->113/tcp                                 kiwiirc,nginx/irc

J'ai par exemple un conteneur pelican que j'utilise pour "compiler" le blog, et un conteneur nginx pour le mettre en ligne. Le jour ou je veux changer de fonctionnement, je n'ai qu'à supprimer le/les conteneur(s) dont je n'ai plus besoin, et en mettre de nouveaux en place.

Historique du blog

Pour marquer le coup, voici un petit historique des différentes versions du blog.

Version 1

Blog V1

La première version, hébergée sur les pages persos de free et tournais sur Dotclear (désolé pour la qualité du screenshot, mais je n'ai aucun moyen d'en faire à ce jour donc il faudra se contenter d'une image provenant d'un cache sur le net).

J'ai fait le choix de ne pas conserver les messages lorsque je suis passé à la v2 pour prendre un nouveau départ. Choix que je regrette aujourd'hui même si la plupart des articles qu'il contenait ne sont plus d'actualité depuis longtemps.

Version 2

Blog V2

La deuxième version, hébergée dans un premier temps sur un vps mais rapidement rapatriée sur mon serveur à la maison. Les articles ont cette fois été conservés (tous les articles précédents celui-ci).