Migration du site sous Drupal 8 et changement d'installation

Depuis octobre 2013, j'avais un site sous Drupal 7, faisant partie de l'installation multi-site Drupal pour les sites des associations de l'École Centrale Marseille (désignée par "assos" dans la suite de l'article). Il était accessible à l'adresse assos.centrale-marseille.fr/ftorregrosa.

Début février j'ai reçu un courriel m'indiquant que cette installation Drupal allait être prochainement fermée car les sites des associations étaient en train d'être refaits sous Wordpress.

Désormais, depuis 3 semaines, j'ai mis en ligne une nouvelle version sous Drupal 8, sur un serveur dédié et avec un nom de domaine dédié, florent-torregrosa.fr. J'ai commencé à préparer cette nouvelle version après le Drupalcamp Paris 2019 ayant eu lieu mi-février.

Voici un retour d'expérience de cette migration, les nouveautés apportés par Drupal 8, comment le contenu a été migré, etc.

Nouveautés et améliorations

Avec cette refonte, j'en ai profité pour repenser le design des pages et la manière de contribuer mes contenus.

Sous Drupal 7, j'utilisais le module Media, désormais dans le noyau Drupal 8, mais sans utiliser l'insertion dans le texte riche pour privilégier l'utilisation de champ, mais d'un autre côté je regrettais que mes articles n'est pas plus d'images insérées au milieu du texte là où cela est pertinent.

Je n'est pas voulu sortir l'artillerie lourde que peut être le module Paragraphs, aussi me suis-je tourné vers le module Entity Embed qui permet d'intégrer des entités (ici ce qui m'intéresse les médias) au sein des RTE en choisissant le view mode souhaité et en se basant sur l'UUID de l'entité insérée pour la retrouver.

Cela me permet désormais de mettre des images, des diaporama ou des documents (voir plus tard des vidéos) directement dans le corps des articles à l'endroit approprié et non plus en début ou fin de contenu. Du coup plus besoin de champs fichier ou image dédiés dans les contenus, j'ai uniquement conservé un champ média pour les images d'accroche.

Toujours sur la contribution du contenu, j'en ai profité pour utiliser le module Linkit qui permet de faire des liens internes plus robustes, en utilisant l'UUID de l'entité référencée et en générant le lien à l'affichage cela permet de gérer un changement d'alias s'il se produit et si nécessaire en cas de nouvelle migration, l'UUID permet de mieux retrouver le contenu.

Je fais usage du module Inline Entity Form pour contribuer les entités référencées, médias et termes de taxonomie, je l'ai préféré à Entity Browser principalement pour 2 raisons. La première étant que la bibliothèque de média dans le noyau Drupal étant en module expérimental, une fois stable cela sera comme si Entity browser était déjà intégré et la seconde étant que je voulais changer de l'usage systématique et parfois abusif d'Entity browser que je rencontre.

Du côté theming, beaucoup de changements également :

• utilisation de Bootstrap 3 : certes ce n'est pas récent, mais au moins je passe sur un standard du développement front et je trouve le thème Drupal bien maintenu et stable. Même si je sais qu'il est régulièrement critiqué :). Au niveau de la personnalisation, j'ai utilisé le site https://www.bootstrap-live-customizer.com pour utiliser le thème Bootswatch Yeti. Le site permet un export LESS des variables, un petit chercher/remplacer permet facilement de convertir les variables pour SASS, à un ou deux ajustements manuels à faire dus à des syntaxes de mixins légèrement différentes entre LESS et SASS.

• utilisation de Slick pour les diaporamas. Au revoir Colorbox et les popins.

• utilisation de Blazy pour le lazy loading des images. Pour le paramétrage des formats d'images, j'ai laissé la configuration fournie par le profil d'installation standard, certes ce n'est peut être pas optimal au pixel près, mais ça fait très bien l'affaire.

• utilisation de Fontawesome 5 (en plus des glyphicons fournis par Bootstrap) : ce qui m'a permis de refaire le bloc réseaux sociaux sans utiliser d'image.

J'ai pu installé également les modules classiques utilisés pour le référencement :

• Metatag,

• Simple XML sitemap,

• Pathauto,

• Redirect.

Au niveau de la recherche, je peux désormais utiliser Search API, et non plus le module Search du noyau, avec la base de données comme serveur, pas besoin d'un Solr.

Pour les performances, contrôlant l'hébergement, il y a désormais un Redis et un Varnish qui sont utilisés.

Reprise du contenu

Peu avant la sortie de Drupal 8, j'avais écrit un module pour migrer le contenu de mon site Drupal 7 vers Drupal 8 : https://github.com/FlorentTorregrosa/migrate_ftorregrosa

Vu qu'il y allait y avoir des changements de structure dans les contenus, et afin de pouvoir préparer les contenus sur un environnement de développement sans avoir à utiliser la base de données de développement pour la mise en ligne, j'ai choisi d'utiliser des fichiers CSV contrairement au premier module qui lui utilisait directement la base de données du site Drupal 7.

J'ai donc :

1. fait des exports CSV depuis l'ancien site avec le module Views data export,

2. importé le contenu via des imports Migrate,

3. ré-exporté le contenu traité, à nouveau avec Views data export.

Cela m'a permis de faire le nettoyage de mes contenus car il y avait de nombreux contenus qui étaient mal exportés, par exemple :

• des balises HTML étaient désormais interprétées,

• les liens internes n'étaient plus valides,

• la mise en forme n'allait plus, il fallait utiliser les classes Bootstrap pour les tableaux par exemple,

• rédigeant la plupart de mes articles sur Libreoffice avant d'en faire du contenu sur le site, certains mots étaient constitués de 4 liens sur différentes partie du mot au lieu d'un seul lien, voir le HTML contenaient beaucoup de span inutiles, résultats de formatages (couleur, gras, etc.) enlevés et remis.

J'en ai également profité pour récupérer des tutoriels que j'avais écrits sur le site du club Drupal de l'École Centrale Marseille et améliorer les articles en y ajoutant des images d'accroche pour ajouter un peu d'illustration.

Je reconnais que trouver une image artistique pour illustrer un article peu parfois être assez laborieux, et d'un coup il faut illustrer tout un site déjà existant...

Hébergement

J'ai pris un serveur dédié « Classic Green » ainsi que le nom de domaine chez l'hébergeur Ikoula.

Je voulais d'abord testé avec la configuration la plus petite possible et cela suffit largement à avoir un site Drupal 8 qui tourne bien.

J'ai ainsi pu faire ma première expérience de :

• paramétrage de DNS (merci à Bastien Rigon pour le coup de main),

• mise en place de Let's Encrypt : via Certbot, j'étais agréablement surpris de la simplicité de la mise en place,

• utilisation d'iptables pour bloquer certains ports (merci à Dgeo pour les conseils),

• installation de Matomo en production dans un sous-domaine.

Problèmes rencontrés

Au niveau theming, il y a quelques points non gérés par le thème Bootstrap :

• la pagination du module Book du noyau : une issue existe https://www.drupal.org/project/bootstrap/issues/2637942 et une surcharge de template règle vite le problème,

• pas d'icône flux RSS sur les vues : idem, une issue existe https://www.drupal.org/project/bootstrap/issues/2786227 et une surcharge de template règle le problème.

En lien avec le theming, lorsque j'ai voulu faire en sorte que les liens d'actions des contenus ressemblent à des boutons, cela a mis en évidence une erreur de traduction. Quand un espace mal placé affecte le rendu ! Il est vrai que sur https://localize.drupal.org, l'outil de traduction ne mettait pas bien en évidence l'emplacement de l'espace.

Plus embêtant, pour faire « propre », dans le paramétrage des vues, j'ai voulu retirer les « _X » des noms machines des affichages de vue. Cela a pour effets :

• des fatal errors sur certaines vues standard du noyau car il y a des liens du noyau qui ont besoin de ces noms machines,

• le lien vers le flux RSS ainsi que le lien « voir plus » (par exemple bloc étiquettes et archives de la barre latérale) des vues qui ne s'affichaient plus, et impossible de trouver dans views pourquoi cela ne fonctionnait plus même après ré-enregistrement de la configuration. Pour les blocs de la barre latérale, même en remettant ces noms machine, le lien ne ré-apparaissait pas, je suis donc passé par l'utilisation de texte dans la région footer de la vue.

#DrupalWTF

Au niveau système désormais, j'ai eu des soucis avec la configuration de vhost Nginx car le vhost pour le nom de domaine du site prenait le dessus sur celui pour le sous-domaine pour Matomo. Finalement cela s'est résolu en utilisant un seul vhost Nginx et en mettant les instructions du sous-domaine en premiers.

Et au moment d'écrire cet article, il me reste encore à améliorer l'envoi des mails, certains partent immédiatement alors que d'autres n'arrivent pas.

Conclusion

Même si je n'avais pas prévu de réaliser la migration de mon site sous Drupal 8 maintenant, je suis quand même content que cela soit fait et d'être désormais indépendant au niveau de mon hébergement.

Je peux bénéficier des dernières nouveautés de Drupal 8 et ne suis plus coincé sur un Drupal 7 sans code custom possible à mettre en place et limité en modules communautaires.

La plate-forme assos bénéficiait d'un très bon référencement, avec le changement de domaine j'ai perdu en référencement malgré la redirection mise en place. Je pense que cela va revenir avec le temps.

Edit 18/06/2020 : J'ai finalement mis en place des styles d'images propres au site. Voir l'article dédié.