Skip to main content
LaRomierre
Illustration 3D isométrique dépeignant le processus de génération de flux RSS Hugo : des fichiers sources passent à travers des engrenages de configuration (config.toml) pour créer un flux RSS riche affiché sur des appareils mobiles.

Comment personnaliser et optimiser votre flux RSS Hugo

• 5 min • 1,002 words
Hugo Développement-Web RSS Générateur-de-Site-Statique Tutoriel XML
Note

Archive Technique

Cet article discute de la version précédente de ce blog, qui était construit avec Hugo. Le site est maintenant propulsé par Astro. Bien que les concepts de sécurité explorés ici restent valides, les détails d’implémentation spécifiques liés à Hugo ne s’appliquent plus au site en ligne.

RSS (Really Simple Syndication) est un format de flux web standard basé sur XML. Il permet aux utilisateurs de s’abonner à des ressources en ligne—comme des sites web ou des blogs—et de recevoir des mises à jour immédiates chaque fois qu’un nouveau contenu est publié.

Dans ce guide, je détaillerai comment offrir un flux RSS aux visiteurs de votre site Hugo et, plus important, comment le personnaliser pour qu’il réponde à vos besoins spécifiques.

Comment activer le RSS dans Hugo ?

Bonne nouvelle : il est activé par défaut, donc vous n’avez rien à faire ! 😇

Lancer la commande hugo construit votre site web et génère une multitude de fichiers dans votre dossier public. Parmi eux, vous trouverez un fichier nommé index.xml. C’est la représentation XML de votre site web : votre flux RSS. Les lecteurs de flux utilisent ce fichier pour notifier les abonnés de vos mises à jour, comme les articles nouvellement publiés.

Comment exclure du contenu du flux RSS ?

D’abord, jetez un œil au fichier index.xml de votre site. Vous devriez voir une liste de blocs <item> suivant cette structure :

...
<item>
    <title>Titre d'une page</title>
    <link>https://exemple.com/lien-page</link>
    <pubDate>Mon, 01 Jan 2024 00:00:00 +0000</pubDate>
    <author>Nom Auteur</author>
    <guid>https://exemple.com/lien-page</guid>
    <description>Une courte description...</description>
</item>
...

Si un item réfère à une page que vous voulez exclure de votre flux RSS (comme une notice légale ou une landing page), ajoutez simplement ce qui suit à son frontmatter :

+++
...
hidden = true
...
+++

Relancez votre build ou serveur. Vous verrez que la page ciblée n’est plus présente dans le XML généré.

Contrôler quels fichiers RSS sont créés

Selon la documentation RSS de Hugo, plusieurs fichiers de flux sont créés par défaut :

  • Pour la page Home (à la racine du dossier public) ;

  • Pour les Sections (ex. dans public/post/ ou public/page/) ;

  • Pour les Taxonomies (à la racine des tags et catégories) ;

  • Pour les Termes (pour chaque tag et catégorie spécifique).

Comme je l’ai mentionné dans mon post Maîtriser les Sitemaps Hugo : Comment Exclure des Pages et Améliorer le SEO, la génération de fichiers par défaut peut être envahissante.

Voici à quoi ressemble la sortie par défaut :

mon-site/
├── public/
│   ├── categories/
│   │   ├── categorie1/index.xml # Généré
│   │   └── ...
│   ├── tags/
│   │   ├── tag1/index.xml      # Généré
│   │   └── ...
│   ├── post/
│   │   ├── index.xml           # Généré
│   ├── index.xml               # Le flux principal
│   └── ...

Pour un blog simple, vous n’avez probablement besoin que du index.xml principal à la racine. Vous pouvez contrôler cette génération en ajoutant ceci à votre fichier de configuration :

[outputs]
home = ['html', 'rss']
section = ['html']
taxonomy = ['html']
term = ['html']

Dans cette config, 'html' dit à Hugo de générer les pages web, tandis que 'rss' lui dit de générer le flux. En gardant seulement 'rss' dans le tableau home, Hugo créera strictement un seul fichier RSS à la racine.

Si jamais vous vouliez désactiver complètement le RSS sur votre site, vous utiliseriez :

disableKinds = ['rss']

Définir le nombre d’éléments affichés

En examinant le template RSS par défaut de Hugo, nous pouvons voir une logique pour les limites :

...
{{- $limit := .Site.Config.Services.RSS.Limit }}
{{- if ge $limit 1 }}
{{- $pages = $pages | first $limit }}
...

Cela contrôle combien de posts apparaissent dans le flux. Par défaut, toutes les pages sont incluses. Pour limiter le flux aux n derniers éléments, ajoutez ceci à votre config.toml :

[services.RSS]
limit = 10

Lancez votre serveur et vérifiez index.xml pour vérifier que la limite est appliquée.

Comment changer le nom de fichier RSS ?

Par défaut, le flux est nommé index.xml. Vous pourriez vouloir changer cela pour feed.xml ou rss.xml. Cela se fait via la configuration [outputFormats] :

[outputFormats.RSS]
mediatype = "application/rss"
baseName = "feed"

Note : Réglez baseName à votre nom de fichier désiré sans l’extension.

Pourquoi faire cela ? C’est utile pour gérer le cache dans les lecteurs RSS comme Feedly. Comme discuté sur Reddit, Feedly met en cache l’historique. Si vous avez supprimé de vieux posts mais qu’ils apparaissent toujours dans Feedly, changer le nom du fichier “réinitialise” effectivement le flux pour les nouveaux abonnés.

Attention : Changer le nom de fichier change l’URL. Cela cassera les abonnements existants. Ne faites cela que si vous démarrez juste ou si vous avez configuré une redirection.

Personnaliser le contenu du flux RSS

Pour personnaliser la structure XML, vous devez surcharger (override) le template par défaut. Créez un fichier nommé rss.xml dans votre dossier layouts/_default/ (créez les dossiers s’ils n’existent pas) et collez le contenu du rss.xml par défaut de Hugo.

Maintenant vous pouvez éditer ce fichier pour correspondre à vos besoins.

1. Afficher le contenu complet

Par défaut, Hugo utilise une balise <description> contenant les 70 premiers mots de votre post. Si vous voulez que les abonnés lisent l’article entier dans leur lecteur RSS, remplacez la ligne description par :

{{- $content := safeHTML (.Content | html) -}}
<description>{{ $content }}</description>

Alternativement, vous pouvez utiliser .Params.Description si vous voulez utiliser le résumé spécifique défini dans le frontmatter de votre post.

2. Ajouter une image de couverture

Les visuels engagent les lecteurs. Pour afficher l’image de couverture de votre post dans le lecteur RSS, vous pouvez injecter une balise HTML <img> dans la description. En supposant que votre frontmatter a un paramètre cover ou que vous utilisez une convention de nommage standard :

<description>
    {{ "<" | html }}img src="{{ .Permalink }}/cover.jpg" alt="Featured image for {{ .Title }}" {{ "/>" | html}}
    {{ $content }}
</description>

3. Meilleur contrôle sur le résumé

Si vous préférez garder une courte description mais voulez plus de contrôle que la coupure automatique à 70 mots, utilisez le séparateur de résumé manuel. Ajoutez “ à l’intérieur de votre contenu Markdown là où vous voulez que l’aperçu s’arrête. Hugo utilisera tout ce qui précède cette balise comme .Summary.

Selon la documentation, vous pouvez définir les métadonnées globales du flux dans votre config.toml :

copyright = '© 2023 ABC Widgets, Inc.'

[params.author]
email = "romain@exemple.com"
name = "Romain Letourneur"

Comment ajouter une icône RSS à votre thème

La plupart des thèmes Hugo (comme Stack, PaperMod, ou Coder) supportent les icônes sociales. Voici la syntaxe pour ajouter le bouton RSS pour hugo-theme-stack :

[[social]]
identifier = "rss"
name = "RSS"
url = "index.xml"

[social.params]
icon = "rss"

Valider votre Flux RSS

Puisque nous modifions manuellement le template XML, il est crucial d’assurer que la syntaxe reste valide. Un fichier XML cassé signifie que les lecteurs RSS ne pourront pas récupérer vos mises à jour.

Avant de publier vos changements, construisez votre site localement et copiez le contenu de votre public/index.xml. Collez-le dans le Service de Validation de Flux W3C. Il soulignera toutes les erreurs structurelles ou problèmes d’encodage.

Pourquoi optimiser votre RSS ? (La connexion Newsletter)

Au-delà des lecteurs de flux standards, un flux RSS propre est la colonne vertébrale des newsletters automatisées. Des outils comme Mailchimp, ConvertKit, ou MailerLite ont des fonctionnalités appelées “RSS-to-Email”.

En configurant votre flux pour inclure le contenu complet et les images (comme montré ci-dessus), vous pouvez automatiquement générer et envoyer de belles newsletters email à vos abonnés chaque fois que vous publiez un nouvel article sur votre blog Hugo, sans lever le petit doigt !

Bonus : Outils pour RSS

Si vous utilisez Google Chrome, l’extension RSS Feed Reader est très pratique. Elle rend le XML brut dans une interface lisible et offre des boutons d’abonnement rapide pour les lecteurs populaires comme Feedly, Inoreader, ou Newsblur.

Personnellement, j’utilise Feedly pour consommer du contenu. J’apprécie son UI propre, son application mobile et ses fonctionnalités de découverte.