Gilles Vauvarin

Bonjour, je vis à Thonon les bains en Haute-Savoie et travaille à Genève où j’exerce la profession d’ingénieur web pour des institutions publiques. Parallèlement, j’investis mon temps dans le développement d’un projet entrepreneurial nommé Confdays, un service d’hébergement de site clé en main pour les organisateurs de conférence. Pour en savoir plus, rendez-vous à l’adresse confdays.com

Créer un blog avec Hugo

J’ai profité d’un week-end pluvieux pour prendre le temps de remettre sur pied mon blog pixenjoy.com Pour cette nouvelle version, j’ai décidé d’utiliser non plus un CMS lié à une base de données type WordPress, mais un générateur de site statique. Le concepte de site statique n’est pas nouveau en revanche les outils pour générer ce type de site ont beaucoup évolué et se sont multipliés.

Pourquoi ce choix ? D’une part par curiosité. J’avais envie de découvrir autre chose que WordPress que j’utilise abondamment dans mes projets professionnels. D’autre part pour la simplicité et les performances.

Simplicité et performance

Pour certains usages comme le bloging, les sites vitrines, une landing page … un site internet n’a pas nécessairement besoin d’une base de données et donc d’un langage interprété comme php. On gagne alors en simplicité. Moins de langages informatiques à utiliser (html, css, js suffisent). Pas de CMS, plugins et themes à mettre à jour pour assurer des patchs de sécurité. Pas de base de données à sauvegarder et restaurer. Le déploiement et la sauvegarde s’en trouve également simplifié puisque nous avons uniquement des fichiers statiques à traiter. Par exemple pour migrer votre site, copier/coller vos fichiers sur votre nouveau serveur et l’affaire est pliée.

Pour des besoins plus spécifiques (formulaires, pannier d’achat …) des services tiers peuvent être implémentés. En revanche, si votre site nécessite des mises à jours fréquentes du contenu par vos utilisateurs, un site dynamique sera probablement plus adapté.

Avec un site purement statique, nous gagnons en performance. En effet, le serveur ne fait aucun calcul pour générer la page html mais se contente simplement de renvoyer celle-ci telle qu’elle est hébergée sur le serveur. Vous consommez donc moins de ressources serveur pour afficher les pages de votre site web. Si vous ajoutez l’usage d’un CDN, une pincée de minification et un zeste de gzip, vous obtiendrez un site insolemment rapide.

Hugo

Hugo est un générateur de site statique écrit en langage Go. Il existe de nombreux autres outils similaires écrits dans différents langages. Jekyll, Middleman ou Metalsmith sont quelques exemples cependant mon choix s’est porté sur Hugo pour sa légerté, sa rapidité, sa simplicité d’installation et sa portabilité.

Installation d’Hugo

Dans la suite de cet article, j’explique les démarches d’installation sous un environnement Linux. Pour installer Hugo en local, téléchargez l’executable correspondant à votre environnement système. Une fois l’archive ouverte, placez l’executable dans un dossier déclaré dans votre PATH afin de pouvoir lancer les commandes Hugo dans un terminal. Personnellement, sous environnement Linux, j’ai créé un dossier /home/gilles/bin que j’ai déclaré dans mon PATH et dans lequel j’ai déposé l’executable Hugo.

# Visualiser les dossiers déclarés dans son PATH
$ echo $PATH

# Ajouter un dossier dans son PATH
$ export PATH=$PATH:/home/gilles/bin

Vérifier que l’éxecutable a bien les droits d’éxecution. Ouvrez ensuite un terminal et taper:

$ hugo help

Vous devriez voir l’ensemble des commandes et des options d’Hugo. Enfin, si vous avez besoin de mettre à jour Hugo, supprimez l’executable et remplacer le par la dernière version.

Création d’un nouveau site

Pour générer un nouveau site dans un dossier “pixenjoy” à l’aide d’Hugo, tapez dans un terminal :

$ hugo new site ~/Bureau/pixenjoy

Hugo va générer automatiquement une arborescence de fichiers et de dossiers qui constituera un squelette vide de votre environnement de travail. Le fichier config.toml est le fichier de configuration. Nos contenus, sous forme de fichiers Markdown, seront stockés dans le dossier /content. Pour plus de détails sur le fonctionnement d’Hugo et de son organisation de fichiers, je vous laisse consulter la documentation officielle.

A ce stade, nous n’avons aucun contenu ni template pour notre site. Hugo comme WordPress peut fonctionner avec un système de thèmes pour définir la structure de votre site. Vous pouvez créer votre propre thème ou télécharger un theme existant. Pour pixenjoy.com, je suis partie d’un thème existant: Hikari disponible sur Github. Son design est très épuré mais le texte est lisible, il intègre le système de commentaires Disqus et l’outil d’analyse de metrics Google Analytics (que je n’utilise pas).

Installation d’un thème existant

Pour installer un thème, créez un dossier /themes à la racince de votre environnement de travail Hugo puis placez vous dans ce dossier pour y télécharger le thème.

$ cd pixenjoy
$ mkdir themes
$ cd themes
$ git clone https://github.com/digitalcraftsman/hugo-hikari-theme.git

Il faut modifier le fichier de configuration config.toml situé à la racine pour qu’il s’adapte au nouveau thème. Pour cela remplacez le fichier existant par celui se trouvant dans:

~/Bureau/pixenjoy/themes/hugo-hikari-theme/exampleSite/

Ouvrez le fichier de configuration et modifiez le en conséquence.

Maintenant, il ne vous reste plus qu’à ajouter du contenu et à compiler les fichiers via Hugo pour qu’il génère vos fichiers statiques constituant votre site web. Ensuite vous pourez déployer ces fichiers sur votre serveur distant.

Ajouter du contenu

Les contenus de votre site (articles et pages) devront être déposés dans le dossier pixenjoy/content/ avec l’extension .md Par défaut, les contenus dans Hugo sont écrits à l’aide du langage Markdown, une écriture simple à base de balises qui seront traduites par Hugo dans leurs équivalents html. Vous pouvez générer les squelettes de ces pages/articles via des lignes de commandes Hugo:

# Création d'un article
$ cd pixenjoy/content/
$ hugo new post/first-post.md

Si vous êtes allergique à la ligne de commande, vous pouvez aussi créer votre fichier first-post.md dans votre éditeur de code et le déposer dans un dossier content/post/. Pour en savoir plus sur l’organisation du contenu, la gestion des slugs et des URLs, consultez la documentation officielle.

Avec Hugo les fichiers Markdown débutent avec des meta données (titre, description, date, statut editorial, taxonomie, slug, url … ) écrit par défaut en Toml et identifié par le balisage “+++” mais vous pouvez aussi configurer Hugo pour utiliser du YAML ou du JSON. Après les meta données, vous pouvez écrire votre contenu avec un balisage Markdown et éventuellement html si le Markdown ne vous permet pas certains formatages du texte.

Reportez-vous à la documentation de votre thème pour plus de détails sur la gestion spécifique des meta données de votre thème.

Voici par exemple le début de la synthaxe de cet article:

+++
date = "2016-02-27T11:33:28+01:00"
description = "Créer un blog avec hugo"
title = "Créer un blog avec Hugo"
+++

J’ai décidé de relancer mon blog ...
Pourquoi ce choix ? D’une part ...
### Simplicité et performance
Pour certains usages ...

Générer son site statique et le visualiser

Pour générer vos fichiers statiques, il faut demander à Hugo de transformer vos fichiers Markdown en fichiers html. Cela se fait par une simple ligne de commande.

# Générer vos fichiers en ligne de commande
$ hugo

Hugo génère alors un dossier /public qui contient tous les fichiers statiques de votre site. Il est conseillé de supprimer le fichier /public avant toute regénération du site.

# Supprimer le dossier /public avant re-génération
$ rm -r /public

En local, vous pouvez démarrer le serveur web interne d’Hugo en mode “watch” afin que celui-ci soit à l’écoute de vos changements et regénère votre site à chaque sauvegarde. Un mode “Reload” recharge automatiquement vos pages dans le navigateur. Votre site est visible à l’URL http://localhost:1313

# Démarrer le serveur web d'Hugo en mode watch
$ hugo server -w

Lorsque Hugo génère votre site statique, il place l’ensemble des fichiers html, css, js dans un dossier /public C’est le contenu de ce dossier qu’il faudra copier sur votre serveur de production pour déployer votre site web.

Déployer votre site en production

Vous pouvez bien sûr copier le contenu du fichier /public à la racine de votre serveur de production via un logiciel (S)FTP mais le FTP en 2016, c’est has been!

Une solution plus “dev opt” serait dans un premier temps de versionner votre code pour pusher celui-ci sur un dépôt distant Github, Bitbucket ou Gitlab. Vous aurez ainsi un historique et une sauvegarde de votre site même si la sauvegarde n’est pas la principale vocation du versionning. Quelque soit le poste d’où vous travaillerez, vous pourrez faire un pull de votre site pour récupérer le code puis y apporter des modifications. Une fois vos modifications terminées, vous re-pusherez le code sur le dépôt distant. Le versionning vous permettra également d’éffectuer des rollback, des branches … mais les avantages du versionning n’est pas le sujet de cet article.

# Commandes Git de base pour pusher votre projet sur votre dépôt distant
$ git add *
$ git commit -m "First commit"
$ git push -u origin master

Dans un second temps, utilisez une solution qui déploie votre code versionné directement sur votre site de production lorsque vous effectuez un commit & push. Il existe plusieurs services et outils de ce type. Vous pouvez par exemple utiliser des services comme Aerobatic ou Github Pages qui offrent de l’espace gratuitement et les services d’un CDN. J’ai essayé de paramétrer ces services avec mon DNS pixenjoy.com mais Gandi ne semble pas permettre de créer des ALIAS et la solution avec un CNAME n’a pas fonctionné.

Pour pixenjoy.com, j’ai donc hébergé mes fichiers sur de l’espace disque d’un VPS que j’utilise pour d’autres projets. Le service DeployHQ me permet de lier mon dépôt Bitbucket “pixenjoy” avec mon serveur web installé sur mon VPS. Vous pouvez aussi utiliser des services comme FTPLOY ou DeployBot

A chaque commit & push sur Bitbucket de mon site statique “pixenjoy”, DeployHQ via un webhook, déploie les fichiers modifiés sur mon serveur de production dans le bon répertoire.

Bonus

Histoire de gagner du temps, on va scripter dans un Shell les différentes commandes utilisées pour déployer le site en production :

#!/bin/bash
#
# Deploy the /public files to the remote git repository
#

# Delete the local /public folder
rm -r public

# Ask Hugo to re-build the site
hugo

# Git add / commit / push
git add *

echo 'Enter the commit message:'
read commitMessage

git commit -m "$commitMessage"

git push -u origin master

Copiez ce script dans le dossier racine de votre projet Hugo en local, placez vous à l’intérieur avec votre terminal puis lancer le script shell lorsque vous souhaiterez déployer vos modifications en production.

# Executer le bash pour déployer le site en production
$ bash ./deploy.sh

Et voila !

Conclusion

Cette solution s’adresse à des personnes ayant un minimum de compétences informatiques. Les contenus se rédigent dans un éditeur, il faut comprendre la signification des meta données, rédiger son contenu en Markdown et savoir lancer le serveur web d’Hugo ou taper une ligne de commande. Rien d’insurmontable mais cela peut rebuter les non technophiles.

Il n’existe pas encore de solution vraiment “user friendly” pour permettre à un utilisateur lambda de modifier le contenu via un backoffice par exemple. Des pistes vont dans ce sens mais nous sommes encore loin de la convivialité d’un espace d’administration tel que l’on trouve sur WordPress ou d’autres CMSs.

En revanche, si vous êtes un peu Geek, maintenez un blog et voulez une solution simple, performante et economique, vous pouvez opter pour la solution du site statique géré via un générateur de sites statiques. Fini les galères de gestion de la sécurité, des mises à jours et procédures de backup fastidieuses, des optimisations complexes de performance.

Avec Hugo, vous vous concentrez sur votre contenu plutôt que sur l’administration d’un système complexe.

comments powered by Disqus