Comment créer un blog avec le framework Hugo ?

Hugo est un framework Open Source qui permet de générer des sites statiques. Des dizaines de modèles sont disponibles gratuitement pour pouvoir le personnaliser.

Celui-ci étant statique, nous n’avons pas besoin de base de données. Ce qui fait qu’il peut être très vite déployé.

Comment installer Hugo sur sa machine ?

Simplement en tapant la commande suivante dans son terminal : ( Soyez sûre d’avoir Homebrew d’installé )

brew install hugo

Pour vérifier si Hugo a bien été installé correctement :

hugo version

Comment créer un nouveau site ?

Ensuite, il nous faut générer un nouveau site :

hugo new site nomDeVotreSite

Comment installer un thème ?

Une fois le site créé il nous faudra ajouter un thème, pour cela voici un lien avec une longue liste de thème disponible. Liste Thème

Dans mon cas, j’ai utilisé le thème PaperMod : Lien PaperMod Thème

Pour l’installer, il faut vous placer dans le dossier du nouveau site que vous venez de créer :

cd nomDeVotreSite

Et lancer la commande suivante :

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

En regardant dans le dossier themes vous devriez avoir un nouveau dossier nommé PaperMod.

Et pour finir, ajouter une petite ligne de code dans le fichier config.toml se trouvant à la racine de votre projet.

theme = "PaperMod"

Notez, qu’il existe plusieurs façons d’installer un thème, donc n’hésitez pas à vous rendre sur le GitHub de celui-ci pour en savoir davantage. De plus, il est possible d’utiliser un fichier yaml au lieu d’un toml.

Je mets un lien qui permet de convertir yaml -> toml : Lien Convertisseur

En ce qui concerne le design du blog, ceci est spécifique au thème, donc il faudra absolument se rendre sur leur GitHub, pour connaître se qui est configurable ou non.

Comment ajouter du contenu ?

Rien de plus simple pour créer un nouvel article, taper la commande :

hugo new posts/nomDeVotreArticle.md

Notez le .md, si vous êtes déjà familier avec la syntaxe Markdown alors, vous pouvez commencer de suite, sinon voici un lien vers les commandes de base : Markdown

Comment voir mon contenu live ?

Pour cela, il vous faut lancer le serveur, et la commande est la suivante :

hugo server -D

Votre site sera donc disponible à l’adresse suivante http://localhost:1313.


Dans un prochain article, nous verrons comment déployer notre site avec GitHub page, ainsi que sur un serveur apache.