Création d'un site Web statique avec Hugo et l'intégration continue de GitLab Pages
Ce court log, reprend de façon générique le guide d’installation du logiciel de site Web statique Hugo disponible sur https://gitlab.huma-num.fr/spouyllau/log et dont l’exemple est sur https://spouyllau.gitpages.huma-num.fr/log.
- Introduction
- Installation d’un site Web sous Hugo et déployé par GitLab Pages
- Installation d’un site Web sous Hugo et déployé sur une hébergement Web de type LAMP
- Limitations et usages de Pages dans Gitlab
Introduction
Face à l’obsolescence rapide des systèmes de gestion de contenus Web s’appuyant sur les langages de programmation dynamiques traditionnels et les systèmes de gestion de base de données relationnelles (tel que WordPress, Drupal, etc. qui utilisent PHP et les SGBDR Mysql ou MariaDB), il est possible d’opter pour des systèmes de publication Web utilisant des pages HTML statiques, dépendant moins des mises à jour sous-jacentes de ces langages et outils dynamiques et s’inscrivant pleinement dans les principes fondamentaux du Web, en utilisant principalement le langage HTML. Aucun système n’est bien sûr totalement parfait et il ne faut pas oublier que si l’on recherche la pérennité d’un dispositif sociotechnique, il faut plus regarder du côté de l’organisation (humaines, technologiques) qui le met en place que de l’espoir qu’il sera assez bien conçu et robuste pour traverser les années sans être dépendant au monde technologique qui l’entoure. Cependant, revenir aux fondamentaux du Web : un serveur Web, des pages HTML permettent dans la plupart des cas d’atteindre l’objectif qu’on se fixe en souhaitant mettre à disposition des résultats de recherche scientifique. Pour une communication scientifique directe, le Web reste la première marche et il est important qu’elle soit accessible à toutes et tous, en particulier pour des étudiant·e·s de masters ou des doctorant·e·s par exemple, qui ne sont pas forcement accompagné pour cela et pour lequel il n’est pas toujours évident, en master, d’aller déposer dans HAL ou DUMAS des travaux non encore aboutis. L’édition statique Web permet aussi de diffuser des travaux et d’horodater les premiers tours de roue d’une recherche (et ainsi débuter la dissémination d’un travail et ainsi contrer plus facilement les tentatives de plagiat).
Installation d’un site Web sous Hugo et déployé par GitLab Pages
L’installation permet d’utiliser une instance GitLab, par exemple le GitLab de l’IR* Huma-Num pour mettre en œuvre un site Web simple utilisant le moteur de sites statiques HTML Hugo. Il est possible de faire cela sur d’autres instances de GitLab et bien sûr sur GitHub. Il conviendra de bien se renseigner sur les conditions de diffusion, d’accès, de pérennité, etc. des plateformes choisies.
Création du projet/dépôt sous GitLab
Dans un nouveau projet/dépôt, choisir : New project > Create from template
puis : Pages/Hugo
Il s’agit de renseigner le :
- Nom du projet, (Project name) ;
- Le marqueur slug (Project slug), qui fera partie de l’URL publique du site ;
- La description du projet de site ;
- De positionner le Visibility Level à Public afin que le site soit publié et visible.
GitLab installe Hugo (dont deux thèmes : Beautifulhugo et Lanyon) et prépare l’automatisation de l’intégration continue (GitLab CI) pour Pages.
Configuration du site : config.toml
Une fois le site Hugo installé. Il faut configurer le fichier config.toml
.
L’URL du site créé est de la forme : https://[nom du compte].gitpages.huma-num.fr/[slug]
.
ATTENTION : dans l’instance d’Huma-Num, il est pas possible d’utiliser un nom de domaine propre.
Ainsi, dans config.toml, baseurl
doit être :
baseurl = "https://[nom du compte].gitpages.huma-num.fr/[slug]"
Les autres paramètres (label du site, etc.) sont a modifier :
baseurl = "https://[nom du compte].gitpages.huma-num.fr/[slug]"
contentdir = "content"
layoutdir = "layouts"
publishdir = "public"
title = "Label du site Web"
canonifyurls = true
DefaultContentLanguage = "fr"
theme = "beautifulhugo"
metaDataFormat = "yaml"
pygmentsUseClasses = true
pygmentCodeFences = true
#disqusShortname = "XXX"
#googleAnalytics = "XXX"
[Params]
subtitle = "Phrase d'accroche"
#logo = "img/avatar-icon.png"
#favicon = "img/favicon.ico"
dateFormat = "January 2, 2006"
commit = false
rss = true
comments = true
Motorisation avec GitLab CI : .gitlab-ci.yml
L’utilisation du template Pages/Hugo installe automatique le script d’intégration continue pour GitLab (disponible en faisant : CI/CD > Editor). Nous ajoutons un processus de test (test:) qui, s’il est positif, autorise le déploiement via Pages. Dans le cadre de l’instance d’Huma-Num, le Runner Alpine est disponible, nous l’utilisons pour cet exemple :
# All available Hugo versions are listed here: https://gitlab.com/pages/hugo/container_registry
image: registry.gitlab.com/pages/hugo:latest
variables:
GIT_SUBMODULE_STRATEGY: recursive
test:
tags:
- alpine
script:
- hugo
artifacts:
paths:
- test
except:
- master
pages:
dependencies:
- test
tags:
- alpine
script:
- hugo
artifacts:
paths:
- public
only:
- master
Comptabilité des métadonnées du site Web avec un moissonnage par ISIDORE
En suivant la documentation d’ISIDORE sur le moissonnage via des métadonnées RDFA, il est possible d’ajouter dans head_custom.html
des différents templates d’Hugo, le code HTML
suivant afin de rendre compatible le site sous Hugo pour un moissonnage et une indexation des contenus par ISIDORE :
<!-- RDFa ISIDORE -->
<span typeof="foaf:page" about="URL">
<link rel="dcterms:identifier" href="URL" />
<meta property="dcterms:identifier" href="URL" />
<meta property="dcterms:title" content="TITRE" />
<meta property="dcterms:creator" content="AUTEUR 1" />
<meta property="dcterms:creator" content="AUTEUR 2" />
<!-- Etc. -->
<meta property="dcterms:created" content="2006-01-02" />
<meta property="dcterms:abstract" content="Description ou résumé" xml:lang="langue" />
<meta property="dcterms:language" content="langue de la page Web" />
<meta property="dcterms:type" content="Page Web" />
<meta property="dcterms:format" content="text/html" />
<meta property="dcterms:publisher" content="Editeur" />
<meta property="dcterms:subject" content="Mot clé" />
</span>
Cela permet d’exposer les métadonnées de l’entête de chacune des publications du site, ou des pages du site, sous la forme d’une structure RDF dans le code HTML
sous la syntaxe RDFa. A noter qu’il convient — le plus souvent, de nettoyer les champs dc:descriptons des codes <HTML>
qu’ils pourraient contenir.
Installation d’un site Web sous Hugo et déployé sur une hébergement Web de type LAMP
Il est possible d’utiliser une instance GitLab, par exemple le GitLab de l’IR* Huma-Num pour simplement produire des pages HTML et un site statique par exemple en utilisant le moteur de sites statiques HTML Hugo. Il est possible de faire cela sur d’autres instances de GitLab et bien sûr sur GitHub. Il conviendra d’utiliser l’intégration continue (IC) de gitlab pour charger le site Web statique produit dans un hébergement Web via des commandes SSH (par exemple avec des commandes telles que rsync
).
Limitations et usages de Pages dans Gitlab
- Dans l’instance GitLab de l’IR* Huma-Num, Pages est utilisable, mais il n’est pas possible d’avoir son propre nom de domaine directement dans Pages. Il est possible d’utiliser Pages avec un sous domaine en : votreprojet.gitpages.huma-num.fr.
- Dans l’instance GitLab du CNRS (Koha), il n’est pas possible d’utiliser Pages.
- Dans l’instance GitLab de l’Université Grenoble Alpes, Pages est utilisable, mais il n’est pas possible d’avoir son propre nom de domaine. Il est possible d’utiliser Pages. Il est possible d’utiliser Pages en .univ-grenoble-alpes.fr.
N’hésitez pas à nous signaler des instances de GitLab, qui dans l’ESR, proposeraient Pages.