Hugo : créateur de sites simple et léger

Remplacez lancement-site.md ci-dessous par l’URI de votre premier article, en pensant bien à ajouter l’extension .md à la fin :

hugo new content posts/lancement-site.md

Hugo crée automatiquement un fichier markdown .md pré-paramétré dans le dossier posts.

Ouvrez le fichier nouvellement créé. Il devrait être similaire à celui-ci :

+++
title = 'Lancement Site'
date = 2023-12-19T19:35:26+01:00
draft = true
+++

Entre les +++ se trouvent les méta-données, le title de la page, la date de publication et son statut (brouillon ou publié). Par défaut, les nouveaux articles créés sont en brouillon.

Vous pouvez ajouter un contenu Markdown à la suite des derniers +++. Pour rappel, le format Markdown permet de créer des titres, sous-tires, termes en gras et en italique, blocs de code… uniquement en vous servant de caratères. Pour (re)découvrir la palette des possibilités, consultez le guide de Common Mark.

Voici un exemple d’ajout :

# Une nouvelle aventure démarre
Un **site** flambant neuf avec des fonctionnalités *sobres* mais efficaces,
[Pour en savoir plus, découvrez notre autre article technique](/posts/technique).

Par défaut, les brouillons d’articles ne seront pas compilés lors de la mise en production. Ce qui ne vous empêche pas de les consulter dans un environnement de développement.

Pour y parvenir, arrêtez le serveur lancé précédemment avec un Control + C. Puis relancez-le en y ajoutant un paramètre :

hugo server --buildDrafts

Le serveur se lance rapidement et affiche les statistiques :

| EN
-------------------+-----
Pages | 10
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 1
Sitemaps | 1
Cleaned | 0

Built in 45 ms

On obtient une page statique correspondant à notre article, ainsi que 10 pages liées générées automatiquement (sitemap, page d’erreurs, page de tags, catégories…).

Après avoir relancé le serveur, retournez sur votre site.

Notre premier article est visible en page d’accueil. Vous pourrez aussi remarquer à quel point le site se charge rapidement, même dans un environnement de développement.

Quant à notre article, le markdown a bien été reconnu par Hugo :

Ajout des images dans les articles

Pour intégrer une image d’illustration dans un article, il faut créer un dossier portant l’URI de l’article dans le dossier posts, puis y déplacer l’article .md en le renommant index.md. Lorsqu’on se rendra sur la page lancement-site, Hugo accédera au dossier lancement-site et récupérera le fichier index.md.

De cette manière, il vous suffit de transférer votre image dans le dossier de l’article, et de l’afficher grâce à cette ligne dans le fichier markdown pour le fichier create.png :

![Text alternatif](create.png)

CONSEIL : Pour un site léger, pensez à redimensionner vos images : 1920x1080 pour une image de couverture et 1280x720 pour une image secondaire. Convertissez et compressez-les dans un format léger comme .webp . Réalisez ces opérations avec un logiciel (au lieu d’un service Web) avant de l’intégrer sur votre site.

Compilation du site

Il suffit de lancer la commande hugo. Le site se génère rapidement, toujours avec les statistiques :

| EN
-------------------+-----
Pages | 11
Paginator pages | 0
Non-page files | 1
Static files | 1
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0

Total in 61 ms

Les fichiers créés se retrouvent dans le répertoire public, prêts à être envoyés - de préférence sur un CDN. Le site d’Hugo propose des tutoriels de déploiement sur plusieurs hébergeurs. Il n’y a pas vraiment de complexité sur la partie déploiement, contrairement à NodeJS, PHP, Java… on revient aux basiques du Web. C’est positif pour les performances, pour le budget et pour la planète.

La structure du site compilé est la suivante :

On y retrouve du CSS, du HTML, du XML pour le flux RSS et le sitemap.

NOTE : Pensez bien à passer vos articles de « brouillon » à « publié » (draft : false) pour qu’ils soient pris en compte dans la compilation. Modifiez également le base_url dans le fichier hugo.toml : si ce n’est pas fait, les fichiers de style ne seront pas chargés (par exemple).

Vous possédez maintenant toutes les clés pour démarrer un site léger et efficace.

Hugo contient davantage de fonctionnalités intéressantes : celles-ci vous permettent d’intégrer des modèles pour obtenir des visuels différents selon vos types de contenus, tronquer des articles pour donner envie de les lire, générer une table de matières…

Si vous avez besoin d'un framework léger permettant d'aller plus loin avec des composants Javascript, de la récupération de contenu par API...