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 ?
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 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 hugoComment 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 -confirmscoop install hugo-extendedComment vérifier que Hugo est correctement installé
Pour vérifier que Hugo a été correctement installé, exécutez la commande suivante :
hugo versionCette 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=unknownCommandes 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érificationhugo config– affiche la configuration d’un site Hugohugo convert– convertit le contenu en différents formatshugo deploy– déploie votre site vers un fournisseur de cloud computinghugo env– affiche les informations sur la version et l’environnement d’Hugohugo gen– donne accès à divers générateurshugo help– affiche des informations sur une commandehugo import– vous permet d’importer un site depuis un autre emplacementhugo list– affiche une liste de divers types de contenuhugo mod– permet d’accéder à divers modules d’aidehugo new– vous permet de créer du nouveau contenu pour votre sitehugo server– démarre un serveur de développement localhugo 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.
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
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, themes, data 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.mdMaintenant, 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.gitEnsuite, 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 -DHugo construira ensuite les pages de votre site et les rendra disponibles à l’adresse http://localhost:1313/:
Si vous vous rendez sur l’URL dans votre navigateur web, vous devriez voir votre site Hugo 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 :
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.mdRemarquez 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 :
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 !
Si vous vous rendez sur votre site Hugo dans votre navigateur web, vous devriez voir le nouvel 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.mdRemarquez 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 » :
À ce stade, vous devriez voir la page À propos dans votre 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.
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"To:
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 :
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 }}To this:
{{ 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 :
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
---
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 :
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.
Ensuite, ajoutons deux images (blue1.jpg et blue2.jpg) dans le 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 :
Comment déployer un site Hugo sur Kinsta
À ce stade, vous avez appris à installer Hugo, à créer un site, à ajouter un thème, à modifier les fichiers de configuration et à étendre les fonctionnalités de votre site avec des partiels et des codes courts. Vous devriez maintenant avoir un site fonctionnel prêt à être déployé en ligne.
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. Inside this folder, you’ll find all the files that need to be uploaded to a static server.
La meilleure option pour publier votre site statique est de pousser votre projet Hugo vers un dépôt Git et de le lier à l’hébergement de sites statiques de Kinsta. Actuellement, Kinsta est uniquement capable de construire des SSG basés sur Node.js, mais pour les SSG comme Hugo, il y a deux façons de contourner le problème :
- Installez la dépendance Hugo bin
- Utilisez CI/CD pour construire les fichiers statiques, puis les déployer sur Kinsta
Pour ce guide, utilisons la dépendance Hugo-bin. Pour cela, initialisez Node.js dans votre projet Hugo en utilisant la commande npm init -y dans le répertoire racine de votre projet Hugo.
Cela créera un fichier package.json de base. Ensuite, installez la dépendance développeur hugo-bin :
npm i -D hugo-binEnsuite, dans votre fichier package.json, ajoutez la commande script suivante :
"scripts": {
"build": "hugo",
"create": "hugo new",
"serve": "hugo server"
}Maintenant, vous pouvez pousser votre code vers votre dépot Git. Une fois le dépôt prêt, suivez les étapes ci-dessous pour déployer votre site statique sur Kinsta :
-
- Connectez-vous ou créez un compte pour voir votre tableau de bord MyKinsta.
- Autorisez Kinsta avec votre fournisseur Git.
- Cliquez sur Sites statiques dans la colonne latérale de gauche, puis sur Ajouter un site.
- Sélectionnez le dépôt et la branche à partir desquels vous souhaitez effectuer le déploiement.
- Attribuez un nom unique à votre site.
- Ajoutez les réglages de construction dans le format suivant :
- Commande de construction :
npm run build - Version de Node :
18.16.0 - Répertoire de publication :
public
- Commande de construction :
- Enfin, cliquez sur Créer un site.
Et c’est tout ! Vous avez maintenant un site en production, entièrement fonctionnel, créé avec Hugo.
Si vous avez coché l’option de déploiement automatique lors du déploiement de votre site, quand vous modifiez votre site et poussez les changements vers le dépôt Git, votre dépôt déclenchera automatiquement une nouvelle construction et un déploiement sur Kinsta sans aucune intervention manuelle.
Comme alternative à l’hébergement de site statique, vous pouvez opter pour le déploiement de votre site statique avec l’hébergement d’application de Kinsta, qui fournit une plus grande flexibilité d’hébergement, un plus large éventail d’avantages et l’accès à des fonctionnalités plus robustes. Par exemple, l’évolutivité, le déploiement personnalisé à l’aide d’un fichier Docker, et des statistiques complètes englobant des données en temps réel et historiques.
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 !
Laisser un commentaire