J'ai refait et migré tout mon site web

Tags

Un projet de longue haleine

En 2020, j'avais commencé la refonte de mon site web. Le projet était déjà bien avancé avec environ 80% du travail complété, incluant :

  • Une ré-implémentation complète du système de taxonomie (étiquettes, catégories)
  • L'intégration de Tailwind CSS, qui commençait alors à gagner en popularité
  • Une base solide pour une architecture moderne

Puis la pandémie de COVID-19 est arrivée, me forçant à mettre le projet en pause pour me concentrer sur mon emploi. En 2022, un heureux événement est venu bouleverser mes priorités : je suis devenu père. Après avoir bénéficié du Régime Québécois d'Assurance Parentale avec mon épouse, j'ai choisi de devenir père à temps plein.

Ce n'est qu'à l'automne 2024, lorsque mon enfant a commencé la garderie, que j'ai pu reprendre ce projet qui ne m'avait jamais vraiment quitté l'esprit.

Objectifs du projet

Mon but est de faire un site qui est :

  • Multilingue et fait ainsi nativement. Si je peux me permettre; d'adapter l'expression Mobile first, je dirais: Multilingual first — puis pouvoir afficher correctement et de façon adaptée aux préférences du visiteur les dates, nombres, libellés de navigation, fuseau horaire, etc.
  • Pouvoir travailler avec le contenu comme je le fais avec mes notes. Des fichiers texte, dans des dossiers. Bien que j'utilise Markdown tous les jours depuis 2013, mon site web n'était pas fait pour me permettre ceci sans que j'ai a faire tout ce travail.
  • Minimiser la dépendance d'un serveur pour mon site web, quelque chose comme des fichiers HTML peut vivre très longtemps

Le défi de la migration

Les derniers 20% du projet représentaient un défi majeur : la migration du contenu. Pour faciliter ce processus, j'ai développé et publié un outil spécialisé: process-wordpress-xml, qui permet d'extraire le contenu des sauvegardes WordPress au format XML.

Processus de migration automatisé

Le processus de migration comprend plusieurs étapes :

  1. Export du contenu WordPress en format XML
  2. Traitement automatisé avec process-wordpress-xml pour :
    • Extraire les articles et pages
    • Préserver les métadonnées
  3. Organisation des fichiers dans la nouvelle structure
  4. Validation et nettoyage du contenu converti
Pourquoi un nouvel outil ?

J'ai choisi de développer mon propre outil de migration car je n'en avais pas trouvé qui permettait de prendre le contenu directement du fichier de sauvegarde de WordPress au format XML.

Ce format me semblait très approprié pour une migration car il est déjà utilisé pour faire des migrations.

Aussi, j'ai pu:

  • Débroussailler les articles écrits en Français et ceux en Anglais, puis détecter et ajouter un attribut locale: fr-CA (et en-CA) pour chaque page. Je compte rendre ce site complètement multilingue et de savoir la langue pour chaque page va aider.
  • Adapter plus spécifiquement pour mon choix technologique de fichiers HTML statique dans un dossier.
  • Faciliter la réutilisation pour d'autres projets similaires

Une fois les données extraites du fichier backup en XML de WordPress, je pourrai graduellement:

  • Faire une conversion Markdown
  • Remplacer et ajuster les balises "short codes" de WordPress comme [gallery], [youtube] et autre
  • Ajuster ou je ferai héberger séparément les médias du contenu pour les faire héberger sur un CDN. Je les entretiens sur GitHub.com/renoirb/site-assets et j'ai pu y ajouter un alias du genre ~/assets/content/blog/2020/02/storybook-value-number.png et savoir ou aller chercher l'image dynamiquement et de façon "lazy" ce qui aidera la vitesse de chargement de la page.
  • Annoter dans le HTML les abbreviations, et les mots qui ne sont pas dans la langue de l'article

Pour cette partie de la conversion, j'ai décidé d'expérimenter avec les Large Language Models (LLM) et peux conserver le même contenu. Extraire le contenu et l'écrire dans des fichiers, c'est facile. Mais ré-écrire et normaliser des fichiers textes qui changent beaucoup d'une page a l'autre, un LLM peux faire ça très bien!

Système de taxonomie amélioré

L'un des aspects les plus intéressants de cette migration a été la mise en place d'un système de taxonomie flexible et multilingue qui permet :

  • La gestion des tags et catégories via des fichiers YAML
  • Des libellés personnalisés en Français et en Anglais
  • Une structure claire pour la navigation et la découverte du contenu

Prochaines étapes

Bien que le site soit maintenant fonctionnel, plusieurs améliorations sont prévues :

  • Finalisation de l'interface multilingue (voir ticket renoirb/site #77)
  • Mise a jour de Vue, Nuxt, et Nuxt Content
  • Restructuration dans le code pour que le projet Nuxt (e.g. dans GitHub renoirb/site), qu'il n'y ait que le contenu, la définition des routes et que le reste soit dans des modules écrits en isolation.