pole-com.pages.ensimag.fr, c’est la nouvelle adresse à retenir pour retrouver tout le contenu produit pas le Pôle Com' : Ensi’Mags, articles et galeries d’images.

Ensilibre a participé à la réalisation de ce site web et vous propose ici d’explorer les coulisses du projet. Si le côté technique ne vous intéresse pas, retrouvez l’annonce du Pôle Com' ici.

Vous aimez ce que vous voyez et vous voulez participer ? Alors venez nous parler sur Matrix ou par email, on recrute !

TL;DR

Le site du Pôle Com' repose sur les mêmes technologies que ensilib.re :

• code source sur gitlab.ensimag.fr
• site compilé sur l’intégration continue de GitLab par Hugo
• hébergement du contenu statique par GitLab Pages

Nous avions déjà proposé un tutoriel sur l’utilisation de ces technologies l’an dernier.

Contrairement à ensilib.re, le Pôle Com' voulait héberger de gros fichiers sur son site (photos et magazines). Pour éviter de surcharger GitLab, nous avons choisi d’externaliser le stockage de ces fichiers. Ils sont hébergés sur IPFS pour adhérer au maximum à l’esprit de décentralisation d’Ensilibre.

Le projet du site a été lancé début février.

---

Structure

est un générateur de sites web particulièrement adapté pour les blogs et les sites vitrines.

Organisation

Hugo sépare clairement la mise en page du contenu :

• Les articles vont dans content/articles, les mags dans content/mags, les albums dans content/albums.
• Les mises en page vont dans layout.

Pour chaque page définie dans le dossier content, Hugo détermine la mise en page à utiliser dans layout en fonction de règles de priorité puis génère la page HTML avec.

Hugo fournit un système de thèmes pour fournir des mises en page par défaut ré-utilisables.

Thème

Quelques centaines de thèmes sont disponibles. ensilib.re utilise le thème Terminal, qui est simple et nerdy (un peu trop ?). Pour notre tuto Hugo nous avions proposé Tranquilpeak, qui propose une belle barre latérale sur fond d’image.

Le Pôle Com' s’est fixé sur Hugo Future Imperfect Slim qui fournit une mise en page de type blog réactive, sur une ou deux colonnes selon la taille de l’écran. Il propose de plus une fonctionnalité de recherche (avec Lunr) et de galeries d’images (avec Fancybox).

Site statique

Les sites générés pas Hugo sont statiques. Si vous ne n’êtes pas sûr de comprendre la différence entre statique et dynamique dans ce contexte, je vous laisse méditer sur cette analogie :

Le site de gauche propose des fichiers générés à l’avance, prêts à être servis, tandis que celui de droite prépare chaque fichier sur mesure. Les sites statiques sont beaucoup plus simples à héberger et consomment généralement moins d’énergie.

GitLab fournit un module dédié à l’hébergement de sites statiques : GitLab pages.

---

Génération et hébergement

Livraison continue

GitLab peut être configuré pour exécuter des pipelines d’intégration et de livraison continues à chaque changement sur le dépôt. Dans un projet logiciel classique, on va pouvoir par exemple tester la compilation et exécuter les tests à chaque changement sur les branches de travail et générer des paquets et installeurs à chaque changement sur la branche principale.

C’est exactement ce qu’on met en pratique ici avec Hugo. Ce fichier .gitlab-ci.yaml à la racine du dépôt indique à GitLab d’exécuter le générateur de pages d’Hugo à chaque changement et en plus de publier le contenu du dossier public généré par Hugo lors de changements sur la branche main.

GitLab Pages

La publication et l’hébergement sont ensuite gérés par GitLab Pages, qui gère les sites en *.pages.ensimag.fr.

La règle de GitLab Pages sur l’adresse du site est la suivante :

Adresse du projet	Adresse du site
gitlab.ensimag.fr/<namespace>/<namespace>.pages.ensimag.fr	<namespace>.pages.ensimag.fr
gitlab.ensimag.fr/<namespace>/<projet>	<namespace>.pages.ensimag.fr/<projet>/

Donc le projet gitlab.ensimag.fr/pole-com/pole-com.pages.ensimag.fr publie via GitLab Pages à l’adresse pole-com.pages.ensimag.fr. 🎉

---

Hébergement pour les mags/images

Le Pôle Com' souhaite rendre ses magazines et des albums photos disponibles sur son site, mais un dépôt Git n’est pas adapté pour accueillir autant de données…

Extension Git pour le stockage de gros fichiers

La première option à laquelle nous avons pensée pour résoudre ce problème est Git LFS. C’est une extension Git développée par GitHub qui stocke les gros fichiers hors du dépôt et les remplace par des pointeurs dans le dépôt. Mais pour le Pôle Com' ce n’était pas encore suffisant : le site généré par Hugo contenait encore tous ces gros fichiers, et dépasserait à terme la taille maximale acceptée par GitLab Pages de 2 Go.

Git LFS est encore utilisé pour certaines images du dépôt : le logo du Pôle Com', ou les images des articles par exemple.

Le système de fichiers inter-planétaire

Nous avons donc cherché une autre solution de stockage, qui devait réunir les conditions suivantes :

• accessible via HTTP
• accessible financièrement
• libre 🙃
• assez performante
• ne dépend pas d’une seule personne

ou l'InterPlanetary File System, réunit tous ces critères. C’est une solution de stockage et de partage de fichiers de pair à pair relativement récente (2015) mais qui se démocratise. Des membres du Pôle Com' et d’Ensilibre hébergent une copie des mags et albums photos sur des nœuds IPFS et les rendent alors accessible au reste du réseau. À partir de là pour quelqu’un qui consulte pole-com.pages.ensimag.fr, deux solutions :

• Soit cette personne dispose d’un navigateur qui supporte IPFS, comme Brave ou Firefox avec l’extension IPFS Companion. Dans ce cas elle récupère les fichiers directement depuis IPFS et les redistribue.
• Soit cette personne n’a qu’un navigateur classique. Dans ce cas elle récupère les fichiers depuis une passerelle HTTP↔IPFS telle que jorropo.net, cloudflare-ipfs.com ou ipfs.guichard.eu, sans même savoir que le fichier vient en fait d’IPFS.

Si vous avez bien suivi vous comprendrez que pour améliorer les performances du site du Pôle Com', pour vous et pour les autres, il vaut mieux le consulter avec un navigateur compatible IPFS 😉