Hugo est un générateur de sites statiques (GSS) écrit en Go (alias Golang), un langage de programmation compilé très performant souvent utilisé pour développer des applications et des services backend.

Aujourd’hui, Hugo est capable de générer la plupart des sites web en quelques secondes (<1 ms par page). Cela explique pourquoi Hugo se présente comme « le framework le plus rapide du monde pour la création de sites web ».

Dans cet article, nous allons examiner l’histoire d’Hugo, ce qui le rend si rapide et comment vous pouvez commencer à créer votre propre site statique Hugo.

Qu’est-ce que Hugo ? Et pourquoi est-il populaire ?

La page d'accueil du site web d'Hugo.
La page d’accueil du site web d’Hugo.

Steve Francia a initialement développé le générateur de sites statiques Hugo en 2013, et Bjørn Erik Pedersen a pris la relève en tant que développeur principal du projet en 2015. Hugo est un projet open-source, ce qui signifie que son code peut être consulté et amélioré par tout le monde.

En tant que générateur de sites statiques, Hugo prend des fichiers de contenu Markdown, les fait passer par des modèles de thèmes et crée des fichiers HTML que vous pouvez facilement déployer en ligne – et il fait tout cela extrêmement rapidement.

En 2021, il existe des dizaines, voire des centaines, de générateurs statiques. Chaque générateur de site statique a son attrait. Jekyll est populaire parmi les développeurs Ruby, et bien qu’il ne soit pas aussi rapide que d’autres options, c’est l’un des premiers générateurs de sites statiques à avoir été largement adopté. Gatsby est un autre GSS populaire qui convient bien au développement de sites à déploiement statique dont les fonctionnalités sont dynamiques.

Alors, avec tant de GSS sur le marché, qu’est-ce qui fait qu’Hugo se démarque ?

Hugo se présente comme « le framework le plus rapide du monde pour construire des sites Web» ⚡️ donc si vous cherchez un moyen de construire rapidement un site statique, commencez ici ⬇️Click to Tweet

Hugo est rapide

En termes de performances brutes, Hugo est le meilleur générateur de sites statiques au monde. Comparé à Jekyll, Forestry a montré qu’Hugo est 35 fois plus rapide. De même, Hugo peut rendre un site de 10.000 pages en 10 secondes, une tâche qui prendrait plus d’une demi-heure à Gatsby. Non seulement Hugo est le SSG le plus rapide en termes de temps de construction, mais il est aussi rapide à installer.

Hugo est livré sous la forme d’un exécutable autonome, contrairement à Jekyll, Gatsby et d’autres GSS qui nécessitent l’installation de dépendances avec un gestionnaire de paquets. Cela signifie que vous pouvez télécharger et utiliser Hugo immédiatement sans avoir à vous soucier des dépendances logicielles.

La création de modèles est facile avec Hugo

Dans le jargon des SSG, le « templating» fait référence au processus d’ajout de textes indicatifs pour l’insertion de contenu dynamique dans une page HTML. Pour accéder au titre d’une page, vous pouvez utiliser la variable {{ .Title }}. Ainsi, dans un modèle HTML Hugo, il est courant de voir la variable {{ .Title }} enveloppée dans des balises H1 comme ceci :

<h1>{{ .Title }}</h1>

Au moment de la construction, Hugo récupère automatiquement le titre dans un fichier de contenu et l’insère entre les deux balises <h1>. Hugo dispose d’une variété de variables de modélisation intégrées, et vous pouvez même écrire des fonctions personnalisées pour traiter les données au moment de la construction. Pour la création de modèles, Hugo utilise les bibliothèques intégrées html/template et text/template de Go. Cela permet de réduire l’engorgement des applications car Hugo n’a pas besoin d’installer des bibliothèques tierces pour la création de modèles.

Comment installer Hugo

Hugo est livré sous la forme d’un exécutable compilé, ce qui signifie que vous n’aurez pas à télécharger et à gérer de nombreuses dépendances juste pour commencer. Il est disponible pour macOS, Windows et Linux.

Comment installer Hugo sur macOS et Linux

La méthode d’installation recommandée pour macOS et Linux nécessite Homebrew, un gestionnaire de paquets pour l’installation et la mise à jour d’applications. Si vous n’avez pas encore installé Homebrew, vous pouvez l’installer en exécutant la commande ci-dessous dans Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Une fois que Homebrew a été installé, exécutez la commande ci-dessous pour installer Hugo :

brew install hugo

Comment installer Hugo sur Windows

Pour les utilisateurs de Windows, Hugo peut être installé à l’aide des gestionnaires de paquets Chocolatey ou Scoop. Comme les instructions d’installation de Chocolatey et Scoop sont un peu plus complexes que celles d’Homebrew, nous vous recommandons de vous référer à leurs pages de documentation officielles ici et ici.

Après avoir installé Chocolatey ou Scoop, vous pouvez installer Hugo à l’aide de l’une des commandes suivantes (en fonction de votre gestionnaire de paquets) :

choco install hugo-extended -confirm
scoop install hugo-extended

Comment vérifier que Hugo est correctement installé

Pour vérifier que Hugo a été correctement installé, exécutez la commande suivante :

hugo version

Cette commande de Terminal devrait afficher des informations concernant la version actuellement installée de Hugo comme ci-dessous :

hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Commandes et configuration d’Hugo

Avant de nous plonger dans la création d’un site statique avec Hugo, familiarisons-nous avec ses différentes commandes CLI et les paramètres du fichier de configuration.

Commandes CLI d’Hugo

  • hugo check – exécute divers contrôles de vérification
  • hugo config – affiche la configuration d’un site Hugo
  • hugo convert – convertit le contenu en différents formats
  • hugo deploy – déploie votre site vers un fournisseur de cloud computing
  • hugo env – affiche les informations sur la version et l’environnement d’Hugo
  • hugo gen – donne accès à divers générateurs
  • hugo help – affiche des informations sur une commande
  • hugo import – vous permet d’importer un site depuis un autre emplacement
  • hugo list – affiche une liste de divers types de contenu
  • hugo mod – permet d’accéder à divers modules d’aide
  • hugo new – vous permet de créer du nouveau contenu pour votre site
  • hugo server – démarre un serveur de développement local
  • hugo version – affiche la version actuelle de Hugo

La CLI d’Hugo dispose également d’une variété de drapeaux permettant de spécifier des options supplémentaires pour certaines commandes. Pour afficher une liste complète des drapeaux Hugo (il y en a beaucoup), nous vousz recommandons d’utiliser la commande hugo help pour afficher une liste de tous les drapeaux disponibles.

Le fichier de configuration d’Hugo

Le fichier de configuration d’Hugo prend en charge trois formats : YAML, TOML et JSON. De même, le fichier de configuration d’Hugo est config.yml, config.toml ou config.json, et vous pouvez le trouver dans le répertoire racine d’un projet Hugo.

Fichier de configuration Hugo.
Fichier de configuration Hugo.

Voici à quoi ressemble un fichier de configuration Hugo typique au format YAML :

DefaultContentLanguage: en

theme:

- kinsta-static-site

contentdir: content

layoutdir: layouts

publishdir: public

paginate: 5

title: Kinsta Static Site

description: "This is a static site generated with Hugo!"

permalinks:

post: :slug/

page: :slug/

tags: "tag/:slug/"

author: "author/:slug/"

Si vous avez déjà utilisé WordPress ou un autre CMS, certaines des options de configuration peuvent vous sembler familières. Par exemple, kinsta-static-site est le nom du thème du site, Kinsta Static Site est le méta titre SEO, et paginate (le nombre d’articles par page) est 5.

Hugo dispose de dizaines d’options de configuration, que vous pouvez toutes explorer dans la documentation officielle d’Hugo. Si vous devez apporter un changement de configuration globale pendant le développement d’un site Hugo, il y a de fortes chances que vous deviez modifier ce fichier de configuration.

Comment créer un site Hugo

Maintenant que nous avons vu comment installer et utiliser le CLI Hugo et les bases du fichier de configuration Hugo, créons un nouveau site Hugo.

Pour créer un site Hugo, utilisez la commande ci-dessous (n’hésitez pas à remplacer my-hugo-site par autre chose si vous le souhaitez) :

hugo new site my-hugo-site
Créer un nouveau site Hugo.
Créer un nouveau site Hugo.

Ensuite, rendez-vous dans le répertoire du site, et vous devriez voir les fichiers et répertoires suivants : fichier config.toml, répertoires archetypes, contenu, layouts, themesdata et static. Passons rapidement en revue les caractéristiques de chacun de ces fichiers et répertoires.

Fichier config.toml d’Hugo

Comme nous l’avons souligné plus haut, le principal fichier de configuration d’Hugo contient les paramètres globaux de votre site.

Répertoire Archetypes d’Hugo

Le répertoire archetypes est l’endroit où vous stockez les modèles de contenu formatés en Markdown. Les archétypes sont particulièrement utiles si votre site a plusieurs formats de contenu. Avec les archétypes Hugo, vous pouvez créer un modèle pour chaque type de contenu de votre site. Cela vous permet de pré-remplir les fichiers Markdown générés avec tous les paramètres de configuration nécessaires.

Par exemple, si vous avez un type de contenu podcast pour afficher vos épisodes de podcast, vous pouvez créer un nouvel archétype dans archetypes/podcast.md avec le contenu ci-dessous :

---

title: "{{ replace .Name "-" " " | title }}"

date: {{ .Date }}

description: ""

season:

episode:

draft: true

---

Avec cet archétype podcast, vous pouvez ensuite utiliser la commande ci-dessous pour créer un nouvel article :

hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Maintenant, si vous ouvrez l’article nouvellement créé, vous devriez voir ceci :

---

title: "Interview with Kinsta CEO"

date: 2021-05-20T13:00:00+09:00

description: ""

Season: 1

episode: 6

draft: true

---

Sans archétypes, vous devrez spécifier manuellement les paramètres de l’avant-propos pour chaque nouvel article que vous créez. Si les archétypes peuvent sembler complexes et inutiles au début, ils peuvent finir par vous faire gagner beaucoup de temps à long terme.

Le répertoire de Content d’Hugo

Le répertoire content est l’endroit où se trouve le contenu réel de votre article. Hugo prend en charge les formats Markdown et HTML, Markdown étant l’option la plus populaire en raison de sa facilité d’utilisation. En plus d’être l’espace de stockage général des articles, vous pouvez utiliser le répertoire content pour organiser davantage le contenu des articles.

Hugo traite chaque répertoire de premier niveau du dossier content comme une section de contenu. Les sections de contenu dans Hugo sont similaires aux types de pupblications personnalisés dans WordPress. Par exemple, si votre site a des articles, des pages et des podcasts, votre répertoire de content aura des répertoires d’articles, de pages et de podcasts où se trouvent les fichiers de contenu pour ces différents types d’articles.

Le répertoire Layouts d’Hugo

Le répertoire layouts contient des fichiers HTML qui définissent la structure de votre site. Dans certains cas, vous pouvez voir un site Hugo sans répertoire layouts car il n’est pas nécessaire qu’il se trouve dans le répertoire racine du projet et peut se trouver dans un répertoire de thème.

À l’instar des thèmes WordPress qui utilisent PHP pour la création de modèles, les modèles Hugo se composent d’un HTML de base et d’une création de modèles dynamiques supplémentaires alimentée par les bibliothèques intégrées de Golang html/template et text/template. Les différents fichiers de modèles HTML nécessaires pour générer le balisage HTML de votre site se trouvent dans le répertoire layouts.

Le répertoire Themes d’Hugo

Pour les sites qui préfèrent un moyen plus autonome de stocker les fichiers de modèles et les ressources, Hugo prend en charge un répertoire themes. Les thèmes Hugo sont similaires aux thèmes WordPress: ils sont stockés dans un répertoire themes et contiennent tous les modèles nécessaires au fonctionnement d’un thème.

Bien que certains utilisateurs d’Hugo préfèrent conserver les fichiers liés aux thèmes dans le répertoire racine du projet, le stockage de ces fichiers dans le dossier themes permet une gestion et un partage plus faciles.

Le répertoire Data d’Hugo

Le répertoire data d’Hugo est l’endroit où vous pouvez stocker des données supplémentaires (au format JSON, YAML ou TOML) qui sont nécessaires pour générer les pages de votre site. Les fichiers de données sont avantageux pour les ensembles de données plus importants qui peuvent être encombrants à stocker directement dans un fichier de contenu ou de modèle.

Par exemple, si vous vouliez créer une liste des taux d’inflation en dollars américains de 1960 à 2020, il faudrait environ 80 lignes pour représenter les données (une ligne pour chaque année). Au lieu de placer ces données directement dans un fichier de contenu ou de modèle, vous pouvez les créer dans le répertoire data et les remplir avec les informations nécessaires.

Le répertoire Static d’Hugo

Le répertoire static d’Hugo est l’endroit où vous stockez les ressources statiques qui ne nécessitent aucun traitement supplémentaire. Le répertoire static est généralement l’endroit où les utilisateurs d’Hugo stockent des images, des polices, des fichiers de vérification DNS, et plus encore. Lorsqu’un site Hugo est généré et enregistré dans un répertoire pour un déploiement facile, tous les fichiers du répertoire static sont copiés tels quels.

Si vous vous demandez pourquoi nous n’avons pas mentionné les fichiers JavaScript ou CSS, c’est parce qu’ils sont souvent traités dynamiquement via des pipelines pendant le développement du site. Dans Hugo, les fichiers JavaScript et CSS sont généralement stockés dans le répertoire theme car ils nécessitent un traitement supplémentaire.

Comment ajouter un thème à un site Hugo

Télécharger et installer un thème pré-construit est un excellent moyen de commencer à utiliser Hugo. Les thèmes Hugo sont de toutes formes et de toutes tailles, et beaucoup d’entre eux sont disponibles gratuitement sur le dépôt officiel de thèmes Hugo. Allons-y et installons le thème populaire Hyde sur notre site Hugo.

Tout d’abord, rendez-vous dans le répertoire du thème de votre projet dans Terminal :

cd <hugo-project-directory>/themes/

Ensuite, utilisez Git pour cloner le thème Hyde dans le répertoire themes de votre projet.

git clone https://github.com/spf13/hyde.git

Ensuite, ajoutez la ligne suivante à votre fichier config.toml pour activer le thème Hyde :

theme = "hyde"

À ce stade, le thème Hyde est installé et configuré. L’étape suivante consiste à démarrer le serveur web de développement intégré de Hugo pour visualiser le site dans votre navigateur.

Comment prévisualiser un site Hugo

Hugo est livré avec un serveur web intégré à des fins de développement, ce qui signifie que vous n’avez pas besoin d’installer un serveur web tiers comme Nginx ou Apache juste pour visualiser localement votre site.

Pour démarrer le serveur web d’Hugo, exécutez la commande ci-dessous dans le répertoire racine de votre projet :

hugo server -D

Hugo construira ensuite les pages de votre site et les rendra disponibles à l’adresse http://localhost:1313/:

Serveur de développement local Hugo.
Serveur de développement local Hugo.

Si vous vous rendez sur l’URL dans votre navigateur web, vous devriez voir votre site Hugo avec le thème Hyde :

Site Hugo s'affichant avec le thème Hyde.
Site Hugo s’affichant avec le thème Hyde.

Par défaut, le serveur de développement local d’Hugo surveille les modifications et reconstruit le site automatiquement. Comme la vitesse de construction d’Hugo est très rapide, les mises à jour de votre site peuvent être vues quasiment en temps réel – ce qui est rare dans le monde des générateurs de sites statiques. Pour le démontrer, créons notre tout premier article dans Hugo.

Comment ajouter du contenu à un site Hugo

L’ajout de contenu à un site Hugo est très différent d’un CMS à part entière comme WordPress ou Ghost. Avec Hugo, il n’y a pas de couche CMS intégrée pour gérer votre contenu. Au lieu de cela, on attend de vous que vous gériez et organises les choses comme vous le souhaitez.

En d’autres termes, il n’y a pas de façon explicitement « correcte » de faire de la gestion de contenu dans Hugo. Nous allons partager une méthode d’ajout et de gestion de contenu dans cette section, mais n’hésitez pas à modifier les choses au fur et à mesure que vous vous familiarisez avec Hugo.

Sections de contenu dans Hugo

Dans Hugo, le premier outil d’organisation du contenu que vous avez à votre disposition est la section de contenu. Une section de contenu dans Hugo est similaire à un type d’article dans WordPress – non seulement vous pouvez l’utiliser comme un filtre de contenu, mais vous pouvez aussi l’utiliser comme un identifiant lors de la création de thèmes personnalisés.

Par exemple, si vous avez un répertoire de section de contenu de blog, vous pouvez l’utiliser pour stocker tous vos articles de blog et rendre un modèle de page spécifique qui s’applique uniquement aux articles de blog.

Comment ajouter des articles dans Hugo

Avec cela en tête, créons une section de contenu pour les articles de blog et ajoutons quelques éléments de contenu. Créez un nouveau répertoire nommé posts dans le répertoire content de votre projet – c’est la section de contenu.

Créons une autre couche organisationnelle à l’intérieur du répertoire posts en créant un répertoire 2021. À ce stade, votre répertoire content devrait ressembler à ceci :

Répertoire content Hugo.
Répertoire content Hugo.

Maintenant, créons notre premier article. Comme nous l’avons vu précédemment, Hugo prend en charge les fichiers Markdown et HTML pour le contenu. En général, il est préférable de s’en tenir aux fichiers Markdown car ils sont plus faciles à écrire, à formater et à lire.

Dans le répertoire content/posts/2021, crée un nouveau fichier qui se termine par .md (l’extension du fichier Markdown). Vous pouvez nommer le fichier comme vous voulez, mais la syntaxe recommandée pour nommer un fichier de contenu Hugo est YYYY-MM-DD-a-sample-post.md.

En plus de créer manuellement un fichier de contenu, vous pouvez aussi utiliser le CLI Hugo pour créer un nouvel article avec la commande ci-dessous (assurez-vous d’exécuter la commande depuis le répertoire de votre projet) :

hugo new posts/2021/2021-08-30-a-sample-post.md

Remarquez que le répertoire content est absent du chemin d’accès ci-dessus. C’est parce que Hugo suppose que tous les fichiers de contenu iront dans le répertoire content par défaut.

Si vous ouvrez le fichier de contenu nouvellement créé, vous devriez voir quelques lignes de métadonnées en haut du document qui ressemblent à ceci :

---

title: "2021 08 30 a Sample Post"

date: 2021-08-30T13:44:28+09:00

draft: true

---

Ces métadonnées, qui sont formatées en YAML, s’appellent le « front-matter ». Il est généré automatiquement est un avantage important de l’utilisation de la CLI Hugo. C’est l’endroit où sont stockées les données uniques d’un article (nom de l’article, données, statut du brouillon, étiquettes, catégories, etc. Son format par défaut peut être configuré pour chaque section à l’aide d’archétypes.

Ajoutons maintenant du texte au message. Lorsque vous écrivez un article, assurez-vous toujours que votre contenu se trouve en dessous du front-matter, comme ci-dessous :

Article de blog dans Hugo.
Article de blog dans Hugo.

Une fois que vous avez enregistré le fichier de contenu, vous devriez voir Hugo reconstruire votre site dans le Terminal. Dans la capture d’écran ci-dessous, vous pouvez voir qu’Hugo a reconstruit l’ensemble du site en 22 ms !

Reconstruction du site Hugo.
Reconstruction du site Hugo.

Si vous vous rendez sur votre site Hugo dans votre navigateur web, vous devriez voir le nouvel article.

Site Hugo avec un article.
Site Hugo avec un article.

Comment ajouter une page dans Hugo

Maintenant que nous avons ajouté un article à notre site Hugo, ajoutons une page. La plupart des systèmes de gestion de contenu, y compris WordPress, font la distinction entre les articles et les pages. En général, un article est un élément de contenu daté, tandis qu’une page est constituée d’un contenu permanent ou statique.

Pour créer une page, nous avons d’abord besoin d’une section de contenu page. Pour cela, créez un répertoire nommé pages dans le répertoire content d’Hugo. Ensuite, utilisez la commande ci-dessous pour ajouter une nouvelle page « À propos » à votre site :

hugo new pages/about.md

Remarquez que la convention de dénomination des pages diffère de celle des articles. Contrairement aux articles, les pages ne sont pas liées à une date spécifique, il est donc inutile d’inclure la date de création dans le nom du fichier.

Maintenant, ajoutons du texte à la page « À propos » :

Page À propos dans Hugo.
Page À propos dans Hugo.

À ce stade, vous devriez voir la page À propos dans votre navigateur web :

Page À propos dans le navigateur web.
Page À propos dans le navigateur web.

Maintenant que nous avons deux sections de contenu – les articles et les pages – voyons comment apporter quelques personnalisations au site, comme modifier le titre et la description, ajouter la page À propos au menu de la colonne latérale, changer le format des permaliens et supprimer des pages du flux d’articles.

Comment modifier le titre et la description du site

La méthode exacte pour modifier le titre et la description du site dépend de la configuration de votre site et/ou du thème actif. Dans le cas du thème Hyde, le titre et la description du site peuvent être modifiés dans le fichier de configuration Hugo (config.toml).

Nous le savons grâce au code de thème suivant qui rend la colonne latérale :

<aside class="sidebar">

<div class="container sidebar-sticky">

<div class="sidebar-about">

<a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>

<p class="lead">

{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

</p>

</div>

<nav>

<ul class="sidebar-nav">

<li><a href="{{ .Site.BaseURL }}">Home</a> </li>

{{ range .Site.Menus.main -}}

<li><a href="{{.URL}}"> {{ .Name }} </a></li>

{{- end }}

</ul>

</nav>

<p>{{ with .Site.Params.copyright }}{{.}}{{ else }}© {{ now.Format "2006"}}. All rights reserved. {{end}}</p>

</div>

</aside>

Les deux parties sur lesquelles il faut se concentrer sont :

{{ .Site.Title }}

Et…

{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

{{ }} fait partie du moteur de templating d’Hugo et permet de générer dynamiquement des données dans les pages rendues. Par exemple, {{ .Site.Title }} demande à Hugo de vérifier le fichier config.toml et de récupérer la valeur associée à la clé Title.

Comme la configuration par défaut d’Hugo utilise My New Hugo Site comme titre de site, c’est ce que la colonne latérale affiche. Si nous changeons le titre du site dans config.toml pour quelque chose d’autre, la modification se reflétera également sur l’interface publique.

Allons-y et changeons le paramètre de titre dans config.toml de My New Hugo Site à Kinsta’s Hugo Site.

Changer le titre du site dans Hugo.
Changer le titre du site dans Hugo.

En passant à la description du site, vous pouvez voir que le moteur de templating d’Hugo prend en charge la logique conditionnelle. Traduit en language simple, le code ci-dessous demande à Hugo de vérifier si une valeur Params est attribuée à la clé de description dans le fichier config.toml. Si ce n’est pas le cas, voici une chaîne par défaut à utiliser à la place.

{{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Comme nous n’avons pas de description configurée dans le fichier config.toml, Hugo affiche par défaut « An elegant open source and mobile-first theme for Hugo made by @mdo. Originaly made for Jekyll ». »

Mettons maintenant à jour notre fichier config.toml :

baseURL = "http://example.org/"

languageCode = "en-us"

title = "Kinsta's Hugo Site"

theme = "hyde"

À :

baseURL = "http://example.org/"

languageCode = "en-us"

title = "Kinsta's Hugo Site"

theme = "hyde"

[params]

description = "Kinsta is a premium managed WordPress hosting company."

Comme prévu, les changements sont maintenant aussi visibles sur l’interface publique :

Changer la description du site Hugo.
Changer la description du site Hugo.

Comment supprimer des pages du flux des articles

Sur la plupart des blogs, il est courant que le flux des articles sur la page d’accueil n’affiche que les articles. Par défaut, le thème Hyde inclut tous les fichiers de contenu dans le flux des articles. Pour modifier ce comportement, vous devez modifier la fonction range dans le modèle index.html, qui génère la page d’accueil.

La fonction range d’Hugo itère sur un ensemble défini d’articles et fait ensuite quelque chose avec les données. Par défaut, le modèle index.html du thème Hyde passe par .Site.RegularPages et filtre les données telles que le permalien, le titre de l’article et le résumé de l’article avant de rendre le HTML.

Comme .Site.RegularPages inclut toutes les pages régulières de Hugo, y compris les articles et les pages, la page « À propos » est rendue. En remplaçant les éléments de range par .Site.RegularPages "Section" "posts", nous pouvons demander à Hugo de ne filtrer que les pages normales de la section posts – les fichiers de contenu du répertoire posts que nous avons créé plus tôt.

Effectuons ce changement maintenant en modifiant le modèle de ceci :

{{ define "main" -}}

<div class="posts">

{{- range .Site.RegularPages -}}

<article class="post">

<h1 class="post-title">

<a href="{{ .Permalink }}">{{ .Title }}</a>

</h1>

<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>

{{ .Summary }}

{{ if .Truncated }}

<div class="read-more-link">

<a href="{{ .RelPermalink }}">Read More…</a>

</div>

{{ end }}

</article>

{{- end }}

</div>

{{- end }}

à ceci :

{{ define "main" -}}

<div class="posts">

{{- range where .Site.RegularPages "Section" "posts" -}}

<article class="post">

<h1 class="post-title">

<a href="{{ .Permalink }}">{{ .Title }}</a>

</h1>

<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>

{{ .Summary }}

{{ if .Truncated }}

<div class="read-more-link">

<a href="{{ .RelPermalink }}">Read More…</a>

</div>

{{ end }}

</article>

{{- end }}

</div>

{{- end }}

Après avoir effectué cette modification, la page d’accueil n’affichera que des articles comme ci-dessous :

Afficher uniquement les articles sur la page d'accueil.
Afficher uniquement les articles sur la page d’accueil.

Comment utiliser Partials dans Hugo

L’une des fonctions de modélisation les plus puissantes d’Hugo sont les partials – des modèles HTML intégrés dans un autre modèle HTML. Les partials permettent de réutiliser le code dans différents fichiers de modèles sans avoir à gérer le code dans chaque fichier.

Par exemple, il est courant de voir différentes sections de page (en-tête, pied de page, etc.) dans leurs propres fichiers partials, qui sont ensuite appelés dans le fichier de modèle baseof.html d’un thème.

Dans le fichier baseof.html du thème Ananke, vous pouvez voir un exemple de fichier partial à la ligne 18 – {{ partial "site-style.html" . }}.

Dans ce cas, {{ partial "site-style.html" . }} indique à Hugo de remplacer le contenu de la ligne 18 par le fichier site-style.html dans le répertoire /layouts/partials. Si nous allons dans le répertoire /partials/site-style.html, nous voyons le code suivant:

{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}

<link rel="stylesheet" href="{{ .RelPermalink }}" >

{{ end }}

{{ range site.Params.custom_css }}

{{ with partialCached "func/style/GetResource" . . }}{{ else }}

<link rel="stylesheet" href="{{ relURL (.) }}">

{{ end }}

{{ end }}

En déchargeant ce code dans un fichier séparé, le fichier modèle baseof.html peut rester organisé et facile à lire. Si les partials ne sont pas nécessaires, surtout pour les projets de base, ils sont très utiles pour les projets plus importants avec des fonctionnalités plus complexes.

Comment utiliser les codes courts dans Hugo

Les codes courts d’Hugo sont similaires aux partials dans la mesure où ils permettent de réutiliser le code sur une variété de pages. Les codes courts sont des fichiers HTML qui résident dans le répertoire /layouts/shortcodes. La principale différence est que les partiels s’appliquent aux modèles HTML, tandis que les codes courts s’appliquent aux pages de contenu Markdown.

Chez Hugo, les codes courts vous permettent de développer des modules de fonctionnalité que vous pouvez utiliser dans les pages de votre site sans avoir à gérer les changements de code pour chaque page.

Si vous tenez un blog, il y a de fortes chances que vous deviez parcourir le corps du contenu de vos articles pour mettre à jour les références à l’année en cours. Selon le nombre d’articles que tu avez sur votre site, cette tâche peut prendre beaucoup de temps !

En utilisant un code court Hugo dans vos fichiers de contenu, vous n’aurez plus jamais à vous soucier de la mise à jour des références de l’année !

Commençons par créer un code court dans /layouts/shortcodes/current_year.html avec le contenu ci-dessous :

{{ now.Format "2006" }}

Les codes courts peuvent être intégrés dans les articles avec cette syntaxe – {{< shortcode_name >}}. Dans notre cas, nous pouvons appeler le code court current_year.html avec {{< shortcode_name >}} comme suit :

---

title: "2021 08 30 a Sample Post"

date: 2021-08-30T13:44:28+09:00

draft: true

---

This post was created in the year {{< current_year >}}.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu.

Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Si vous consultez l’article dans le navigateur web, vous devriez voir l’année en cours dans la première ligne de l’article comme ci-dessous :

Utiliser un code court Hugo pour générer automatiquement l'année en cours.
Utiliser un code court Hugo pour générer automatiquement l’année en cours.

Comment ajouter des images à un article dans Hugo

Contrairement à WordPress et à d’autres systèmes de gestion de contenu à part entière, Hugo ne comprend pas de système de glisser-déposer pour gérer les images. Ainsi, la conception d’un système de gestion des images est déchargée sur l’utilisateur final.

Bien que Hugo n’ait pas de méthode standardisée pour gérer les images, une méthode populaire consiste à stocker les images dans le répertoire /static et à les référencer dans les articles et les pages à l’aide d’un code court. Voyons comment vous pouvez organiser des images dans Hugo.

La première chose à faire est de créer une structure organisationnelle pour notre bibliothèque d’images. Bien que cela semble complexe, il suffit de créer quelques répertoires supplémentaires dans le répertoire /static.

Commençons par créer un répertoire uploads dans /static. Dans le répertoire uploads, créez un répertoire nommé 2021 pour contenir toutes les images téléversées en 2021.

Gestion des images dans Hugo.
Gestion des images dans Hugo.

Ensuite, ajoutons deux images(blue1.jpg et blue2.jpg) dans le répertoire 2021.

Ajout d'images au répertoire « 2021 ».
Ajout d’images au répertoire « 2021 ».

En HTML, les images sont affichées à l’aide de la balise <img>. Par exemple, pour afficher blue1.jpg, nous pouvons utiliser le HTML ci-dessous :

<img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Bien qu’il soit possible d’ajouter ce HTML directement au fichier de contenu Markdown, il est préférable de créer un code court que vous pouvez utiliser pour afficher n’importe quelle image du répertoire uploads. De cette façon, si vous devez un jour mettre à jour la balise img, vous pouvez modifier le modèle de code court sans modifier chaque instance de la balise img.

Pour créer le modèle de code court, créez un nouveau fichier à /layouts/shortcodes/img.html avec le contenu ci-dessous :

<img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

Ensuite, ajoutez le code court ci-dessous à un article de blog :

{{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

Dans le modèle de code court, {{ .Get "src" }} et {{ .Get "alt" }} indiquent à Hugo de récupérer le contenu des paramètres src< et alt< lorsqu’il appelle un code court.

Maintenant, si vous actualisez l’article de blog, vous devriez voir l’image comme ci-dessous :

Code court d'image dans Hugo.
Code court d’image dans Hugo.

Comment déployer un site Hugo

Jusqu’ici, vous avez appris à installer Hugo, à créer un site, à ajouter un thème, à effectuer des modifications de base dans les fichiers de configuration et à étendre les fonctionnalités de votre site avec des partials et des codes courts. À ce stade, vous devriez avoir un site fonctionnel qui est prêt à être déployé en ligne.

Comme Hugo est un générateur de sites statiques, vous pouvez déployer le HTML, le CSS et le JS qu’il génère n’importe où avec un serveur web. Comme les exigences techniques pour servir des sites statiques sont si faibles, vous pouvez les héberger gratuitement chez un grand nombre de fournisseurs comme Netlify, Vercel, Cloudflare Pages, etc.

Auparavant, nous avons utilisé hugo server -D pour faire tourner un serveur de développement local afin de prévisualiser les modifications apportées à notre site en temps réel. Pour générer le site dans son intégralité, nous pouvons utiliser la commande hugo dans le répertoire racine de notre projet. Une fois la génération du site terminée, vous devriez voir un nouveau répertoire public dans votre répertoire de projet. À l’intérieur de ce répertoire, vous trouverez tous les fichiers qui doivent être téléversés sur un serveur ou un service de stockage dans le cloud comme Amazon S3.

Générez localement votre ton site Hugo.
Générez localement votre ton site Hugo.

Générer votre site localement et le téléverser manuellement sur Amazon S3 ou un serveur exécutant Nginx est une façon de déployer un site généré statiquement. Cependant, ce n’est pas la plus efficace car elle te demande de téléverser manuellement de nouveaux fichiers à chaque fois que vous faîtes une modification.

Au lieu de cela, une meilleure option est de lier votre répertoire de projet Hugo à un dépôt GitHub et de lier le dépôt GitHub à un service de déploiement automatisé comme Netlify. Avec cette configuration, vous pouvez modifier votre site, pousser les modifications sur GitHub, et déclencher une nouvelle construction et un déploiement sur Netlify sans aucune intervention manuelle. Maintenant, voyons comment faire tout cela !

Comment téléverser votre projet Hugo sur GitHub

Tout d’abord, vous devez créer un dépôt GitHub pour votre projet. Pour cela, créez un compte GitHub (si vous n’en avez pas déjà un) et téléchargez l’application de bureau officielle GitHub. Après avoir installé l’application GitHub, cliquez sur Fichier dans la barre de menu et sélectionnez Nouveau dépot. Donnez au dépot le nom de votre choix, laissez les autres options dans leur état par défaut pour l’instant, et cliquez sur Créer un dépot.

Créer un dépot GitHub.
Créer un dépot GitHub.

Par défaut (sur macOS), l’application GitHub crée de nouveaux dépôts dans /Users/username/Documents/GitHub. Comme nous avons nommé notre dépôt my-hugo-site, notre dépôt se trouve dans /Users/brianli/Documents/GitHub/my-hugo-site.

Ensuite, déplacez tous les fichiers de ton répertoire de projet original dans le nouveau répertoire du dépôt GitHub. Veillez à supprimer le répertoire public car nous n’avons pas besoin de téléverser ce répertoire sur GitHub.

Copier le projet dans le répertoire du dépot GitHub.
Copier le projet dans le répertoire du dépot GitHub.

Si vous retournez dans l’application GitHub, vous devriez maintenant voir une liste des fichiers modifiés. Pour téléverser le dépot sur GitHub, ajoutez un résumé, clique sur Commit to main et cliquez sur Publish Repository dans le coin supérieur droit.

Engager le dépot et le téléverser sur GitHub.
Engager le dépot et le téléverser sur GitHub.

Par défaut, l’option « Garder ce code privé » est cochée. Si vous voulez que votre code soit open source et accessible au public, n’hésitez pas à la décocher. Enfin, cliquez une fois de plus sur Publier le dépot.

Publier votre dépot GitHub.
Publier votre dépot GitHub.

Maintenant, si vous allez sur GitHub, vous devriez voir votre dépot en ligne comme ceci :

Dépôt du projet Hugo sur GitHub.
Dépôt du projet Hugo sur GitHub.

Comment lier le dépôt GitHub à Netlify

Si vous n’avez pas encore de compte Netlify, inscrivez-vous pour en avoir un ici. Pour lier un dépôt GitHub à Netlify, cliquez sur Nouveau site depuis Git dans le tableau de bord de Netlify.

Nouveau site depuis Git sur Netlify.
Nouveau site depuis Git sur Netlify.

Sous Déploiement continu, sélectionnez l’option GitHub.

Sélectionnez « GitHub » pour le déploiement continu.
Sélectionnez « GitHub » pour le déploiement continu.

Ensuite, utilisez le champ de recherche pour trouver le dépôt de votre projet Hugo.

Trouvez votre dépôt de projet Hugo.
Trouvez votre dépôt de projet Hugo.

Ensuite, spécifiez les paramètres pour le déploiement continu. Comme Netlify peut détecter une configuration Hugo, les paramètres par défaut devraient fonctionner correctement pour un déploiement de base.

Au fur et à mesure que vous vous familiarisez avec Hugo, vous pourrez vous plonger dans les variables d’environnement, les commandes de construction personnalisées, et plus encore. Pour l’instant, définir la commande de construction sur hugo et le répertoire public sur public vous permettra de déployer un site Hugo simple. Après avoir spécifié la commande de construction et le répertoire public, cliquez sur Déployer le site.

Déployer un site Hugo sur Netlify.
Déployer un site Hugo sur Netlify.

Comme Hugo est un générateur de sites statiques très rapide, le déploiement ne devrait prendre que quelques secondes pour un site de base. Une fois le déploiement terminé, vous pourrez voir une URL de staging dans le tableau de bord de Netlify. Cliquez sur l’URL pour voir le site déployé.

URL de staging Netlify.
URL de staging Netlify.

Voici notre site Hugo sur Netlify. Comme vous pouvez le voir, il est identique au site sur notre environnement local:

Site Hugo sur Netlify.
Site Hugo sur Netlify.

À ce stade, vous pouvez configurer un domaine et un certificat SSL personnalisés pour votre site hébergé sur Netlify. Pour cela, nous vous recommandons de vous référer à la documentation officielle de Netlify.

Comme nous avons lié Netlify à GitHub, un nouveau commit dans le repo GitHub du projet Hugo déclenchera automatiquement un nouveau déploiement sur Netlify !

Prêt à construire un site statique en un temps record ? ⏱ Commencez avec Hugo ⚡️Click to Tweet

Résumé

Hugo est l’un des générateurs de sites statiques les plus populaires au monde, et pour une bonne raison. Non seulement il a un traitement de construction super rapide, mais il est également livré avec de puissantes capacités de templating qui prennent en charge les partials et les codes courts.

Dans ce tutoriel, vous avez appris à configurer Hugo, à créer un nouveau projet, à ajouter des fichiers de contenu, à modifier des fichiers de thème et à déployer un site statique fini. Nous vous recommandons de consulter la documentation officielle d’Hugo pour en savoir plus sur Hugo et ses fonctionnalités plus avancées, comme les fonctions personnalisées, les fronts et les buildpacks CSS/JS.

Que pensez-vous d’Hugo et des autres générateurs de sites statiques ? Faîtes-nous en part dans les commentaires ci-dessous !


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 35 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.