Pourquoi le blog a changé de look? Quels sont les autres changements?

Précédemment sur GoboTheGeek.ch

Jusqu’au 16 juillet 2022, le blog fonctionnait, comme une grande partie des sites, avec WordPress. Globalement, j’étais satisfait du résultat (maintenance réduite) mais trois points m’ont gênés:

  1. La vitesse d’affichage.
  2. La rédaction des articles.
  3. La sauvegarde.

Vitesse d’affichage

Le contenu de ce blog est franchement simple: c’est principalement du texte avec quelques images à l’occasion. J’ai toujours trouvé que les pages ne s’affichaient pas très vite. Ce n’est pas rédhibitoire mais la déception est tout de même présente.

Rédaction des articles

L’éditeur Gutenberg est vraiment bien fait, très agréable à utiliser. Sauf qu’il s’utilise en ligne, il n’y a pas d’outil pour rédiger offline. Et c’est vraiment pénible: pour écrire dans les transports, il faut le faire dans un éditeur simple (Geany, emacs, nano, etc) pour finalement copier le contenu dans WordPress et le mettre en forme.

Sauvegarde

Sauvegarder un site WordPress est vite fatiguant: il faut copier l’ensemble des dossiers et fichiers afin de conserver la configuration et les plugins installés puis sauvegarder la base de données qui contient les articles, les catégories, etc. L’espace disque utilisé est plutôt dingue: plus de 800Mo pour WordPress et encore 200Mo pour la base de données (compacté!). A titre de comparaison, le même contenu en version statique occupe (roulements de tambour!) 68Mo. Ouep, 68Mo contre 1Go pour le même contenu.

Remplacement de WordPress par Hugo

Un matin de Juillet 2022, j’ai testé Hugo pour voir ce que je pouvais faire avec, si c’était pratique pour tenir un blog.

Passer à Hugo est plutôt simple mais un peu long. Il faut d’abord trouver un thème mais aucun ne ressemblait vraiment à celui de mon blog donc j’ai opté pour un changement total. J’ai testé plusieurs thèmes (tranquilpeak, creative portfolio, clarity) avant de finalement opter pour PaperMod.

Le plus difficile reste à faire: importer les articles. Pour cela, j’ai utilisé un script de conversion nommé wordpress-export-to-markdown. Il fonctionne sous node et va (à peu prés) reprendre les articles et les images et convertir au format MarkDown utilisé par Hugo.

Ensuite, une fois les articles convertis, il faut les reprendre pour vérifier la taxonomie (catégories et mots clefs), le titre et refaire les liens vers les images et fichiers. En effet, sous WordPress, les liens sont absolus (super :-/). Bref, une fois remis au propre, j’ai pu générer le site et le mettre en ligne.

Détails de configuration

Voici mon fichier de configuration config.toml:

    
 1baseURL = "https://www.gobothegeek.ch/"
 2languageCode = "fr-ch"
 3DefaultContentLanguage = "ch"
 4title = "Gobo the Geek"
 5theme = "PaperMod"
 6paginate = "10"
 7relativeURLs = true
 8
 9[permalinks]
10  posts = '/:filename'
11  articles = '/:filename'
12  categories = '/category/:slug'
13
14[params]
15enableRobotsTXT = true
16
17style = "dark"
18disableThemeToggle = true
19defaultTheme = "dark"
20ShowBreadCrumbs = false
21ShowPostNavLinks = true
22ShowCodeCopyButtons = true
23DateFormat = "02.01.2006"
24
25copyright = "©2022 Gobo the Geek"
26favicon = "favicon.png"
27email = "web@gobothegeek.ch"
28
29[taxonomies]
30   tag = "tags"
31   category = "categories"
32
33[[menu.main]]
34  url = "/pages/telechargements"
35  name = "Téléchargements"
36  weight = 1
37
38[[menu.main]]
39  url = "/pages/search"
40  name = "Recherche"
41  weight = 2
42
43[[menu.main]]
44  url = "/archives"
45  name = "Archives"
46  weight = 3
47
48[[menu.main]]
49  url = "/categories"
50  name = "Catégories"
51  weight = 4
52
53[[menu.main]]
54  url = "/tags"
55  name = "Tags"
56  weight = 5
57
58[[menu.main]]
59  url = "/pages/a-propos"
60  name = "A propos"
61  weight = 9
62
63[outputs]
64home = [ "HTML", "RSS", "JSON" ]
65
66[markup.highlight]
67codeFences = true
68guessSyntax = true
69lineNos = true
70style = "monokai"
71
72[fuseOpts]
73isCaseSensitive = false
74shouldSort = true
75location = 0
76distance = 1_000
77threshold = 0.4
78minMatchCharLength = 0
79keys = [ "title", "permalink", "summary", "content" ]

Un des points importants de cette migration était de conserver les URLs. Pour cela, il faut régler les trois paramètres de la section[permalinks]. En effet, les 3 options définissent la structure finale de URLs. Par défaut, l’url d’un article correspond à son chemin sur disque.

Retours sur les trois points faibles

Vitesse d’affichage

Ce point est vraiment amélioré puisque le serveur Web doit servir des pages HTML statiques (au lieu de composer la page à grands coups de PHP).

Rédaction des articles

Comme les articles sont des fichiers MarkDown, il n’est plus nécessaire d’être connecté à internet pour rédiger. C’est bien plus pratique. On trouve plusieurs éditeurs de texte au format MarkDown et j’ai opté pour GhostWriter.

Sauvegarde

La sauvegarde est plus simple à réaliser puisqu’il suffit de sauver le dossier de base. Et afin de faciliter le transfert entre mes machines, j’ai configuré un dépôt Git sur mon serveur local.

Conclusion

La migration a été bien plus simple que ce que j’avais imaginé, surtout grâce au script wordpress-export-to-markdown qui a permis de récupéré plus de 95% du contenu. Les avantages de Hugo sont indéniables mais