Le framework Hugo est un générateur de site statique, rapide et flexible. Un exemple de projet est disponible sur sourcehut : hugo-sandbox.
Fonctionnalités
Le contenu des pages est écrit en langage Markdown et la mise en page est définie dans des gabarits.
- content : contenu des pages en Markdown
- templates : gabarits de mise en page en HTML, XML…
- shortcodes : raccourcis d'insertion de gabarits personnalisés
- themes : thèmes complets
- i18n : traductions
- feeds : flux RSS/JSON
- commentaires, recherche, référencement SEO, analytics…
Gestion d'un projet
Pour plus d'explications, lire la documentation Hugo et la documentation du thème Congo.
Création
Installer au préalable GIT et Hugo.
pacman -S git hugo
Créer un nouveau projet.
hugo new site hugo-sandbox
cd hugo-sandbox
git init
Ajouter le thème Congo (plus de thèmes sur themes.gohugo.io).
git submodule add -b stable https://github.com/jpanther/congo.git themes/congo
echo "theme = 'congo'" >> hugo.toml
Mettre à jour le thème.
git submodule update --remote --merge
Ajout de contenu
Ajouter du contenu.
hugo new content posts/page.md
Faire un commit et un push des changements avec GIT.
Test
Lancer le serveur de test.
hugo server
Lancer le serveur en générant les contenus brouillons, expirés ou futurs.
hugo server -D --buildDrafts
hugo server -E --buildExpired
hugo server -F --buildFuture
Lancer le serveur en activant le rechargement complet du site en cas de modification d'un fichier.
hugo server --disableFastRender
Lancer le serveur en activant la navigation automatique vers le fichier modifié.
hugo server --navigateToChanged
Le site est disponible à l'adresse http://localhost:1313.
Publication
Génération du site (fichiers HTML, CSS, JavaScript, images…) dans le répertoire public.
hugo
Déploiement chez un hébergeur de site statique avec hut, scp, rsync, ftp…
hut pages publish -d nora.srht.site public
Structure
Documentation : directory structure.
La structure du projet est la suivante.
hugo-sandbox
├── archetypes <-- templates for new content
│ └── default.md
├── assets <-- global resources passed through an asset pipeline
├── config <-- site configuration
│ └── _default
│ └── hugo.toml
├── content <-- markup files and page resources
├── data <-- data files
├── i18n <-- translation tables
├── layouts <-- templates
├── public <-- published website
├── resources <-- cached output from asset pipelines
├── static <-- global resources
├── themes <-- themes
└── hugo.toml <-- site configuration
Configuration
Documentation : configuration et markup configuration.
La configuration est située dans le fichier hugo.toml ou dans les fichiers config/_default/*.toml.
baseURL = 'https://example.com/'
languageCode = 'en-us'
title = 'My Website'
theme = 'congo'
...
Afficher la configuration effective du site :
hugo config
Contenu
Documentation : content organization, le contenu doit être organisé de manière à refléter le rendu du site web.
Hugo utilise Goldmark pour convertir le Markdown en HTML. Il est conforme aux spécifications CommonMark et compatible avec GitHub Flavored Markdown.
Pour rédiger en Markdown le mieux est d'utiliser un éditeur de code comme Fleet ou VSCodium. Il existe aussi des éditeurs en ligne tels que celui-ci.
+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
weight = 10
[params]
author = 'John Smith'
+++
## Introduction
This is **bold** text, and this is *emphasized* text.
Visit the [Hugo](https://gohugo.io) website!
La partie entre +++ est une entête front matter.
Elle permet d'ajouter des métadonnées au format TOML telles que le titre, la date, l'auteur…
