La Filacroche

Artiste O'Fil & Serial Plieuse

Mon blog devient statique, salut à toi le Pelican !

Générateur Pelican lancé dans le terminal Tilix

L’idée de passer mon blog sur un système statique est venue doucement. Ça a commencé lorsque j’ai cherché à me renseigner sur les générateurs de sites statiques pour un autre projet.
L’idée était séduisante, petit à petit elle s’est accrochée dans mon esprit aussi fermement qu’une moule sur un rocher.

Quelques semaines plus tard j’approfondissais les recherches pour choisir deux ou trois spécimens de générateurs à essayer… et voilà : trop tard, le doigt était pris dans l’engrenage.

Pourquoi un blog statique ?

L’appât de légèreté, de souplesse. Mais surtout le fait que ça colle parfaitement avec ma façon actuelle d’écrire et publier sur ce blog.

Je préfère préparer mes bafouilles hors ligne avec un simple éditeur de texte plutôt que connectée au cms (Dotclear) via un navigateur internet. Du coup je ne me connectais pas plus de 5 minutes, juste le temps de copier mon texte et de charger les images associées. Pour faire ça, la voie FTP est tout aussi efficace.

Nota : notons tout de même que la solution blog statique ne conviendra pas à tout le monde, malgré tous les avantages - et ils sont nombreux - ça me semble quand même être un truc réservé aux geeks et autres amoureux de la bidouille dans l’ordinateur.

Pourquoi Pelican ?

Est arrivé le moment de choisir un générateur de site statique. Il en existe tellement que le choix est difficile (une liste ici).

J’avais les exigences suivantes :

  • 📖️ que ce soit bien documenté.

De la bonne doc, claire et détaillée, tenue à jour au fil des évolutions du générateur et que je comprenne suffisamment pour pouvoir me débrouiller seule avec.

  • 🤯️ pouvoir importer le contenu de mon blog Dotclear (articles et images) sans trop de gymnastique.

Accessoirement pouvoir garder les mêmes urls et les mêmes chemins pour les images serait appréciable, ceci afin d’éviter la case redirection 301 pour ne pas casser les liens qui pointent vers mon blog ni pourrir le référencement acquit.

  • 🐍️ de préférence codé en python.

Parce que je commence à savoir faire deux trois trucs en langage python, que ça m’amuse et que ça me ferai peut-être progresser un peu.
Et puis ça fait un filtre de plus pour ne pas me noyer dans l’immense réservoir de générateurs de sites statiques.
En sus python permet de bosser sous environnement virtuel aussi facilement que d’enfiler une paire de chaussettes, et ça, c’est cool.

Je pourrai ajouter "pouvoir écrire mes articles en Markdown" mais il semble que tous le permettent.

En plus de répondre à mes exigences, Pelican est un générateur éprouvé, il évolue régulièrement et, le plus important, il me plaît.

Installation de Pelican

J’ai préféré faire une installation avec pip dans un environnement virtuel Python plutôt que d’installer le paquet fourni par Debian (le système d’exploitation de mon ordinateur).
Si besoin c’est hyper simple de déplacer "tout mon bazar de blog" sur un ordi de secours et d’avoir les choses opérationnelles en un rien de temps dans les mêmes versions.

L’installation se fait très rapidement et très facilement : y’a qu’à suivre les instructions de la documentation de Pelican.

Récupération des articles de mon Dotclear

Là encore, on applique les instructions de la documentation et… ça presque marche 😅️.

Je ne sais pas si ça vient du format XHTML de mes billets Dotclear, des résidus du passage Wordpress vers Dotclear, de Pandoc, du fichier à plat Dotclear, d’un peu tout ça, de moi ou d’autre chose mais il y a eu des ratés à la conversion en Markdown, principalement avec les insertions d’images et les sauts de lignes.
Aussi les urls ont été formées à partir du titre des billets… ce qui n’était pas toujours juste.

Ce n’est pas grave puisque j’avais de toutes façons prévu de repasser sur chaque article pour vérifier que tout soit en ordre, ça a juste pris un peu plus de temps que prévu.
En passant, je n’ai pas résisté à recadrer et / ou retoucher quelques vielles photos qui en avaient bigrement besoin… pour certaines, il faudrait que je les refasse. J’ai également supprimé sur quelques articles des liens vers d’autres sites qui ne menaient plus nulle part pour cause de page ou site supprimé depuis.

Paramétrages

Pelican c’est puissant, Pelican c’est magique : quelques lignes dans le fichier de configuration et voilà, le format de mes urls est adapté pour être comme je le souhaite.

# range les articles dans un répertoire nommé post
ARTICLE_URL = 'post/{slug}.html'
ARTICLE_SAVE_AS = 'post/{slug}.html'

Dans Dotclear mes images - ainsi que mes tutos en pdf - se trouvaient dans le répertoire /public ; il me suffit donc de le copier tel quel dans /content pour que ce soit restitué dans /output lors de la génération du blog et conserver les chemins existants, ni vu ni connu.

Les articles avaient une url de type monblog.tld/post/machin-titre. Avec les réglages ci-dessus, ce chemin est conservé. Il ne reste plus qu’à ajouter une règle de ré-écriture dans le .htaccess pour rediriger mes anciennes urls sans l’extension .html vers celles avec - c’est à la mode d’ôter les extensions mais j’ai préféré les garder.

# ajout du .html si manquant
# ne pas oublier d’activer le mod_rewrite d’Apache (RewriteEngine on) si pas fait
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.+)$ $1\.html [R=301,L]

Concernant les urls des catégories et des tags, les nouvelles diffèrent un peu suite au remaniement. Quelques redirections de plus dans le .htaccess pour les plus importantes afin de limiter la casse du SEO. Je n’ai pas redirigé les "/page/2" et autres "/truc/page/2" qui deviennent des "/index2.html" et "/truc2.html". Pour moi les urls importantes sont surtout celles des articles, images et documents pdf ; ces urls là sont sauves = tout va bien !

Les plugins

Côté plugins j’ai ajouté Neighbors pour permettre la navigation vers l’article précédant ou suivant + Sitemap qui génère un sitemap.xml pour faciliter l’indexation du blog par les moteurs de recherches.

Création du thème

N’ayant pas eu de coup de cœur pour un des thèmes concoctés par la communauté j’ai construit le mien.

Je suis partie des templates du thème par défaut de Pelican et les ai modifiés à ma convenance.
Pour la feuille de styles je me suis basée sur knacss pour avoir un "reset" et une base de travail propre même si j’ai supprimé plein de trucs inutiles à mes besoins.

J’ai eu envie de simplicité : une seule colonne, un menu basique où on ne risque pas de se perdre et un pied de page qui sert de second menu.

La petite largeur de colonne est un choix fait après une bête constatation : la mode est au "mobile first" (affichage optimisé pour écran de smartphone), quelques-uns des sites que je lis ont ainsi réduit récemment la largeur de leurs pages, y compris lorsqu’on les affiche sur un grand écran. Force est de constater qu’il est plus confortable de lire un texte avec une largeur réduite ; les yeux ont moins de distance à parcourir.

La palette de couleurs

Mon rose principal est devenu un peu plus rouge, comme une pivoine framboise - il se décline tout de même dans des harmonies plus pâles - et se marie avec des tons de gris, un bleu-vert et quelques couleurs joyeuses qui passaient par là.

La palette de couleurs de mon thème

La coloration syntaxique.

Pelican utilise Pygments, les thèmes disponibles ne m’ont pas franchement tapé dans l’œil… du coup j’ai regardé comment ils sont construits pour faire à ma sauce mes couleurs.

Ensuite il n’y a plus qu’à ajouter ça dans la feuille de styles pour n’en avoir qu’une.

L’accessibilité

Par le passé plusieurs personnes m’ont écrit car elles ne trouvaient pas comment télécharger mes tutoriels. La première fois je me suis dit que c’était probablement quelqu’un peu à l’aise avec l’outil informatique… la troisième fois j’ai pensé qu’il y avait un souci avec mes liens.
C’est ainsi que j’ai découvert les bonnes pratiques de l’accessibilité web.

J’ai donc essayé d’améliorer mes façons de faire ; par exemple j’avais la mauvaise habitude de souligner des titres ou des portions de texte qui n’étaient pas des liens. J’avais aussi des tutos téléchargeables en cliquant sur une photo (pas bien) et d’autres qu’il fallait aller chercher tout en bas de l’article (en annexe) ce qui n’est pas évident pour tout le monde.
Mes bafouilles ont été corrigées en conséquence, plus de souligné ailleurs que sur les liens et des liens de téléchargement plus explicites.

J’ai également accordé une attention particulière à la lisibilité du texte par rapport à sa couleur et à la couleur sur laquelle il se trouve. J’ai utilisé Harvey pour m’assister dans cette tâche. Harvey permet de vérifier le contraste entre 2 couleurs utilisées pour un texte et son fond selon les normes du Web Content Accessibility Guidelines.

Il reste sûrement des choses à améliorer mais c’est déjà un peu de fait.

La recherche disparue 🕵️

Même si il est possible de mettre en place une fonction de recherche sur un site statique (par exemple avec Tipue Search pour Pelican), j’ai préféré multiplier les étiquettes (#tags).

Cette décision peut sembler paradoxale alors que je viens tout juste de parler d’accessibilité mais :

  • je n’ai pas envie d’utiliser Tipue Search car ça implique de charger du code supplémentaire (Java Script - en plus il aurait fallu faire des modifications dans le plugin pour que le js soit chargé depuis mon site au lieu d’un service externe).
  • je ne souhaite pas non plus intégrer les service tiers d’un moteur de recherche.

Il y a donc désormais 39 tags (seulement 18 avant) et la liste de ces tags est accessible directement depuis le menu. Cette profusion de tags permet de naviguer et trouver plus précisément les articles sur un thème donné.

Pour une recherche par titre d’article il y a la page d’archives, le lien se trouve en bas du site. Les archives seront probablement remaniées en vue de les améliorer lorsque l’envie de le faire me prendra.

Police d’écriture

Au départ j’ai tenté de revenir à l’utilisation de polices standard, les plus couramment présentes sur les terminaux des lecteurs étant spécifiées dans Knacss. Cela a l’avantage de faire un truc de moins à télécharger par le navigateur et donc de gagner en temps de chargement.
Sauf que ça ne me plaisait pas d’avoir des rendus d’affichages différents selon le système d’exploitation ; la graisse des polices est vraiment trop variable, l’une paraît énorme, l’autre trop fine. Je suis donc revenu à une police embarquée.

Je ne voulais pas réutiliser la police Lato présente sur l’ancienne version du blog. Je l’aime beaucoup mais lui reproche de masquer le point de la lettre i lorsqu’elle est précédée d’un f - une ligature que je n’apprécie pas.

Illustration du fi avec la police Lato

En cherchant la nouvelle police de mes rêves, j’ai eu un coup de cœur pour PT Root UI.

Cette police est bien sûr servie directement depuis le serveur du blog, comme l’était Lato, et non depuis un service tiers.

Responsiv-ité 🖥️ 💻️ 📱️

Alors là j’ai simplifié au max !
Ni Bootstrap, ni Grilles, juste du @media querry de CSS3 basique pour l’affichage des menus en liste ou en ligne selon la taille de l’écran et, bien sûr, l’indispensable Viewport de HTML5.

Et aussi…

Nouveau logo :
J’ai eu envie d’un logo / avatar plus rigolo pour ce blog, façon chibi, toujours chevauchant un crochet et tenant un carré de papier à la main. Je l’ai dessiné avec Inkscape, comme mes précédant logos.


Bye bye mes émoticônes personnalisées :
Pour rappel j’avais dessiné des émoticônes perso. J’ai finalement cédé aux sirènes licornes 🦄️ des émojis, la quantité d’icônes disponibles étant quand même sacrément tentante 🤤️.


Webp est dans la place :
WEBP est un format d’image développé par Google. Grosso-modo, il permet d’obtenir des images plus légères qu’avec le format JPG ou PNG pour une qualité égale.
Les tests que j’ai fait sur mes photos sont concluants : selon les photos j’obtiens une image de 20 à 50% plus légère. Qui dit image plus légère dit chargement plus rapide dans le navigateur.

Aujourd’hui, presque tous les navigateurs internet récents sont capables d’afficher le format d’image Webp. Il serait donc dommage de s’en priver.
Navigateurs compatibles.

Cependant, pour ne pas pénaliser les lecteurs du blog qui utilisent un navigateur incompatible, mes images restent disponibles au format Jpg habituel ; d’ailleurs je n’ai pas converti mes anciennes images Jpg en Webp : je préfère enregistrer mes photos sous les deux formats au moment de leur traitement avec Gimp (diverses améliorations, recadrage, redimensionnement, ajout de texte ou dessins…) afin de maîtriser totalement le rendu final.
Pour servir du Webp ou du Jpg selon ce que le navigateur sait lire, il suffit d’avoir mon-image.jpg + mon-image.jpg.webp et de quelques lignes dans le fichier .htaccess pour indiquer au serveur Apache quel fichier envoyer. La solution est expliquée chez Buzut. Dans mon .htacess ça donne ça :

<IfModule mod_headers.c>
# préciser que les fichiers .webp ont pour type MIME image/webp
<Files *.webp>
    Header set Vary "Accept-Encoding";
    AddType "image/webp" .webp
    AddEncoding webp .webp
</Files>
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine on
# si les navigateurs précisent supporter webp
# si l'équivalent du fichier existe en webp, on le sert à la place
RewriteCond %{HTTP:Accept} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.*)$ $1.webp [L]
</IfModule>

Nota : concernant les images au format Png, j’obtiens de meilleurs résultats avec Pngng-s9 qu’avec Webp.


Partage en vue :
Il est prévu de mettre une adaptation de mon thème à la disposition de tous - avec une palette de couleur différente. Pour cela je dois d’abord modifier quelques trucs, par exemple la partie menu qui est prévue pour mon usage spécifique (3 catégories + 1 lien vers les tags) ou encore le footer qui est fait pour afficher 1 unique lien social, ajouter le support multi-langage, etc…

J’envisage de proposer plusieurs jeux de couleurs et de mettre un site de démonstration en ligne qui servira aussi de documentation pour le thème - en français et en anglais. C’est quelque chose qui va m’amuser 🕹️ mais que je ferai sur mon temps libre, autrement dit ça verra le jour quand ce sera prêt… pas avant 5 ou 6 mois je pense, peut-être plus.