L’atelier d’administration - Migration de WordPress vers Hugo

Depuis des années, j’ai eu ce blog en tête, en me demandant : voyons si je fais une entrée à propos de ceci ou cela, le temps passe et quand je le lis, je me rends compte que je n’ai pas écrit un seul article depuis 8 ans.

À l’ère actuelle de l’IA, il n’est peut-être pas logique de tenir un blog, mais j’aimerais conserver mes compétences en écriture et communiquer les projets personnels que je réalise.

Ce blog a été créé il y a 19 ans sous le nom de « Mis Cosas Geek », utilisant « Geek » comme terme associé à une personne passionnée par la technologie, cependant, ces dernières années, ce terme a été de plus en plus associé à la culture pop, aux jeux vidéo, aux comics, aux films et à la musique culte, ainsi qu’à la science-fiction et à la fantasy, et ce n’est pas le but de ce blog. Ainsi, dorénavant, chers amateurs de silicium, ce site s’appellera « L’atelier de l’administrateur » et nous continuerons à parler des ratés électroniques, du développement et de certains nouveaux sujets comme la domotique et l’impression 3D.

La nouvelle Stack
#

Ce changement de nom n’est peut-être pas la seule nouveauté et, à cause de cela, il a également été migré au niveau technologique pour générer du HTML statique ; les raisons de ce changement sont d’éviter de maintenir une base de données et d’écrire en Markdown, ainsi que d’améliorer le SEO, les performances, l’accessibilité et la sécurité (en gros parce qu’il s’agit de HTML statique :D).

wp2hugo comme outil pour effectuer la migration.
Hugo comme générateur de sites statiques.
Thème du poisson-globe
Actions sur Github
Microsoft Translator avec le palier gratuit (Azure F0) pour les traductions dans d’autres langues et 2 millions de caractères par mois inclus.
Ouvriers de Cloudflare
[Brevo](Para Newsletter)
Offre-moi un café
Pholo Vérification du site pour les passionnés de RSS comme moi, mais mise à jour avec l’IA

Choisir un générateur de site statique
#

Le choix a été Hugo, mais dans cette nouvelle étape, je veux me concentrer sur l’écriture plutôt que sur la maintenance de plugins, mises à jour, SEO, etc., tout en maintenant les meilleures performances possibles. Hugo présente les avantages suivants par rapport à des technologies similaires telles qu’Astro, Jekyll ou Next.js.

Il n’a aucune dépendance
La courbe d’apprentissage est basse.
Sa vitesse est très élevée.
C’est moderne, comparé surtout à Jekyll
Simplicité

Ensuite, il faut choisir un thème robuste, bien conçu, avec des fonctionnalités intégrées et qui ne soit pas surchargé, après avoir comparé plusieurs thèmes existants Blowfish a été choisi.

Exportation
#

Pour la migration, la première chose consiste à extraire le contenu et les fichiers de l’ancien WordPress en utilisant l’une des bibliothèques disponibles sur Github. Après avoir comparé plusieurs outils tels que wordpress-export-to-markdown,markdown-exporter-for-wordpress et wp2hugo, ce dernier a été clairement le gagnant grâce aux avantages suivants :

Extraits des commentaires
Il vous permet de télécharger non seulement les images et fichiers référencés, mais aussi tous ceux existants dans WordPress
Transformez correctement le HTML de WordPress en y incluant des blocs de code
Cela vous permet d’ajuster la structure des fichiers et dossiers dans le nouveau blog
Maintient WordPress et les slugs GUID

Le flux de déploiement
#

En ce qui concerne le déploiement, même si dans ma vie professionnelle j’ai utilisé Jenkins, des templates CI/CD Gitlab et Azure DevOps, je n’avais jamais utilisé Github Actions et l’expérience a été merveilleuse.

Pour « l’hébergement » du site, Cloudflare Workers a été utilisé permettant des déploiements gratuits même dans des dépôts privés, des requêtes illimitées, 20 000 fichiers, 25 Mo par fichier, des redirections réelles 301 (pour maintenir les redirections des anciens flux RSS de WordPress), 404 pages par langue, entre autres.

Tout est en code : .github/workflows/publish.yml (Action « Publier ») et Cloudflare wrangler.jsonc (Travailleur).

Chaque poussée d’un main lance l’Action, qui effectue deux tâches consécutives :

1. Traduction
#

J’aimerais que le blog touche plus de personnes, pour cela j’ai choisi les langues les plus parlées au monde et les articles y seront automatiquement traduits :

Espagnol
Anglais
Mandarin chinois
Hindi
Espagnol
Français
Arabe
Bengali
Portugais
Russe

Pour cela, j’utilise translate.py qui traduit gratuitement nouveaux posts ou des publications modifiées via Microsoft Translator et télécharge les traductions dans le dépôt. S’il n’y a rien, le script se termine en quelques secondes sans frais de paiement. - Si la traduction échoue ou si le quota est épuisé : elle est affichée de toute façon, donc le post en espagnol est publié de toute façon. - Vous pouvez reprendre les traductions en attente ou les redéployer manuellement : Actions → Flux de travail Publier → Exécuter. - Secrets GitHub : AZURE_TRANSLATOR_KEY, AZURE_TRANSLATOR_REGION, CLOUDFLARE_API_TOKEN (modèle « Modifier Cloudflare Workers », zone talleradmin.com) et CLOUDFLARE_ACCOUNT_ID.

2. Le déploiement
#

Construis avec Hugo (la dernière version disponible avec support Blowfish) et déploie avec wrangler.jsonc dans Worker de Cloudflare.

La Newsletter
#

Je ne sais pas si les newsletters existent encore ou sont en train de disparaître, alors j’en ai créé une avec [Brevo](Para Newsletter) pour la tester. J’ai été surpris qu’une fonctionnalité qui, il y a 20 ans, offrait des centaines de sites web gratuitement aux webmasters soit désormais un service payant ultra-limité. Cela dit, d’après ce que j’ai pu rechercher, Claude et moi Brevo semble proposer le meilleur forfait gratuit avec l’automatisation RSS.

Autres sujets examinés et migrés
#

Accessibilité
Adsense
Google Search Console : migrez le blog puisque le domaine a également changé rubeninfante.com en talleradmin.com
Liens d’affiliation Aliexpress et Amazon

Optimiser les images

sudo apt install optipng jpegoptim
find static/wp-content -iname '_.png' -print0 | xargs -0 -P"$(nproc)" -n4 optipng -o2 -strip all -quiet
find static/wp-content -iname '_.jp\*g' -print0 | xargs -0 jpegoptim --strip-all --all-progressive -q

Critique robots.txt
Revue des accents dans les catégories et tags
Dans mon cas, j’ai nettoyé les tags et les catégories avec le fichier static/_redirects
Nettoyer les fichiers inutilisés
J’ai ajouté des images à chaque page ainsi qu’une version générique pour les moments où il n’y a pas de static/img/social-default.jpg et assets/img/background.jpg
Examinez les plugins WordPress avant la migration et désactivez tous sauf les essentiels.
Modifier et créer des redirections de rubeninfante.com vers talleradmin.com

Dans le travail quotidien
#

Commandements
#

Créer un nouvel objet
```
hugo new posts/mi-nuevo-articulo/index.md
```
- Si une image dans le dossier mi-nuevo-articulo est appelée feature.[jpg,png,webp] elle sera utilisée comme image principale, en-tête et réseau social

Vérifiez la présence de liens cassés

Créez le fichier lychee.toml à la racine du site avec du contenu

  # lychee.toml — enlaces que no se comprueban (expresiones regulares)
  exclude = [
    "#nolychee$",   # la marca de evitar enlaces
    "https://web.archive.org/web/*",
    "reddit.com/submit",
    "facebook.com/sharer",
    "linkedin.com/shareArticle"
  ]
  exclude_path = ["^public/(en|zh-cn|hi|fr|ar|bn|pt-br|ru)/"]

Exécutez la commande :

  hugo --gc --cleanDestinationDir
  lychee --root-dir "$PWD/public" 'public/**/*.html' --format markdown --output informe.md

Critique informe.md
- Ajouter https://web.archive.org/web/au début de l’URL si le lien n’existe plus
- Ajoutez #nolychee à la fin d’un lien ou au fichier lychee.toml si la détection est incorrecte à cause des anti-bots ou pour une autre raison

Pour mettre à jour le thème
#

Mettre à jour le thème

  cd themes/blowfish
  OLD=$(git rev-parse HEAD)                                  # para comparar después
  git fetch --depth 1 origin main && git checkout -B main origin/main

Examinez les fichiers que vous avez écrasés sur le sujet

  cd ../..
  for f in $(cd layouts && find . -type f); do git -C themes/blowfish diff --quiet $OLD HEAD -- "layouts/${f#./}" 2>/dev/null || echo "Revisar: layouts/${f#./}"; done

Images
#

Il est important de connaître les itinéraires pour stocker les images du blog :

assets pour les images que le thème utilise et peut optimiser : l’arrière-plan (defaultBackgroundImage), l’image en vedette par défaut (defaultFeaturedImage), et votre photo d’auteur. C’est pourquoi background.jpg est acceptable : le thème le rétrécit et les 3,4 Mo ne sont pas servis.
static pour lesquelles il faut une URL fixe et inchangée : favicons, ads.txt, PDFs, fichiers à télécharger ou images vers lesquelles vous pouvez lier depuis l’extérieur. Par exemple, je l’ai social-default.jpg mis là parce que WhatsApp et X demandent une URL stable.
Imágenes de un post concreto: Dans le dossier du post lui-même (paquets de pages).
REMARQUE Dans hugo.toml, j’ai configuré static aussi en tant que ressources. C’est pourquoi les images statiques ou les images sont aussi optimisées lorsque le thème les utilise comme couverture. C’est une correction pour la migration de WordPress.
```
  [[module.mounts]]
    source = "static"
    target = "assets"
```

Ajouter un langage
#

Fichiers à modifier/ajouter

  config/_default/languages.xx.toml
  config/_default/menus.xx.toml
  i18n/xx.toml (Sólo en el caso del que el tema no incluya el idioma)

Modifier /config/_default/params.toml

  newsletter.formAction]
    es = "https://..."
    xx = "https://..."

La nouvelle Stack#

Choisir un générateur de site statique#

Exportation#

Le flux de déploiement#

1. Traduction#

2. Le déploiement#

La Newsletter#

Autres sujets examinés et migrés#

Dans le travail quotidien#

Commandements#

Pour mettre à jour le thème#

Images#

Ajouter un langage#

Cet article vous a plu ? Abonnez-vous pour ne rien manquer.