Comment créer un site statique ultra rapide avec Hugo

Hugo est un générateur de site statique (SSG) écrit en Go (alias Golang), un langage de programmation compilé hautes performances 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 au monde pour la création de sites Web".

Dans cet article, nous examinerons 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 qu'Hugo ? Et pourquoi est-il populaire ?

Steve Francia a initialement développé le générateur de site statique Hugo en 2013, et Bjrn 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 visualisé et amélioré par n'importe qui.

En tant que générateur de site statique, Hugo prend des fichiers de contenu Markdown, les exécute à travers des modèles de thème et crache des fichiers HTML que vous pouvez facilement déployer en ligne - et tout cela est extrêmement rapide.

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, il a été l'un des premiers générateurs de sites statiques à être largement adopté. Gatsby est un autre SSG populaire qui convient bien au développement de sites déployables de manière statique et dotés de fonctionnalités dynamiques.

Alors, avec autant de SSG, qu'est-ce qui distingue Hugo ?

Hugo est rapide

En termes de performances brutes, Hugo est le meilleur générateur de sites statiques au monde. Comparé à Jekyll, Hugo s'est avéré 35 fois plus rapide par Forestry. 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 également rapide à installer.

Hugo est livré en tant qu'exécutable autonome, contrairement à Jekyll, Gatsby et d'autres SSG nécessitant l'installation de dépendances avec un gestionnaire de packages. 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 dans Hugo

Dans le jargon SSG, la « création de modèles » fait référence au processus d'ajout d'espaces réservés 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 Hugo HTML, il est courant de voir le {{ .Title }} enveloppé dans des balises H1 comme suit :

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

Au moment de la construction, Hugo saisira automatiquement le titre dans un fichier de contenu et insérera le titre entre les deux balises <h1> . Hugo a une variété de variables de modèles 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 html/template et text/template intégrées de Go. Cela permet de réduire le gonflement des applications car Hugo n'a pas besoin d'installer de bibliothèques tierces pour la création de modèles.

Voici un exemple de modèle de page d'accueil index.html du thème populaire Ananke. Comme vous pouvez le voir, cela ressemble à un fichier HTML standard avec du code de modèle supplémentaire :

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

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 packages pour l'installation et la mise à jour des applications. Si vous n'avez pas déjà 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 Homebrew 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 packages Chocolatey ou Scoop. Étant donné que les instructions d'installation de Chocolatey et Scoop sont un peu plus complexes que 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 (selon votre gestionnaire de packages) :

 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 Terminal doit afficher des informations concernant la version actuellement installée de Hugo comme suit :

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

Commandes Hugo et configuration

Avant de 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 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
• hugo env - affiche la version Hugo et les informations sur l'environnement
• 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 différents types de contenu
• hugo mod - donne accès à divers assistants de module
• 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 Hugo actuelle

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

Le fichier de configuration Hugo

Le fichier de configuration d'Hugo prend en charge trois formats : YAML, TOML et JSON. De même, le fichier de configuration 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 de publications par page) est 5 .

Hugo propose des dizaines d'options de configuration, que vous pouvez toutes explorer dans la documentation officielle d'Hugo. Si vous devez apporter des modifications à la configuration globale lors du développement d'un site Hugo, il est probable que vous deviez modifier ce fichier de configuration.

Comment créer un site Hugo

Maintenant que nous avons expliqué comment installer et utiliser la 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, accédez au dossier du site et vous devriez voir les fichiers et dossiers suivants : fichier config.toml , dossier d' archétypes , dossier de contenu , dossier de mises en page, dossier de thèmes , dossier de données et dossier statique . Passons rapidement en revue ce qu'est chacun de ces fichiers et dossiers.

Fichier config.toml de Hugo

Comme nous l'avons souligné ci-dessus, le fichier de configuration principal d'Hugo contient les paramètres globaux de votre site.

Dossier Archétypes d'Hugo

Le dossier des archétypes 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 sur 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 de podcast, vous pouvez ensuite utiliser la commande ci-dessous pour créer une nouvelle publication :

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

Maintenant, si vous ouvrez le message 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 auriez à spécifier manuellement les paramètres liminaires pour chaque nouvelle publication que vous créez. Bien que les archétypes puissent sembler complexes et inutiles au début, ils peuvent finir par vous faire gagner beaucoup de temps à long terme.

Dossier de contenu d'Hugo

Le dossier de contenu est l'endroit où se trouve votre contenu de publication réel. 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 pour les publications, vous pouvez utiliser le dossier de contenu pour organiser davantage le contenu des publications.

Hugo traite chaque répertoire de niveau supérieur du dossier de contenu comme une section de contenu. Les sections de contenu dans Hugo sont similaires aux types de publication personnalisés dans WordPress. Par exemple, si votre site contient des publications, des pages et des podcasts, votre dossier de contenu contiendrait des répertoires de publications , de pages et de podcasts où vivraient les fichiers de contenu pour ces différents types de publication.

Dossier de mise en page d'Hugo

Le dossier layouts contient des fichiers HTML qui définissent la structure de votre site. Dans certains cas, vous pouvez voir un site Hugo sans dossier de mise en page car il n'a pas besoin de se trouver dans le répertoire racine du projet et peut résider dans un dossier de thème à la place.

Semblables aux thèmes WordPress qui utilisent PHP pour la création de modèles, les modèles Hugo consistent en HTML de base avec des modèles dynamiques supplémentaires alimentés par les bibliothèques html/template et text/template intégrées de Golang. Les différents fichiers de modèles HTML requis pour générer le balisage HTML de votre site se trouvent dans le dossier layouts .

Dossier des thèmes d'Hugo

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

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

Dossier de données Hugo

Le dossier de données d'Hugo est l'endroit où vous pouvez stocker des données supplémentaires (au format JSON, YAML ou TOML) nécessaires à la génération des pages de votre site. Les fichiers de données sont utiles pour les ensembles de données volumineux qui peuvent être fastidieux à 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 USD 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 dossier de données et les remplir avec les informations nécessaires.

Dossier statique Hugo

Le dossier statique d'Hugo est l'endroit où vous stockez les actifs statiques qui ne nécessitent aucun traitement supplémentaire. Le dossier statique est généralement l'endroit où les utilisateurs Hugo stockent des images, des polices, des fichiers de vérification DNS, etc. Lorsqu'un site Hugo est généré et enregistré dans un dossier pour un déploiement facile, tous les fichiers du dossier statique 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 lors du développement du site. Dans Hugo, les fichiers JavaScript et CSS sont généralement stockés dans le dossier du thème 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édéfini est un excellent moyen de démarrer avec Hugo. Les thèmes Hugo sont de toutes formes et tailles, et beaucoup d'entre eux sont disponibles gratuitement sur le référentiel officiel de thèmes Hugo. Allons-y et installons le thème populaire Hyde sur notre site Hugo.

Tout d'abord, accédez au dossier de 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 des thèmes 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é d'Hugo pour afficher le site dans votre navigateur Web.

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 afficher votre site localement.

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 sur http://localhost:1313/ :

Si vous visitez 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 surveillera les modifications et reconstruira le site automatiquement. Étant donné que la vitesse de construction d'Hugo est si rapide, les mises à jour de votre site peuvent être vues en temps quasi 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 post dans Hugo.

Comment ajouter du contenu à un site Hugo

Ajouter du 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, vous êtes censé gérer et organiser les choses comme bon vous semble.

En d'autres termes, il n'y a pas de manière explicite et « correcte » de faire de la gestion de contenu dans Hugo. Nous partagerons une méthode d'ajout et de gestion de contenu dans cette section, mais n'hésitez pas à changer les choses à mesure que vous vous familiarisez avec Hugo.

Sections de contenu dans Hugo

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

Par exemple, si vous avez un dossier de section de contenu de blog , vous pouvez l'utiliser pour stocker tous vos articles de blog et afficher un modèle de page spécifique qui ne s'applique qu'aux articles de blog.

Comment ajouter des messages dans Hugo

Dans cet esprit, créons une section de contenu pour les articles de blog et ajoutons quelques éléments de contenu. Créez un nouveau dossier nommé posts dans le dossier de contenu de votre projet - il s'agit de la section de contenu.

Créons une autre couche organisationnelle dans le dossier posts en créant un dossier 2021 . À ce stade, votre répertoire de contenu 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 dossier content/posts/2021 , créez un nouveau fichier qui se termine par .md (l'extension de fichier Markdown). Vous pouvez nommer le fichier comme vous le souhaitez, 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 également utiliser Hugo CLI pour créer un nouveau message avec la commande ci-dessous (assurez-vous d'exécuter la commande à partir de votre répertoire de projet) :

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

Remarquez comment le dossier de contenu est absent du chemin ci-dessus. En effet, Hugo suppose que tous les fichiers de contenu iront dans le dossier de contenu 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, sont appelées « avant-propos ». Les pages liminaires générées automatiquement sont l'un des principaux avantages de l'utilisation de la CLI Hugo. L'avant-propos est l'endroit où les données uniques d'un article (nom de l'article, données, état du brouillon, balises, catégories, etc.) sont stockées. Le format par défaut de la page liminaire peut être configuré section par section à l'aide d'archétypes.

Ajoutons maintenant du texte au message. Lorsque vous rédigez un article, assurez-vous toujours que votre contenu se trouve sous la première ligne, comme ceci :

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

Si vous visitez votre site Hugo dans votre navigateur Web, vous devriez voir le nouveau message.

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 publications et les pages. En règle générale, un article est un 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 de page . Pour ce faire, créez un dossier nommé pages dans le dossier de contenu de Hugo. Ensuite, utilisez la commande ci-dessous pour ajouter une nouvelle page "À propos" à votre site :

 hugo new pages/about.md

Remarquez comment la convention de dénomination des pages diffère des publications. Contrairement aux publications, les pages ne sont pas liées à une date spécifique, il n'est donc pas nécessaire d'inclure la date de création dans le nom du fichier.

Ajoutons maintenant du texte à la page "À propos" :

À ce stade, vous devriez voir la page À propos de votre navigateur Web :

Maintenant que nous avons deux sections de contenu - articles et pages - voyons comment apporter quelques personnalisations au site, telles que la modification du titre et de la description, l'ajout de la page À propos au menu de la barre latérale, la modification du format des permaliens et la suppression pages du flux de publication.

Comment changer le titre et la description du site

La méthode exacte de modification du titre et de 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 affiche la barre 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 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}}

Les guidons {{ }} font partie du moteur de templates d'Hugo et permettent des données générées dynamiquement dans les pages rendues. Par exemple, {{ .Site.Title }} demande à Hugo de vérifier le fichier config.toml et de récupérer la valeur mappée à la clé Title .

Étant donné que la configuration par défaut d'Hugo utilise Mon nouveau site Hugo comme titre du site, c'est ce que montre la barre latérale. Si nous changeons le titre du site dans config.toml en quelque chose d'autre, le changement se répercutera également sur l'interface.

Continuons et changeons le paramètre de titre dans le config.toml de Mon nouveau site Hugo au site Hugo de Kinsta .

En passant à la description du site, vous pouvez voir que le moteur de template d'Hugo prend en charge la logique conditionnelle. Traduit en anglais 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 . Sinon, 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}}

Étant donné que nous n'avons pas de description configurée dans le fichier config.toml , Hugo affiche par défaut "Un élégant thème open source et mobile pour Hugo créé par @mdo. Conçu à l'origine pour Jekyll.

Mettons maintenant à jour notre fichier config.toml à partir de :

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

Pour:

 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 modifications sont désormais également visibles sur le frontend :

Comment supprimer des pages du fil de publication

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

La fonction de range de Hugo parcourt un ensemble défini d'éléments, puis fait quelque chose avec les données. Par défaut, le modèle index.html du thème Hyde s'étend sur .Site.RegularPages et filtre les données telles que le lien permanent, le titre de la publication et le résumé de la publication avant de rendre le HTML.

Étant donné que .Site.RegularPages inclut toutes les pages régulières sur Hugo, y compris les publications et les pages, la page "À propos" est rendue. En changeant les éléments de la range en .Site.RegularPages "Section" "posts" , nous pouvons demander à Hugo de ne filtrer que les pages régulières dans la section des messages - les fichiers de contenu dans le dossier des messages que nous avons créé précédemment.

Apportons ce changement maintenant en modifiant le modèle à partir 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 }}

Pour ça:

 {{ 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é ce changement, la page d'accueil n'affichera que des messages comme celui-ci :

Comment utiliser les partiels dans Hugo

L'une des fonctionnalités de création de modèles les plus puissantes d'Hugo est les partiels - des modèles HTML intégrés dans un autre modèle HTML. Les partiels permettent la réutilisation du code dans différents fichiers de modèle sans 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 fichiers partiels séparés, 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 partial sur la ligne 18 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

Dans ce cas, {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} demande à Hugo de remplacer le contenu de la ligne 18 par site-style.html dans le dossier /layouts/partials . Si nous naviguons vers le /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 de modèle baseof.html peut rester organisé et facile à lire. Bien que les partiels ne soient pas nécessaires, en particulier pour les projets de base, ils sont utiles pour les projets plus importants avec des fonctionnalités plus complexes.

Comment utiliser les codes abrégés dans Hugo

Les shortcodes Hugo sont similaires aux partiels en ce sens qu'ils permettent la réutilisation du code sur une variété de pages. Les shortcodes sont des fichiers HTML qui résident dans le dossier /layouts/shortcodes . La principale différence est que les partiels s'appliquent aux modèles HTML, tandis que les codes abrégés s'appliquent aux pages de contenu Markdown.

Dans Hugo, les shortcodes vous permettent de développer des modules de fonctionnalités que vous pouvez utiliser dans les pages de votre site sans gérer les changements de code pour chaque page.

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

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

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

 {{ now.Format "2006" }}

Les codes courts peuvent être intégrés dans les publications avec cette syntaxe - {{< shortcode_name >}} . Dans notre cas, nous pouvons appeler le shortcode current_year.html avec {{< shortcode_name >}} comme ceci :

 --- 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 affichez le message dans le navigateur Web, vous devriez voir l'année en cours dans la première ligne du message comme ceci :

Comment ajouter des images à un message dans Hugo

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

Bien qu'Hugo n'ait pas de méthode standardisée pour gérer les images, une méthode populaire consiste à stocker les images dans le dossier /static et à les référencer dans les publications et les pages à l'aide d'un shortcode. Voyons comment vous pouvez faire une organisation d'image de base dans Hugo.

La première chose que nous devrons faire est de créer une structure organisationnelle pour notre bibliothèque d'images. Bien que cela semble complexe, tout ce qui est requis est la création de quelques répertoires supplémentaires dans le dossier /static .

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

Ensuite, ajoutons deux images ( blue1.jpg et blue2.jpg ) dans le dossier 2021 .

En HTML, les images sont affichées à l'aide de la <img> . Par exemple, pour afficher blue1.jpg , on peut 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 code HTML directement au fichier de contenu Markdown, il est préférable de créer un shortcode que vous pouvez utiliser pour afficher n'importe quelle image du dossier de téléchargement. De cette façon, si jamais vous avez besoin de mettre à jour la balise img , vous pouvez modifier le modèle de shortcode sans modifier chaque instance de la balise img .

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

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

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

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

Dans le modèle de shortcode, {{ .Get "src" }} et {{ .Get "alt" }} demandent à Hugo de récupérer le contenu des paramètres src< et alt< lors de l'appel d'un shortcode.

Maintenant, si vous rechargez le billet de blog, vous devriez voir l'image comme suit :

Comment déployer un site Hugo

Jusqu'à cet article, vous avez appris à installer Hugo, à créer un site, à ajouter un thème, à apporter des modifications de base aux fichiers de configuration et à étendre les fonctionnalités de votre site avec des partials et des shortcodes. À ce stade, vous devriez avoir un site fonctionnel prêt à être déployé en ligne.

Comme Hugo est un générateur de site statique, vous pouvez déployer le HTML, le CSS et le JS qu'il génère n'importe où avec un serveur Web. Étant donné que les exigences techniques pour servir des sites statiques sont si faibles, vous pouvez les héberger gratuitement sur un large éventail de fournisseurs tels que Netlify, Vercel, Cloudflare Pages, etc.

Auparavant, nous utilisions le hugo server -D pour lancer 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 dossier public dans votre répertoire de projet. Dans ce dossier, vous trouverez tous les fichiers qui doivent être téléchargés sur un serveur ou un service de stockage en nuage comme Amazon S3.

Générer votre site localement et le télécharger manuellement sur Amazon S3 ou un serveur exécutant Nginx est un moyen de déployer un site généré de manière statique. Cependant, ce n'est pas le plus efficace car il vous oblige à télécharger manuellement de nouveaux fichiers à chaque fois que vous apportez une modification.

Au lieu de cela, une meilleure option consiste à lier votre dossier de projet Hugo à un référentiel GitHub et à lier le référentiel GitHub à un service de déploiement automatisé comme Netlify. Avec cette configuration, vous pouvez modifier votre site, envoyer les modifications à GitHub et déclencher une nouvelle version et un déploiement sur Netlify sans aucune intervention manuelle. Voyons maintenant comment faire tout cela !

Comment télécharger votre projet Hugo sur GitHub

Tout d'abord, vous devrez créer un référentiel GitHub pour votre projet. Pour ce faire, 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 menus et sélectionnez Nouveau référentiel . Donnez au référentiel le nom de votre choix, laissez les autres options dans leur état par défaut pour le moment, puis cliquez sur Créer un référentiel .

Par défaut (sur macOS), l'application GitHub crée de nouveaux référentiels dans /Users/username/Documents/GitHub . Depuis que nous avons nommé notre référentiel my-hugo-site , notre référentiel se trouve à /Users/brianli/Documents/GitHub/my-hugo-site .

Ensuite, déplacez tous les fichiers de votre dossier de projet d'origine dans le nouveau dossier de référentiel GitHub. Assurez-vous de supprimer le dossier public car nous n'avons pas besoin de télécharger ce dossier sur GitHub.

Si vous revenez à l'application GitHub, vous devriez maintenant voir une liste des fichiers modifiés. Pour télécharger le référentiel sur GitHub, ajoutez un résumé, cliquez sur Commit to main , puis cliquez sur Publish Repository dans le coin supérieur droit.

Par défaut, l'option "Garder ce code privé" est cochée. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Hugo étant un générateur de sites statiques si rapide, le déploiement ne devrait prendre que quelques secondes pour un site basique. Une fois le déploiement terminé, vous pourrez voir une URL intermédiaire dans le tableau de bord Netlify. Cliquez sur l'URL pour afficher le site déployé.

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

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

Depuis que nous avons lié Netlify à GitHub, un nouveau commit sur le dépôt GitHub du projet Hugo déclenchera automatiquement un nouveau déploiement sur Netlify !

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 ultra rapide, mais il est également livré avec de puissantes capacités de création de modèles qui prennent en charge les partiels et les codes abrégés.

Dans ce didacticiel, 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 telles que les fonctions personnalisées, le front matter et les buildpacks CSS/JS.

Que pensez-vous d'Hugo et des autres générateurs de sites statiques ? Veuillez nous en informer dans les commentaires ci-dessous!