Migrer un site Jekyll sur Hugo

Note
This article was last updated on 2023-03-03, the content may be out of date.

Il y a deux ans déjà, j’ai migré mon site Wordpress sur un site statique hébergé sur Github Pages. Ce dernier était basé sur Ruby, Jekyll et Minimal mistakes.

Bien que le projet Minimal Mistakes ne donnait plus trop de signes de vie, le rendu convenait.

Cependant, j’étais bloqué sur différents points:

  • La gestion d’articles en anglais et français
  • Le thème dark (inutile donc indispensable)
  • Quelques fonctionnalités manquantes: par ex. MermaidJS

J’ai donc décidé de le migrer sur Hugo. Ce générateur de site est basé sur Go et est très rapide d’exécution.

Je n’ai pas migré le site comme indiquait la documentation.

J’ai préféré créer un nouveau site et copier coller le contenu existant, à savoir les images et les articles.

Je vous conseille de lire la documentation qui est bien faite.

Ensuite, j’ai choisi le thème LoveIt. Pour l’installer, il suffit de cloner le repo dans le répertoire themes.

1
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt

J’ai copié les éléments suivants:

  • Les fichiers statiques que j’avais à disposition (CNAME, robots.txt) dans le répertoire static
  • Les images dansle répertoire static/assets/images
  • Les posts et pages statiques

J’ai ensuite modifié les noms des fichiers en enlevant les dates qui les préfixaient.

Ensuite, j’ai modifié les en-têtes de chaque post. J’ai pu le faire en automatisant avec VS CODE.

Voici le pattern que j’ai modifié:

1
2
header:
  teaser: /assets/images/2018/02/2000px-cygwin_logo-svg.png

en

1
featuredImagePreview: /assets/images/2022/12/review.webp

Ca c’était le plus facile…

Dans chaque post, j’ai revu les images et leur positionnement.

J’ai donc passé chaque article manuellement. C’était réellement fastidieux. Pour être totalement franc, je n’ai paas cherché à automatiser ça. Je pense qu’un script shell, python aurait pu faire l’affaire. Heureusement, je n’en avais pas une centaine…

J’ai ajouté quand je pouvais l’en-tête suivant (adaptez le chemin vers l’image ;-) ):

1
2
featuredImage: /assets/images/2022/12/review.webp
images: ["/assets/images/2022/12/review.webp"]

Le premier attribut permet d’avoir une image d’en-tête pour l’article. Le second permet d’avoir l’image lors d’un partage sur un réseau social (ex. Twitter)

j’ai ajouté le code suivant pour centrer les images:

1
2
3
{{< style "text-align:center" >}}
![dataflow](/assets/images/2022/08/maksym-tymchyk-vHO-yT1BDWk-unsplash.webp)
{{< style >}}

Pour garder les mêmes URLs, j’ai choisi de modifier le pattern d’ URL pour inclure la date. C’est un vieux reliquat de mon blog Wordpress.

1
2
 [languages.fr.permalinks]
        posts = '/:year/:month/:day/:filename/'

Pour le reste, j’ai copié collé l’exemple fourni par le thème et renseigné les champs en fonction de ce que je voulais.

J’ai ensuite adapté le multi langue pour avoir la possibilité de faire des articles en anglais et en français.

J’utilise Lunr. Voici la configuration:

1
2
3
4
5
6
7
8
9
    [languages.en.params.search]
        enable = true
        type = "lunr"
        contentLength = 4000
        placeholder = ""
        maxResultLength = 10
        snippetLength = 50
        highlightTag = "em"
        absoluteURL = false

Il faut également penser à activer la sortie au format JSON:

1
2
3
4
5
6
7
# Options to make hugo output files
[outputs]
  home = ["HTML", "RSS", "JSON"]
  page = ["HTML", "MarkDown"]
  section = ["HTML", "RSS"]
  taxonomy = ["HTML", "RSS"]
  taxonomyTerm = ["HTML"]

A l’instar de mon blog avec Jekyll, j’utilise Utteranc.es. Voici la configuration:

1
2
3
4
5
6
7
8
 [params.page.comment.utterances]
        enable = true
        # owner/repo
        repo = "alexandre-touret/alexandre-touret.github.io"
        issueTerm = "pathname"
        label = ""
        lightTheme = "github-light"
        darkTheme = "github-dark"

Vous aurez bien compris que ma motivation principale derrière cette migration était d’ avoir un support multi langue un peu sympa. Vous avez dans cet article les principales actions que j’ai réalisé.

N’hésitez pas à regarder la configuration et les articles pour plus de détails.