Je vous propose une petite série d’articles sur le générateur de sites statiques HUGO. Dans une démarche d’optimisation écologique de mes contributions numériques, je suis passé chez Infomaniak pour ses qualités en matière de serveurs, et j’ai choisi de m’orienter vers HUGO pour le traitement des fichiers en Flat Files. Là-dessus j’optimise notamment les visuels avec un traitement visant à alléger au maximum leurs poids, je n’intègre plus les contenus avec les codes d’embed, etc.
Ce présent article vise à présenter les premières étapes d’utilisation d’HUGO et de transfert depuis Wordpress. Les suivants aborderont les questions d’optimisation Low Tech et de comparatifs de performances par rapport à Wordpress.
// Bien débuter avec HUGO
HUGO est un générateur de sites statiques fonctionnant sous le langage de programmation GO , dans une architecture de type JAMStack (Javascript + APIs + Markup Language). Il suffit de créer des fichiers dans un répertoire puis HUGO les transforme en un site web HTML complet, en quelques secondes. HUGO fonctionne avec des fichiers en Markdown incluant des méta-données. En quelques secondes le site web est généré, il suffit alors de le déposer sur votre serveur web.
Ma configuration personnelle est la suivante : je travaille avec mon vieux MacBook Pro reconditionné de 2011 sur lequel j’ai remplacé OSX par une instance Debian 10 (mais c’est une autre histoire). Cette config est très pratique pour l’usage d’HUGO qui s’opère principalement en lignes de commandes Bash .
Installer HUGO
Pour commencer, lancez le terminal pour installer HUGO :
$ git clone https://github.com/gohugoio/hugo.git
$ cd hugo
$ go install
Vérifiez ensuite la version de HUGO :
$ hugo version
Enfin choisissez un thème
puis déposez-le dans le dossier /themes. Personnellement, j’ai choisi PaperMod
.
Paramétrer
Tout le paramétrage du site s’effectue en complétant le fichier config.yml qui se trouve à la racine. Voici quelques configurations de base :
baseURL: https://url_de_votre_site_web.fr
languageCode: fr-fr # pour le flux RSS
defaultContentLanguage: fr-fr # pour <html>
title: titre_de_votre_site_web
theme: "nom_du_thème"
paginate: 10 # pagination
publishdir: site_a_publier # nom du dossier de publication des fichiers HTML
enableRobotsTXT: true
taxonomies: # liste des grandes rubriques
category: categories # par défaut
tag: tags # par défaut
projet: projets # catégorie personnalisée
permalinks: # pour préciser le format des URL
posts: /:year/:month/:day/:filename/
params:
title: titre_de_votre_site_web
description: "description_de_votre_site_web"
keywords: [motclé1, motclé2, motclé3]
images: ["posts/img/nom_de_l_image_utilise_pour_opengraph_tag"]
DateFormat: "02/01/2006"
customtextFontFamily: "Inconsolata" # Si vous utilisez des typos spécifiques
customheadingFontFamily: "Inconsolata"
assets:
favicon: /nom_du_favicon.png
outputs:
home:
- HTML
- RSS # pour flux RSS
- JSON # indispensable
Créer des contenus
Créons d’abord un nouveau site web :
$ hugo new site <nom_du_site> -f yml
Pour créer les pages du site web, vous aurez besoin d’utiliser une interface de développement (IDE) : j’utilise personnellement Atom
. Pour créer une nouvelle publication, soit vous ajoutez un nouveau fichier <nom_du_post>.md dans le dossier /content/posts/ via Atom, soit vous utilisez la ligne de commande :
$ hugo new posts/<nom_du_post>.md
Tester en local
Pour tester le site, il vous faudra vous rendre dans le dossier de travail pour transformer votre travail en un site web HTML complet en saisissant la commande suivante :
$ hugo server -D
Pour visualiser votre site web, lancez le navigateur avec l’URL http://localhost:1313 .
Migrer les contenus de Wordpress à HUGO
Pour transférer mes anciennes publications depuis Wordpress, j’ai choisi une méthode semi-automatisée afin de faciliter le travail (tout au moins les premières étapes). Tout d’abord, il vous faut exporter les contenus du CMS Wordpress : vous obtenez ainsi un fichier export-complet-wordpress.xml (pour l’ensemble des contenus).
Il s’agit ensuite de transformer les articles depuis export-complet-wordpress.xml vers autant de fichiers Markdown que de publications. Pour cela, j’ai utilisé le script de Will Boyd (@lonekorean)
wordpress-export-to-markdown. Sous Debian, ce tutoriel
est très complet, jetez un oeil ici
pour trouver une solution adaptée à votre système d’exploitation.
Pour finir, déposez les fichiers Markdown dans le répertoire /content/posts/ avec les autres publications.
// Petite touche de personnalisation
Pour personnaliser le design de votre site, une des premières choses à faire est d’utiliser une feuille de style personnalisée. Pour cela, créez un fichier /assets/scss/main.scss et placez-y les éléments de style dont vous avez besoin. Pour ma part, j’ai utilisé une police de caractère spécifique, dont j’ai ajouté les fichiers dans le dossier /static/fonts pour ajouter ensuite les éléments @font-face { } correspondants aux fonts dans la feuille de style.
Ajoutez ensuite ce bout de code dans le <head></head> du fichier de votre thème /layouts/_default/baseof.html :
{{ $css := resources.Get "scss/main.scss" | toCSS (dict "targetPath" "styles.css") | minify }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
Markdown ne gérant pas l’ouverture des liens sur un nouvel onglet, j’ai ajouté un shortcode HUGO pour créer cette fonctionnalité. Pour cela je me suis appuyé pas-à-pas sur le tutoriel de Aditya Lange .
// Mettez en ligne votre site web
Générez d’abord (quelques secondes suffisent) les pages statiques, en vous plaçant dans le dossier de votre projet et en saisissant dans le terminal :
$ hugo -D
Vous n’avez plus qu’à téléverser les fichiers générés sur votre serveur web à l’aide de votre logiciel FTP habituel (FileZilla fera très bien l’affaire ^^). Et profitez de vos contenus !
␥ Pour aller + loin
Permalien
https://grouan.fr/2022/02/06/passer-a-hugo-migration/