Mes blogs ont connu multiples plateformes: Wordpress, Jekyll, Gatsby… C’est plus amusant de changer de stack que de se lancer dans la rédaction régulière d’articles 🤡

Ca fait plusieurs années maintenant que je suis fidèle au générateur de sites statiques Hugo, et n’ai aucune envie de migrer vers autre chose.

Je l’utilise pour mon blog technique (vous êtes dessus!) et mon blog de critiques culturelles (où je raconte mon humble avis sur des films/lectures/expos…).

Ecrire du markdown est bien plus rapide que de se connecter à un backend d’administration à la Wordpress. Je peux écrire facilement depuis mon téléphone tout comme mon ordi.

Cependant on peut avoir besoin d’écrire un contenu en HTML dans un article (post embeddé, …). Si vous avez besoin d’ajouter du HTML dans un post en markdown avec Hugo, vous pouvez utiliser la fonctionnalité des shortcodes Hugo !

C’est quoi un shortcode ?

Un shortcode est une sorte de balise que vous allez pouvoir ajouter sur vos articles pour pouvoir ajouter un certain formatage.

Ce concept existe également sur Wordpress !

Créer un shortcode avec Hugo

On va créer un fichier rawhtml.html dans le dossier layouts/shortcodes qui devrait être à la racine de votre projet.

💡 A noter, le nom de votre fichier match avec le nom de votre shortcode! (Si vous appelez le fichier patate.html, le shortcode sera appelable avec {{ <patate> }} 🥔)

Une fois le fichier rawhtml.html crée, mettez le contenu suivant 👇

{{.Inner}}

Comment ajouter du HTML dans un article Hugo ?

Dans le corps de cet article, j’ai ajouté le code suivant 👇

{{ < rawhtml >}}
  <style>
    .text {
      padding: 2px;
      text-align: center;
      background: yellow;
    }
  </style>
  <p class="text">
    <mark>Je suis du HTML custom</mark>
  </p>
{{ < /rawhtml >}}

💡 Il faut enlever les espaces autour de rawhtml pour que ça soit bien interprété !

Ce qui devrait donner ceci 👇

Je suis du HTML custom

Happy blogging ! 🫶🏽