Il y a quelques temps, je vous avais prĂ©sentĂ© Piwigo, une solution libre auto hĂ©bergĂ©e de galerie d’images. Suite Ă  la rĂ©installation de mes outils sur un nouveau serveur, je n’avais pas vraiment envie de reprendre cet outil… Il est très bien, mais je ne voulais pas encore une fois depuis installer une base MySQL juste pour lui car je prĂ©fère PostgreSQL. Je me suis donc demandĂ© s’il n’Ă©tait pas possible de tout simplement gĂ©nĂ©rer ma galerie photos avec Hugo en mode site statique… Et bien oui.

L’idĂ©e

Mon besoin en termes de galerie photo est très simple : un site basique et esthĂ©tique, sans fioritures ni fonctionnalitĂ©s inutiles. J’ai fini par trouver mon bonheur dans les thèmes du gĂ©nĂ©rateur de sites statiques Hugo avec AutoPhugo. Le thème va mĂŞme un peu plus loin que je ne l’avais imaginĂ© car il est capable de gĂ©nĂ©rer les miniatures et versions allĂ©gĂ©es pour l’affichage des photos, tout en proposant le tĂ©lĂ©chargement du fichier original. Parfait, Ă  l’attaque !

Créer le site Hugo avec le thème AutoPhugo

Créer le site

Je ne reviendrai pas sur comment installer Hugo, tout ceci a Ă©tĂ© expliquĂ© dans l’article dĂ©diĂ©. Dans le rĂ©pertoire de votre choix, crĂ©ez un nouveau site Hugo. Ici, je l’appelle “galerie”.

$ hugo new site galerie
$ cd galerie
$ git init

Une fois le site créé, on initialise un repo Git qui servira à stocker les sources.

Ajoutez le thème AutoPhugo en tant que submodule.

$ git submodule add https://github.com/kc0bfv/autophugo.git themes/autophugo

La base est faite, on peut attaquer la config du site.

Récupérez la config du site Example et placez le ficher config.toml à la racine du dossier galerie. Adaptez les paramètres à votre convenance pour les données Auteur, liens diverses de contact, etc.

Attention : Le formulaire de contact proposĂ© par ce thème redirige vers un site externe www.formspree.io. Personnellement je l’ai dĂ©sactivĂ© car je prĂ©fère un outil que je maĂ®trise.

Déposer une première photo et tester

La façon dont les photos sont gĂ©rĂ©es n’est pas Ă©vidente du premier coup, voici comment le système procède.

Les photos sont dĂ©posĂ©es dans le dossier assets/. Il est possible de les disposer sous forme de sous dossier et de crĂ©er des albums et des sous albums Ă  partir d’eux.

Les albums sont gĂ©nĂ©rĂ©s en plaçant un fichier _index.md dans le dossier content/. Il est conseillĂ© de reproduire dans content la mĂŞme arborescence que dans assets/ pour mieux vous y retrouver. Le fichier _index.md ne contiendra que l’entĂŞte technique utilisĂ©e par Hugo avec une liste en YAML qui listera les photos Ă  afficher.

Pour schématiser :

assets/
├── lille
│   └── beffroi
│       └── 20200106
│           ├── DSC_0012_01.jpg
│           ├── DSC_0015_01.jpg
            (...)
content/
├── lille
│   ├── beffroi
│   │   ├── 20200106
│   │   │   └── _index.md # ce fichier contient la liste de toutes les
                          # photos du sous album "20200106"
│   │   └── _index.md # ce fichier permet d'indiquer que le dossier
                      # "beffroi" est un sous album de "lille"
│   └── _index.md # ce fichier permet d'indiquer que le dossier
                  # "lille" est un album

Le contenu des fichiers _index.md est donc le suivant :

# content/lille/_index.md
---
# titre visuel de l'album
title: "Lille"
# page de garde de l'album
albumtumb: "lille/beffroi/20200106/DSC_0012_01.jpg"
---

# content/lille/beffroi/_index.md
---
title: "Beffroi"
albumtumb: "lille/beffroi/20200106/DSC_0012_01.jpg"
---

# content/lille/beffroi/20200106/_index.md
---
title: "20200106"
albumtumb: "lille/beffroi/20200106/DSC_0012_01.jpg"
# la liste de toutes les photos Ă  afficher
resources:
- src: "lille/beffroi/20200106/DSC_0012_01.jpg"
- src: "lille/beffroi/20200106/DSC_0015_01.jpg"

Pour aider dans la crĂ©ation des fichiers _index.md, j’ai Ă©crit un petit script en Python qui s’occupe de les gĂ©nĂ©rer. Il suffit de l’exĂ©cuter en Ă©tant dans le rĂ©pertoire photos prĂ©sent dans static/ et il gĂ©nĂ©rera la mĂŞme arborescence dans content/.

Générer la galerie

Pour gĂ©nĂ©rer la galerie photo, il suffit de lancer la commande hugo comme Ă  l’accoutumĂ©. Par contre, son exĂ©cution sera plus longue que d’habitude car Hugo va convertir les photos dans les diffĂ©rents formats attendus… Et il n’est pas vraiment fait pour j’ai l’impression. En effet, bien que j’ai 16 threads sur mon PC, le temps de gĂ©nĂ©ration pour une vingtaine de photos Ă©tait très long (une minute environ). Le multithread ne me semble pas vraiment exploitĂ© car un htop retournait un calme plat niveau charge système.

Je pense qu’il s’agit lĂ  d’une des limitations de l’exercice, mais elle n’est pas bloquante en soit.

Mettre en place la génération automatique

De la mĂŞme manière que j’ai fait pour ce blog, la gĂ©nĂ©ration de la galerie photo est pilotĂ© par un pipeline Jenkins dĂ©clenchĂ© lors d’une dĂ©tection d’un commit sur le dĂ©pĂ´t Git.

Dans la mesure oĂą cette partie est identique Ă  mon article au sujet d’Hugo, je vous invite Ă  lire la section consacrĂ©e Ă  ces Ă©tapes plutĂ´t que de les rĂ©pĂ©ter ici.

Eviter de faire supporter toutes les images par Git

Le principal souci avec mon approche est que Git se retrouve Ă  devoir gĂ©rer une tonne de fichiers binaires, et ça c’est pas son truc. En effet, Git se base sur des mĂ©canismes de cryptographie pour produire le versionnage des fichiers qu’il gère et ĂŞtre capable de conserver un index cohĂ©rent. Naturellement, il va appliquer tout ceci aux fichier image que la galerie va stocker et ce n’est absolument pas optimisĂ© pour.

De ce fait, le temps pour les actions de commit et de push sont longues car Git sera incapable de comprendre la diffĂ©rence entre deux photos pour juste tracer celle-ci, sans parler de l’espace disque qui augmentera puisqu’il reprendra la totalitĂ© du fichier. Pour rĂ©soudre ce souci, je vous propose de passer par Git LFS.

Qu’est-ce que Git LFS

Git LFS (pour Large File Storage) est un projet maintenu par GitHub. Il se prĂ©sente sous la forme d’un binaire Ă©crit en Go Ă  installer qui s’inclue dans les commandes Git habituelles. Si historiquement Git LFS Ă©tait très liĂ© Ă  GitHub, sa spĂ©cification ouverte a permis des implĂ©mentations dans de nombreux autres gestionnaires de code comme GitLab ou Gitea.

Le principe de Git LFS est très simple : il remplace le fichier binaire par un pointeur renvoyant vers le stockage de fichiers volumineux. Ainsi, cloner le repo va beaucoup plus vite puisque Git se contente de tĂ©lĂ©charger les fichiers de pointeur. Il ne rĂ©cupĂ©rera les vrais fichiers qu’en cas de besoin. L’intĂ©rĂŞt est aussi de rĂ©duire l’espace disque du repo. Par contre attention, gardez en tĂŞte que les services en ligne tels que GitHub peuvent appliquer des limitations d’espace ou de bande passante relative au LFS.

git-lfs Fonctionnement Git LFS, source : site du projet, licence MIT

Installer et activer Git LFS

Plusieurs moyens s’offrent Ă  vous, pour ma part je l’ai fait via le dĂ©pĂ´t de Fedora. Je vous invite Ă  consulter le site de Git LFS pour choisir la mĂ©thode qui nous convient.

$ dnf install git-lfs

On se place ensuite dans le clone et on indique sur quel fichier activer le mode LFS avec la commande suivante :

$ git lfs track "*.png"
$ git lfs track "*.jpg"

Ceci active le mode LFS pour tous les fichiers JPG ou PNG. Un nouveau fichier est apparu dans le repo : .gitattribues. Si vous regardez son contenu :

$ cat .gitattributes
*.png filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text

Vous remarquez aussi en faisant git status que tous vous fichiers binaires ont été modifiés : ils ont été transformés en pointeurs et leur version réelle se trouve désormais dans .git/lfs.

On commit le nouveau fichier .gitattributes puis on pousse tout sur le repo.

Exemple de résultat dans Gitea :

gitlfs

RĂ©cap et aller plus loin

Pour rĂ©capituler les actions, la construction d’une galerie photo avec Hugo se fait de la mĂŞme façon qu’un site normal. La gestion des albums prend un peu de temps Ă  ĂŞtre comprise mais on acquiert ça assez vite quand mĂŞme.

Construire la galerie photo se fait de la même façon que le site, avec la commande hugo. Celle-ci prend cependant un peu plus de temps car la génération des miniatures est peu performante.

Utiliser Git LFS permet d’Ă©viter de mal gĂ©rer les fichiers binaire et Ă©vite de multiplier leur nombre et donc la taille du repo.

Une autre possibilitĂ© pour soulager Git de ce travail est d’externaliser la publication des photos. Je n’ai pas testĂ© de le faire, mais il me paraĂ®t rĂ©alisable de stocker les photos sur un hĂ©bergement type CDN. Par contre cela risque d’impliquer des coĂ»ts supplĂ©mentaires d’hĂ©bergement. Dans mon cas, je reste assez peu exigent car la durĂ©e de gĂ©nĂ©ration ne me dĂ©range pas particulièrement et j’hĂ©berge moi-mĂŞme le serveur Git.