Initialisation du blog

cover

Pour m'introduire, je ne suis pas un ingénieur web et je déteste le développement. Il y a beaucoup trop de Framework dans la nature (ReactJS, Angular, jquery, ...). La programmation asynchrone de Javascript n'est pas triviale à mettre en place et maintenir à l'échelle d'un site web complet. Sans parler de la gestion de dépendances qui est la goute qui fait déborder le vase (oui je parle de toi npm). Je ne suis pas non plus un web designer donc le HTML/CSS et moi, nous ne sommes pas copains (principalement parce que je ne sais pas les utiliser à leurs plein potentiel).

C'est plus ou moins la raison pourquoi j'ai quitté le développement web et je suis devenu ingénieur SysOps.

Danger

Cet article de blog est déprécié. Je l'ai laissé en ligne pour des raisons historiques. Maintenant le blog est généré avec MKDocs.

Un peu de théorie

C'est un site static. Pas de code Javascript alambiqué, de framework et autres CMS. Toutes les pages et les medias sont distribués via un service d'hébergement web basique que je détaillerais dans un autre articles prochainement.

Comment il est généré ?

Je ne voulais pas trop me faire des noeuds au cerveau en construisant la structure du site (HTML & company) et je voulais pouvoir me concentrer uniquement sur le contenu de ce blog. J'ai donc cherché un outil pour générer de jolie site à partir de ficher texte.

Digression

Pas mal de monde connaissent déjà Jekyll. C'est un outil développé en Ruby qui fait le job. Il n'y a qu'à configurer deux/trois fichiers, écrire des articles au format texte, construire et ... voilà une super site internet. Mais retournement de situation ! Je n'ai pas utiliser Jekyll parce que de mon point de vu, l'outil n'est pas adapté à mes besoins. Vous vous demandez pourquoi ? Voilà donc :

  • Je n'y connais pas grand chose avec Ruby donc c'est plutôt difficile pour débugger
  • La gestion de dépendances de paquets Ruby sont une horreur
  • les plugins Jekyll sont (pour une majorité) développés par la communauté donc beaucoup d'entre eux sont incompatible les uns des autres, ont des bouts de documentation manquant ou alors ne fonctionne tout simplement pas.
  • J'ai déjà déployé un autre blog il y a quelques années avec Jekyll et je n'en ai pas un bon souvenir. Je le maintiens toujours, mais ce n'est pas trivial ...

Quel est la solution ?

J'utilise Pelican !

logo Pelican

C'est un outil tout simple de génération de site statique qui ne requiert que Python pour fonctionner. Il me permet d'écrire mon blog au format Markdown. Les fichiers HTML sont templaté via Jinja. Etant un ingénieur SysOps, Python, Markdown, Jinja sont, parmi tant d'autres, des mots clés qui me font plaisir ! (Il vient même avec un Makefile !!)

Donc Pelican est un outil de génération de site statique HTML via des fichiers Markdown et des templates Jinja.

Super ?! Quand est ce qu'on commence ?!

Mise en pratique

Je ne vais pas réinventer la roue, donc suivez le guide de démarrage rapide Pelican et revenez ici pour une description en profondeur de mon environnement pour ce blog.

Pré-requis

I have Python 3.9.6 installé sur mon PC et je fait tourner tout ça dans un VirtualEnv.

Création du VirtualEnv : 

python3 -m venv venv

Rentrer dedans : 

source venv/bin/activate

Installer les paquets requis : 

pip install "pelican[markdown]"

Structure des fichiers

Voilà l'organisation actuelle des mes dossiers/fichiers (PI c'est celui par défaut fourni par la configuration Pelican): 

.
├── Makefile
├── content
│   ├── articles
│   │   ├── init-en.md
│   │   └── init-fr.md
│   ├── images
│   │   └── logo.png
│   └── pages
├── output
├── pelicanconf.py
├── publishconf.py
├── tasks.py
└── theme
    └── flex

  • Le dossier content contient les articles, pages et medias rangés en trois dossiers :

    • articles pour les posts du blog
    • images pour les médias
    • pages pour les pages supplémentaires du blog

  • Le dossier output contient tous les fichiers statiques HTML and CSS générés après avoir buildé le site.

  • Le dossier theme contient le theme actuel du site. J'utilise actuellement le theme communautaire Flex.

  • Les fichiers Makefile et tasks.py sont auto-générés par Pelican lors de la création du projet avec le guide de démarrage rapide Pelican.

  • Le fichier pelicanconf.py contient les paramètres par défaut Pelican.

  • Et enfin publishconf.py contient les paramètres spécifiques Pelican utilisés lors de la publication du blog.

Configuration du blog

J'utilise la configuration par défaut fournie par le guide de démarrage rapide Pelican et ai juste ajouté deux ou trois paramètres additionnels.

Génération du blog

Maintenant que j'ai site complet, il faut que je le build.

Quand je développe pour ce blog (ou que j'écrit des articles), j'utilise la commande suivante : 

make devserver
Cela génère les pages du blog et les sert avec un petit serveur web local à l'adresse http://localhost:8000.

Une fois que je suis content de l'apparence du blog/articles, j'utilise la commande fournie pour générer une version publiable du site : 

make publish
Tous les fichiers du site se retrouvent générés dans le dossier output : 
output
├── 404.html
├── archives.html
├── authors.html
├── categories.html
├── drafts
│   ├── init-fr.html
│   └── init.html
├── images
│   ├── getpelican.jpg
│   ├── getpelican.png
│   └── logo.png
├── index.html
├── tags.html
└── theme
    └── ...

La différence majeur entre ces deux commandes et que publish utilise la configure publishconf.py et devserver utilise uniquement pelicanconf.py.

Conclusion

Maintenant que j'ai un environnement complet de build de mon blog et que j'ai besoin d'écrire un nouvel article, make publish et tada.

Dans un futur billet de blog, j'expliquerai comment j'héberge ces fichiers statiques pour les rendre accessibles sur internet.