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 concept de site statique n’est pas nouveau en revanche les outils pour générer ce type de site 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 abondament dans mes projets professionnels. D’autre part pour la simplicité et les performances.

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. A partir de ce moment là, l’usage d’un langage interprété comme php ne se justifie pas et l’utilisation de fichiers html/css/js peut suffire. On gagne alors en simplicité. Moins de langages informatiques à utiliser, pas de CMS, plugins ou thèmes à mettre à jour pour assurer des patchs de sécurité, pas de base de données à sauvegarder/restaurer. Le déploiement et la sauvegarde s’en trouve également simplifié puisque nous avons uniquement des fichiers statiques à traiter. Par exemple un simple dépôt git distant peut faire l’affaire. Pour migrer votre site, copier/coller vos fichiers sur votre nouveau serveur et l’affaire est pliée.

Pour des besoins plus spécifiques comme les formulaires ou un pannier d’achat, des services tiers peuvent être implémentés. En revanche, si votre site nécessite que de nombreux utilisateurs externes mettent à jour des informations du site, un site dynamique sera plus adapté.

Avec un site purement statique, nous gagnons également 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 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é.

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éer 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 tapez:

$ 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.

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 thème 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).

Pour installer un thème, créez un dossier /themes à la racine 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.

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 ...

Pour générer vos fichiers statiques, il faut demander à Hugo de transformer vos fichiers Markdown en fichiers html. Cela peut se faire soit en ligne de commande soit en utilisant le mode “Watch” du serveur interne disponible dans Hugo.

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

Personnellement, en local, je préfère démarrer le serveur web d’Hugo en mode “Watch” et celui-ci est à l’écoute pour regénèrer mon site à chaque sauvegarde de mes changements effectués via mon éditeur de code. 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 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.

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 raison d’être 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 ce 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.

Pour pixenjoy.com, j’utilise le service Aerobatic qui propose un espace d’hébergement avec une offre gratuite pour un nom de domaine personnel et 2 sites. Vous aurez également droit à un certificat SSL, l’usage d’un CDN et d’autres fonctionnalités.

Soyez conscient que 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 vraiement “user friendly” pour permettre à un utilisateur lambda de modifier le contenu via un backoffice par exemple. Des pistes qui vont dans ce sens existent 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 de dépenser votre energie à administrer et maintenir un système complexe.

Mise à jour du 13.11.2017:

pixenjoy.com est maintenant hébergé chez Netlify et le thème Hugo utilisé est un thème “maison”.

Mise à jour du 17.10.2019:

Ce blog statique n'est plus construit avec l'outil Hugo mais avec l'outil Kirby.

Mise à jour du 14.03.2021:

Ce blog statique n'est plus construit avec l'outil Kirby uniquement mais avec l'outil Kirby en mode headless et le SSG Eleventy.

Mise à jour du 21.05.2023:

Ce blog statique est construit avec l'outil Kirby et le plugin StatiCache.