Tutoriel CMS Hugo

Hugo est un CMS un peu différent des autres qui présente un intérêt important pour le SEO : il génère des pages statiques et est très rapide. Mais ce n’est pas sa seule particularité.

Dans ce tutoriel, on fera donc un tour rapide de toutes les fonctionnalités du logiciel et on discutera aussi de la création de templates. Vous noterez que ce tutoriel est particulièrement destiné aux débutants, en particulier à ceux qui n'ont jamais eu d'expérience avec un générateurs de sites statiques comme Hugo. Ainsi, j'explique et je conseille certaines choses qui pourraient faire hurler des utilisateurs avancés...

Histoire de Hugo

Hugo est un logiciel Open Source qui a été créé en 2013 et qui est hébergé sur la plateforme de développement Github.

La première particularité de Hugo vient de son mode de développement. Il utilise un langage de programmation assez récent appelé Golang et créé par Google.

Ne partez pas ! Vous n’avez pas besoin de connaître ce langage de programmation car le logiciel s’utilise (presque) comme n’importe quel logiciel : avec un exécutable. D’ailleurs, Hugo est compatible avec Windows, Linux, Freebsd et MacOSX.

D’un point de vue technique, vous n’avez pas de base de données avec Hugo. Lorsque vous utilisez le logiciel, il va créer un ensemble de fichiers HTML et vous n’aurez plus qu’à déposer ces fichiers sur l’hébergement de votre choix. Contrairement à un CMS comme Wordpress, vous ne pouvez pas directement proposer des interactions avec les utilisateurs d’un site basé sur Hugo (comme des commentaires par exemple). Cependant, vous gagnez grandement en sécurité et vous faites des économies sur l’hébergement puisque vous n’avez plus besoin de PHP, de MySQL, etc.

Le plus gros défaut de Hugo est qu’il est assez difficile d’accès. Si vous êtes novices en informatique, il faudra vous armer de patience et tester le logiciel pour bien comprendre son fonctionnement.

Par contre, une fois l’outil maîtrisé, il peut s’avérer très puissant !

Installation de Hugo

La première chose à faire est d’installer Hugo et pour cela il faut se rendre sur le site et télécharger la dernière version.

Pour les besoins de cet article j’ai utilisé la version Windows 10 car je pense que cela s’adressera au plus grand nombre. Si vous avez un Mac ou un Linux, vous pourrez utiliser le logiciel de la même manière.

Afin de m’organiser simplement, j’ai créé un dossier “hugo” et j’ai placé le fichier hugo.exe à l’intérieur (pensez donc à décompresser l’archive ZIP que vous téléchargerez).

C’est fait le logiciel est installé ! On peut donc passer à la création de son premier site avec le CMS Hugo.

Créer un site avec Hugo

Pour ce site, j’utilise un cas fictif mais c'est quelque chose que j’aurais très pu être amené à faire : créer un site sur le langage de programmation Golang sur le domaine golang.fr.

Notez bien que Hugo est un logiciel très complet et que cet article ne peut pas couvrir l’intégralité des possibilités du logiciel.

Pour utiliser Hugo, il faut utiliser la ligne de commande. Ouvrez la recherche de Windows 10 et tapez “cmd”. Il s’agit du logiciel qui permet de travailler en ligne de commande.

Ensuite, utilisez les commandes “cd nom_repertoire” et “cd ..” pour naviguer dans les dossiers. Allez dans le dossier dans lequel vous avez déposé l’exécutable “hugo.exe”.

Tapez ces commandes :

hugo.exe help
hugo.exe version

Pour les besoins de cet article, j’utilise la version 0.21, mais si vous avez une autre version, il y a de fortes chances pour que tout fonctionne de la même manière.

On peut créer son site avec la commande :

hugo.exe new site golang.fr

Un message apparaît et nous proposer de réaliser quelques actions. On peut tout d’abord se rendre sur le site pour télécharger un template qui correspond à l’aspect que notre site aura.

Allez sur le site http://themes.gohugo.io/ et choisissez un template. Prenez soin aussi de vérifier qu’il est compatible avec votre version de Hugo. Si aucun template ne vous convient, nous verrons par la suite comment créer son propre template.

J’ai choisi le template “Mainroad” qu’on peut trouver à cette adresse : https://github.com/Vimux/mainroad.

Une fois sur le site Github, téléchargez une archive ZIP du dépôt en cliquant sur le bouton vert “clone or download” et en choisissant l’option “Download ZIP”.

Vous pouvez décompresser les fichiers et les placer dans le sous-répertoire “themes/Mainroad” de votre site Internet.

Une fois que c’est fait, utilisez un éditeur de texte pour modifier le fichier “config.toml” et indiquer la ligne suivante :

 
theme = "Mainroad"

Puisqu’on est là, on en profite pour modifier le reste du fichier de configuration afin qu’il corresponde à nos besoins et au thème (voir la page Github du thème que vous avez choisi) :

baseURL = "http://golang.fr/"
languageCode = "fr-FR"
title = "Golang.fr : un site français sur le langage de programmation Go"
theme = "Mainroad"

[Author]
    name = "Nicolas Lorenzon"
    bio = "Je suis un développeur informatique mais aussi un consultant SEO. Cette double casquette me permet de créer des outils pour permettre à mes clients d'atteindre leurs objectifs sur le web."
    avatar = "img/avatar.png"


[Params]
    subtitle = "Un site français sur le langage de programmation Go" # Subtitle of your site
    description = "Un site français sur le langage de programmation Go" # Description of your site
    opengraph = true
    readmore = true # Show "Read more" button in list if true
    leftsidebar = false # Move sidebar to the left side if true
    authorbox = true
    post_navigation = true
    postSections = ["post"] # the section pages to show on home page and the "Recent articles" widget
    #postSections = ["blog", "news"] # alternative that shows more than one section's pages


[Params.widgets]
    search = true # Enable "Search" widget
    recent_articles = true # Enable "Recent articles" widget
    recent_articles_num = 10 # Set the number of articles in the "Recent articles" widget
    categories = true # Enable "Categories" widget
    tags = true # Enable "Tags" widget
    tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)
    social = true # Enable "Social" widget
    social_facebook = "username"
    social_twitter = "username"
    social_linkedin = "username"
    social_github = "username"
    social_email = "example@example.com"

Maintenant, je fais quelque chose d’un peu particulier : je copie le fichier hugo.exe dans le répertoire du site golang.fr.

Ce n’est pas recommandé car cela sème des logiciels hugo.exe un peu partout. Cependant, j’y vois un avantage : lorsque je sauvegarde le site sur clé USB ou dans le cloud, je sauvegarde aussi la version du logiciel qui permet de gérer le site. A vous devoir si vous voulez faire cela...

Pour continuer, il faut donc utiliser la ligne de commande pour se rendre dans le répertoire du site golang.fr avec cette commande :

cd golang.fr

On va créer un premier article :

hugo.exe new accueil.html

Cette commande crée le fichier accueil.html qu’on pourra ensuite modifier avec son éditeur de texte préféré.

Le fichier se situe dans le dossier content/accueil.html

Vous verrez qu’il est composé d’une entête avec des paramètres et qu’on peut ensuite y noter le texte qu’on souhaite (au format HTML).

Voici comment j’ai remplis cette première page d’accueil :

+++
categories = []
date = "2017-06-09T15:35:07+02:00"
description = "Message de bienvenue sur le site Golang.fr"
tags = []
thumbnail = ""
title = "Bienvenue sur le site golang.fr"

+++

Le site Golang.fr vous propose des informations sur la programmation à l'aide du langage Go créé par Google.

Nous verrons sur ce site des actualités, mais aussi des cas d'utilisation, des logiciels et des tutoriels sur Golang.

Notez que si le HTML ne vous plait pas, vous pouvez aussi créer des pages avec d’autres formats de fichiers : https://gohugo.io/content/supported-formats/.

Maintenant, vous pouvez afficher le résultat à l’aide de cette commande :

hugo.exe server

Vous pouvez ouvrir votre navigateur et entrez l’url http://localhost:1313/ pour visualiser le contenu de votre site Internet.

Comme vous allez le voir, votre site n’affiche pas beaucoup de choses…

Mais, si vous allez à cette adresse http://localhost:1313/accueil/ vous voyez bien votre article.

Organisez votre site avec Hugo

On vient de voir que le logiciel n’est pas aussi intuitif qu’il n’y paraît. Paradoxalement, c’est aussi ce qui fait sa force !

On a vu qu’il fallait entrer l’url http://localhost:1313/accueil/ pour accéder à la page qu’on a créée.

La raison vient de la façon dont Hugo organise le contenu du site. Vous pouvez vous référer à cette page, si vous voulez en savoir plus : https://gohugo.io/content/organization/.

La solution consiste à renommer la page accueil.html en _index.html. Ainsi, votre page de contenu arrivera sur la page d’accueil.

Une fois que c’est fait vous constaterez la chose suivante : il y a à la fois le contenu de la page, mais aussi un message qui vous indique qu’aucun article n’a encore été créé !

C’est parce que Hugo a besoin d’un répertoire “post/” dans lequel les pages du blog arriveront pour afficher les derniers articles.

Mais, on peut aussi créer une arborescence spéciale sur le site en créant des répertoires et des fichiers _index.html.

On peut configurer les choes comme on le souhaite mais j'ai choisi de faire simple. Le dossier “post” va donc contenir les pages du site et on utilisera cette commande pour créer un nouvel article du type blog :

hugo.exe new post/nouvel_article.html

Notez bien que pour faire un blog, il “suffit” d’avoir le dossier “post”. Mais, il est tout à faire possible de ne pas utiliser ce dossier et d’utiliser Hugo pour créer une arborescence custom de toute pièce.

Ajouter des images à vos articles

Le texte c’est bien mais les images c’est mieux ! Alors comment ajouter des images avec le CMS hugo ?

Il y a plusieurs manières d’utiliser des images dans Hugo.

Vous devez mettre vos images dans un de ces deux répertoires :

content/
static/

Le choix vous income. Personnellement, j’aime bien mettre mes images dans static mais vous pouvez aussi les mettre dans content, avec les articles si vous préférez.

Si j’ajoute une image appelée hugo.jpg dans static, je peux y faire référence simplement dans un article de cette manière en utilisant les tags HTML :

< img src=”hugo.jpg” >

Mais, vous pouvez aussi créer des répertoires pour mieux organiser vos contenus, si vous le souhaitez.

Si vos articles possèdent un paramètre “thumbnail”, vous pouvez mettre votre image comme suit :

thumbnail = "hugo.jpg"

Modifier le thème Hugo

Nous venons d’utiliser un thème particulier : Mainroad. Bien qu’il soit très intéressant, nous pouvons être amené à le modifier pour permettre plus de souplesse ou mieux l’adapter à nos besoins.

Vous avez alors deux solutions :

• Repartir de zéro et créer un nouveau thème de A à Z
• Modifier le thème que vous avez pour l’adapter

Pour créer un nouveau thème, Hugo nous fournit une commande bien pratique qui va tout créer les fichiers dont nous avons besoins :

hugo.exe new theme mon_nouveau_theme

Mais, le plus simple est souvent de partir de l’existant. Pour cela, il faut surcharger les fichiers qui se trouve dans le dossier layout de votre thème pour les mettre dans le dossier layout de votre projet Hugo.

Ensuite, vous pouvez modifier les fichiers que vous avez copié et cela modifiera l’affichage du template sans que vous ayez besoin de le modifier directement - ce qui s’avère pratique si vous devez faire des mises à jour.

Les possibilités offertes par Hugo en matière de personnalisation de son template sont particulièrement complète. Ainsi, il est encore plus simple de passer voir la documentation si vous avez des besoins particuliers.

En finir une bonne fois pour toute et générer le site

Si vous en avez terminé avec la configuration, les tests et les modifications de templates, vous pouvez utiliser simplement cette commande pour générer votre site avec le CMS Hugo :

hugo.exe

L’ensemble de votre site va se retrouver dans le dossier “public” qui sera prêt à partir sur un serveur FTP ou tout autre plateforme capable d’héberger des sites statiques.

Voilà, c'est terminé pour cette première introduction au CMS Hugo et j'espère que cela vous aura donner envie d'en savoir un peu plus et de réaliser, pourquoi pas, quelques sites avec ce sympathique logiciel.

Pour d'autres articles, cliquez ICI.