Bienvenue sur la nouvelle version du blog!

Introduction

Jusqu'à fin 2019, ce blog était basé sur Wordpress, et hébergé par Bluehost.

Il est à présent propulsé par django, avec wagtail comme système de gestion de contenu (CMS pour Content Management System). Et il tourne sur un PC chez moi.

C'est un gros changement, et j'y ai passé de nombreuses soirées, nuits, et week-ends.

Pourquoi ai-je pris la peine de faire tout ça ? Pour vous et aussi pour moi.

Tout d'abord, Wordpress est basé sur PHP. Déjà, j'avais quand même un petit peu honte d'écrire un blog sur python à partir d'une plateforme PHP. De plus, j'ai maintenant la possibilité de coder toutes les fonctionnalités facilement par moi-même, et tout en python. Alors que sur Wordpress, je devais faire appel à des plugins fournis par des inconnus. Je ne pouvais avoir confiance ni en leur vitesse, ni en leur sécurité.

Ensuite, Bluehost est lent. Il est vrai que cette entreprise a bonne réputation en tant qu'hébergeur sur le net, mais je suppose que ce n'est que pour des raisons historiques.

Enfin, éditer sur Wordpress est vraiment pénible. On perd son temps à cliquer partout et à se battre avec une interface d'un autre âge, et qui en plus laggue (sans doute à cause de Bluehost). Et, ne connaissant pas PHP, il m'était impossible de créer ou de modifier des articles à partir de programmes pour automatiser certaines tâches.

Dans cet article, je résume ce que j'ai fait, et je vous fournis quelques liens vers les excellentes documentations ou articles de blog que j'ai pu utiliser. Ceci n'est donc pas vraiment un tutorial. Mais si vous souhaitez mettre en place un blog similaire, vous saurez que vous pourrez trouver de l'aide ici.

Si vous êtes particulièrement intéressé par l'un des sujets décrits ci-dessous, n'hésitez pas à me laisser un commentaire en bas de la page, et j'écrirai un article spécifique à ce sujet.

Django et Wagtail

Django est un framework web basé sur python, rapide et sûr. Si vous connaissez déjà python, c'est sans doute la manière le plus simple de construire un site web dynamique.

Mais django n'est pas un CMS. Si vous voulez une interface web pour créer de nouvelles pages, ajouter des images, et écrire vos articles, vous aurez besoin de plus. Il y a plusieurs options sur le marché, comme django CMS ou mezzanine. Ce sont certainement d'excellentes solutions, mais j'ai décidé de partir sur wagtail, un outil plus moderne qui comprend une excellente interface pour la gestion du contenu, et offre plus de liberté dans la définition de la structure des documents.

Voici les ressources que j'ai utilisées pour apprendre django et wagtail:

• Getting started with django : les bases de django ;
• Wagtail tutorials : une excellente série de tutos par AccordBox. Là, vous apprendrez comment construire votre premier blog avec wagtail !
• Wagtail documentation : à utiliser comme référence, mais assez incomplète. Ne pas hésiter à aller voir le code de wagtail sur github en cas de besoin.

Après ces étapes initiales, j'avais un blog qui tourne.

Mais ce n'était en fait que le début... Ce que j'ai dû faire ensuite est couvert dans les sections suivantes:

• style
• internationalisation
• hébergement de fichiers media sur Amazon S3
• déploiement avec docker
• intégration des notebooks jupyter
• réseaux sociaux : boutons de partage pour facebook et twitter, commentaires, formulaire d'enregistrement pour la mailing list.
• importation automatique des articles existants depuis Wordpress

Un style efficace grâce à Bootstrap

Le style d'un site web moderne est défini dans des "Cascading Style Sheets" (CSS), qui permettent de définir globalement les propriétés de chaque élément du site. Par exemple, vous pouvez utiliser les CSS pour choisir une certaine fonte pour l'ensemble du texte, ou la couleur de tous les titres.

Le problème, c'est qu'écrire un jeu de CSS complet à partir de zéro peut être pénible. De plus, je ne suis pas web designer, et les styles qui me plaisent ne conviendront pas forcément au plus grand nombre. Enfin, je voulais que mon site soit responsif, pour un affichage de qualité sur ordinateur, tablette, ou smartphone.

Heureusement, bootstrap nous fournit un style agréable et portable.

En fait, il suffit de quelques lignes de code pour obtenir le style de ce blog.

Je l'aime bien comme ça, donc je suis resté très proche du style par défaut de bootstrap.

Si vous lisez cet article sur un ordinateur, vous pouvez essayer de réduire la taille de la fenêtre de votre navigateur, pour voir comment il répond. Comme vous pouvez le voir, ce site s'affichera également très bien sur un téléphone.

Internationalisation avec django

L'internationalisation (i18n pour i ... 18 lettres ... n) comprend la traduction et la localisation. Et la localisation veut dire qu'on s'adapte aux us et coutumes d'une partie du monde. Par exemple, aux États Unis, les gens écrivent 1 pm alors qu'en France, on écrira plutôt 13:00.

Pour ce site, j'ai décidé de ne pas faire de localisation, et de me contenter de la traduction.

La documentation de django pour la traduction est plutôt bien, donc vous pouvez simplement la suivre.

La seule chose un peu compliquée est la traduction des tags, que vous pouvez voir dans la boîte sur la droite (ou en bas de la page si vous utilisez un smartphone), et l'outil de choix du langage en haut de la page.

Pour ce blog, les tags sont implémentés grâce à django-taggit. J'ai passé plusieurs jours à essayer de traduire ces tags grâce à django et wagtail, mais il semble que l'utilisation de wagtail rende la traduction de ces tags impossible.

Au final, j'ai mis en place une solution simple:

• Lorsque je veux ajouter un tag anglais, je le préfixe par en_. Et pour les tags français j'utilise fr_. Les tags qui marchent dans les deux langues comme tensorflow n'ont pas de préfixe.
• Ensuite, en fonction du langage, serveur sélectionne les tags qui doivent être affichés.
• Dans le template html, j'utilise un filtre django pour enlever le préfixe avant l'affichage.

Fichiers media sur Amazon S3

Les fichiers medias sont les images ou les vidéos qui sont ajoutées au site web par l'interface de gestion du contenu (ici wagtail), comme l'image principale au début de cet article.

J'aurais pu héberger ces fichiers localement chez sur le PC qui fait tourner le serveur web.

Mais bientôt (du moins j'espère ;-) ), vous serez des milliers à accéder à ce site au même moment. Alors, les fichiers media satureront ma connexion montante.

J'ai donc décidé de stocker ces fichiers sur Amazon S3, qui est fiable, pas cher, et qui s'adaptera à la demande.

Si vous voulez savoir comment faire ça, vous pouvez jeter un oeil à la documentation officielle de wagail pour les fichiers media sur S3. Mais cette doc n'est clairement pas suffisante, et n'est même pas adaptée à la version la plus récente de l'interface web d'Amazon S3.

Si vous êtes bloqué, rendez vous sur ce guide ultime !

Deploiement du serveur web avec docker

Docker permet de virtualiser des applications et des services, en les faisant tourner dans des containers légers qui peuvent facilement être déplacés d'une machine physique à une autre. Si vous ne connaissez pas, vous pouvez l'essayer dans mon tuto Data pipeline with Docker, InfluxDB, and Grafana.

Pour ce site web, j'utilise deux containers, assemblés dans une stack docker :

• le serveur web
• la base de données postgreSQL

Le port du serveur de base de données ne peut être utilisé que par le serveur web dans la stack, et le serveur web se trouve derrière un reverse proxy nginx, qui fournit la connexion TLS grâce à un certificat Let's Encrypt.

Intégration des notebooks jupyter

C'est un sujet complexe, particulièrement important pour tout blog scientifique.

J'exporte les notebooks en html avec le template basic.

Ensuite, j'importe le fichier html résultant en tant que template django.Le style des notebooks est géré par un jeu spécifique de CSS.

J'utilise Pygments pour coloriser le code, et MathJax pour afficher les équations.

Réseaux sociaux : boutons de partage, commentaires, formulaire d'inscription

Les classes CSS pour les boutons de partage facebook et twitter viennent de bootstrap-social (je me suis contenté de téléchargerce ficher). The SVG images for the logos in the buttons have been taken from Simple Icons. Et j'ai récupéré les images SVG pour les logos dans les boutons sur Simple Icons.

Le bouton facebook utilise l'API javascript officielle, FB.ui. Le bouton twitter utilise simplement l'URL de partage de twitter.

La liste des souscripteurs est gérée par MailChimp, et le formulaire de souscription a été implémenté en Javascript avec Ajax.

Pour les commentaires, j'ai tout d'abord testé la solution la plus populaire, Disqus. Mais Disqus est lent, n'est pas fiable, et il vous traque. J'ai donc décidé de passer sur Commento. Avec Commento, vous payez ce que vous voulez, il n'y a pas de tracking, et deux lignes suffisent à le mettre en place.

Vous pouvez tester en bas de cette page!

Importation des articles depuis Wordpress

Avant de me lancer dans la migration de ce blog, mon souci principal était la récupération des posts existants.

En fait, ce fut relativement simple.

Dans Wordpress, j'ai utilisé la fonction d'export pour obtenir un fichier xml contenant tous les articles publiés sous forme de flux RSS.

Ensuite, j'ai traité ce flux grâce aux packages python feedparser et Beautiful Soup (bs4), et créé directement les posts wagtail depuis mon script python. Après l'importation, j'utilise un deuxième script pour remplacer tous les liens internes entre les différents posts, en utilisant à nouveau Beautiful Soup.

Conclusion

Vous avez eu un résumé rapide de tout ce que j'ai dû faire pour vous fournir cette nouvelle version du blog.

J'espère qu'elle vous plaît !

Et à nouveau, si vous voulez des détails sur certains des points abordés ci-dessus, il vous suffit de me le dire dans les commentaires.

À bientôt!