hugo

Ça y est, j’en parlais il y a peu mon blog est passé sur le logiciel hugo (voir ici). Je fais cet article pour un peu expliquer les soucis que j’ai pu rencontrer et expliquer comment créer ses premières pages, tester et publier sur le grand nain ternet.

Installation d’hugo

Le site officiel d’hugo est disponible sur l’adresse suivante : http://gohugo.io/

Le lien de téléchargement est ici : https://github.com/spf13/hugo/releases

Pour ma part j’ai installé hugo à la fois sur mon Mac OSX ainsi que sur ma distribution Linux Kubuntu.

Dès la fin de l’installation du logiciel hugo vous avez alors une nouvelle commande disponible dans votre shell.

Utilisation d’hugo

Nous allons donc créer un site web d’exemple appelé monsite, voici comment procéder.

Création du site

hugo new site monsite

Un nouveau répertoire a été crée dans le répertoire courant s’appelant monsite. Si vous allez dans le dossiser monsite et que vous faîtes un ls vous verrez toute une structure particulière de fichiers ainsi que de dossiers. Les explications officielles sont ici : http://gohugo.io/content/organization/

Il est nécessaire de modifier le fichier config.toml, le principe est relativement simple. En effet, vous avez une clé et vous y collez la valeur que vous souhaitez. Ainsi, le fichier config.toml généré est le suivant :

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

Je vous invite à remplacer par les bonnes valeurs.

Création de votre première page

Nous allons maintenant passer à la création de la première page :

hugo new post/premiere-page.md

Cela va créer un fichier appelé premiere-page.md dans le sous dossier content/post/

Le format des pages est donc le markdown, il faut savoir qu’hugo utilise l’implémentation blackfriday.

Si vous n’avez jamais utilisé la syntaxe markdown il est possible de jeter un oeil à la page ici

Je vous invite à ajouter des choses dans le fichier premiere-page.md et nous allons alors visualiser cette page.

Visualiser votre site avant publication

hugo embarque un petit serveur web qui permet de visualiser votre site web.

Dans le dossier monsite vous exécuter la commande :

hugo serve

hugo vous indique qu’un serveur web est disponible à l’adresse : http://localhost:1313/ (bind address 127.0.0.1)

De ce fait vous prenez votre navigateur préféré et vous allez sur l’URL mentionnée ci-dessus. Et là c’est le drame. En effet, vous avez une belle page blanche. Et pour cause hugo n’a pas de thème par défaut. Vous l’avez compris nous allons devoir choisir un thème.

Choisir un thème

La liste de tous les thèmes est disponible ici : http://themes.gohugo.io/

Pour procéder à l’installation d’un thème c’est très simple :

mkdir themes
cd themes
git clone <URL>

La commande git clone va aller chercher le thème en question et vous créer un nouveau répertoire qui sera le nom de votre thème.

Par exemple ici j’utilise le thème base16.

Visualiser votre site avec votre nouveau thème

Une fois votre thème choisi vous pouvez exécuter à nouveau la commande :

hugo serve -t <montheme>

Puis vous pouvez alors retourner sur l’URL http://localhost:1313/ et là vous aurez enfin votre première page avec hugo qui s’affiche enfin.

Si ce thème vous convient alors on peut inscrire en dur le thème dans le fichier config.toml. Un exemple un peu plus complet :

baseurl = "https://hindy.lovetux.net"
languageCode = "en-us"
title = "Un blog de geek 2.0, RTFM et 42"
pygmentsuseclasses = true
theme = "base16"

[Params]
  Author = "Soliman Hindy"

Génération des pages web

Afin de générer vos pages web il faut exécuter tout simplement la commande hugo :

hugo

En lançant tout simplement cette commande cela va créer un répertoire public qui contiendra toutes les pages web à transmettre sur serveur web. Vous pouvez alors prendre tout le contenu du dossier public et l’uploader afin que votre nouveau site soit visible sur le nain ternet.

Divers

Editeurs

Pour ma part j’utilise deux éditeurs suivants les besoins :

• atom
• vim

A vous de trouver éventuellement celui qui vous convient.

Gestionnaire de révision

Pour ma part j’utilise git afin de pouvoir bénéficier d’un gestionnaire de révision. L’utilisation que j’en ai est assez simple : je crée mes pages, je les ajoute, commit et push les changements.

Documentation officielle d’hugo

La documentation assez fournie d’hugo est disponible à partir de cette adresse : http://gohugo.io/overview/introduction/

Le mot de la fin ?

Bon hack !