Un site vite et bien (?) avec Hugo

Retour d’expérience : quitter Instagram et héberger ses propres galeries photo

Meta part en vrille…

Les conditions d’utilisation de Meta (Facebook, Instagram) ont récemment changé. Ils se gardent le droit d’utiliser toutes vos données pour entrainer leurs IA.

« Comme tout le monde, en fait ; et les autres ne demandent pas l’autorisation », me direz-vous à raison. Sauf que les conditions de Meta sont particulièrement infectes. D’abord, si vous vivez hors UE, vous n’avez pas le choix : soit vous les autorisez à utiliser vos données pour entrainer leurs IA, soit vous fermez vos comptes.

Si comme moi vous vivez dans l’Union Européenne, bonne nouvelle : vos données ne seront pas utilisées – pour l’instant ; et jusqu’ici il « y avait le choix ». Pas par un opt-in, une case à cocher dans les paramètres pour accepter de donner son travail ; pas par un opt-out simple comme une case à cocher pour refuser de donner son travail, mais par un formulaire dont il fallait déjà connaitre l’URL et les règles de remplissage1. Pire : le formulaire demande un code secret envoyé par mail, et peut demander de remplir un captcha en plus. Si ce dernier est présent, impossible de valider le formulaire, le code secret est systématiquement considéré comme incorrect (à moins que ça ait été corrigé cette semaine).

Instagram → une galerie personnelle

Or donc, il se trouve que j’avais un compte Instagram sur lequel je postais quelques photos, et qui en gros ne servait à peu près à rien : même avec les bons hashtags, l’algorithme actuel ne montrait ces images à personne d’autre que mes proches (et encore).

C’était donc l’occasion de le remplacer par un site internet. Après tout, si c’est juste pour montrer des photos à qui je peux donner le lien direct, ça fonctionne tout aussi bien, même mieux (format et tailles libres, propriété des images, organisation d’icelles…)

Tout ce dont j’ai besoin, c’est de pouvoir mettre des images, si possible dans des catégories, avec une description pour chacune d’elles ; et un moyen à peu près agréable de naviguer dans tout ça. Pas besoin de grande complexité, un site statique fait très bien l’affaire.

J’ai donc utilisé Hugo, un générateur de site statiques que j’utilise depuis longtemps.

D’ordinaire, je crée mes thèmes moi-même, pour avoir une gestion fine de l’affichage et éviter au maximum la complexité inutile. Sauf qu’en ce moment, j’ai un peu mieux à faire.

Or, il se trouve que depuis le temps qu’il existe, Hugo propose maintenant une grande variété de thèmes de tous les styles et de toutes les qualités, dont plusieurs dédiés à la création de galeries (avec des noms pas ultra originaux, mais très descriptifs). Je fouine un peu, en prends un qui me semble très correct, et c’est parti !

De rien du tout à un site (presque en ligne) en une soirée

Moins de quatre heures. C’est le temps qu’il m’a fallu entre le moment où j’ai commencé à regarder les thèmes de galeries dans Hugo et celui où j’avais une première version en ligne – ou plus exactement : et celui où j’ai commencé l’envoi sur le serveur, parce que j’ai une ADSL, et donc envoyer plus de 500 Mo de données c’est un peu long.

Le thème de galerie lui-même est très simple d’utilisation : il suffit de créer les dossiers avec quelques métadonnées, et d’y mettre les photos. Si la photo contient une légende dans ses exifs, elle sera utilisée. En fait, c’est tellement simple que je n’ai même pas de code à vous partager (la flemme de faire un dépôt public pour quelque chose qui serait totalement redondant avec la documentation et l’exemple fourni).

Et donc, le temps de configurer le HTTPS via Certbot puis que le transfert se termine, j’avais réalisé https://photos.spacefox.fr, qui n’a nécessité que très peu d’ajustements depuis (mentions légales, quelques photos et légendes manquantes…).

Alors, qu’est-ce qu’on peut tirer de tout ça ?

Les avantages de ce genre de solution (hugo + thème prédéfini)

  • C’est extrêmement efficace. Un site 100 % fonctionnel en une soirée !
  • Ça ne coute pratiquement rien à héberger, puisque c’est statique.
  • La surface d’attaque est ridiculement faible, puisque c’est statique.

En choisissant le bon thème :

  • Le design est responsive, propre et tout à fait cohérent.
  • Le HTML généré n’est pas absurde (ça n’est pas un dégueulis de <div> comme ont peut le voir souvent) et, si les JS/CSS sont objectivement gros pour le service rendu, ils restent acceptables.
  • Aucune surprise, aucune prise de tête sur des détails, juste du temps passé à faire, c’est du plaisir.
  • Il y a même un flux RSS.

Les inconvénients

  • Les intégrations (dans le partage dans les réseaux sociaux) ne sont pas terribles : image trop petite ; pas de possibilité de partager une image précise au sein d’une galerie.
  • J’ai un site qui doit ressembler à plein d’autres.
  • Toujours trop de CSS et de JS à mon gout.
  • Des éléments de design que j’aimerais bien changer, mais c’est pas si facile (exemple : les photos verticales dans la galerie qui sont toutes minuscules, je préfèrerais un fond gris neutre avec un cadre blanc pour une meilleure perception des couleurs, une police plus personnelle…)
  • Les dates dans le flux RSS sont… étonnantes.
  • Les styles de la seule page avec du texte semblent un peu pétés (ça ne devrait pas être compliqué à corriger, cela dit).
  • Aucun outil de commentaire ou de réaction (mais est-ce vraiment un inconvénient ?)

Au fait, et l’IA dans tout ça ? C’était le problème de base, non ?

J’ai bloqué tous les robots d’IA que je connais dans le fichier robots.txt, en admettant qu’il soit respecté.

On pourrait disserter sur la pertinence de bloquer les robots d’IA sur un site où toutes les images sont sous licence CC BY 4.0, mais… avez-vous déjà vu une IA respecter une telle licence ?


  1. Il suffit de mettre l’URL de la CNIL – https://cnil.fr/fr – dans le champ « Veuillez nous expliquer l’incidence de ce traitement sur vous. » pour que ça fonctionne… mais qui va deviner ça tout seul ?


Si on a besoin d’un site statique fait vite et bien, Hugo est un excellent choix, surtout maintenant qu’il y a beaucoup de thèmes très corrects. Et ce gratuitement, à l’aide d’outil 100 % libres !

Ceci fonctionne si on est prêt à accepter un design forcément déjà utilisé ailleurs (ou à s’investir dans la création d’un thème) ; et qu’on accepte les limites intrinsèques à un site statique et au thème choisi.


Et donc, je vous remets :


Logo CC BY 4.0 SpaceFox.

9 commentaires

Merci pour le retour d’expérience. Du coup pour être davantage satisfait par le rendu l’étape suivante sera peut-être la création d’un thème quand tu auras plus de temps ? En point positif, je vois aussi les fonctionnalités clefs en main (loupe/téléchargement/défilement/…), c’est sans doute ce qui amène un peu de JS aussi…

Du coup pour être davantage satisfait par le rendu l’étape suivante sera peut-être la création d’un thème quand tu auras plus de temps ?

Vk

Possiblement (même si vu l’état de mon temps libre en ce moment, ça attendra peut-être la retraite :D ). Surtout que ça fait un moment que j’ai pas fait de thèmes Hugo, et que maintenant ça a l’air beaucoup de passer par des « modules » écrits en Go, de ce que j’ai compris – en tous cas ça a l’air beaucoup plus complexe qu’à une époque.

En point positif, je vois aussi les fonctionnalités clefs en main (loupe/téléchargement/défilement/…), c’est sans doute ce qui amène un peu de JS aussi…

Vk

J’avais une preuve de concept pour faire le défilement et le téléchargement en HTML pur, par contre j’avais même pas pensé à la loupe. C’était surtout un problème de peaufinage, de compatibilité et d’intégration.

Les dates dans le flux RSS sont… étonnantes.

Il ne s’agit pas de celle indiquée dans le front-matter de l’album ?

maintenant ça a l’air beaucoup de passer par des « modules » écrits en Go, de ce que j’ai compris – en tous cas ça a l’air beaucoup plus complexe qu’à une époque.

SpaceFox

Ouais, je trouve aussi. Je me suis tourné vers Hugo pour un site de type blog/vitrine pour sa simplicité, et lorsque j’ai voulu choisir un thème, l’installation devenait un peu complexe entre go et npm, je ne pouvait pas demander à des non-dev de venir rédiger du contenu en ayant un environnement aussi complexe. J’ai trouvé difficile de trouver un theme qui ne demande pas d’outils supplémentaires.

+0 -0

Il ne s’agit pas de celle indiquée dans le front-matter de l’album ?

romantik

Probablement (je ne les ai pas renseignées), mais je m’attendais surtout à ce qu’il récupère les dates des photos directement dans les Exif.

Ouais, je trouve aussi. Je me suis tourné vers Hugo pour un site de type blog/vitrine pour sa simplicité, et lorsque j’ai voulu choisir un thème, l’installation devenait un peu complexe entre go et npm, je ne pouvait pas demander à des non-dev de venir rédiger du contenu en ayant un environnement aussi complexe. J’ai trouvé difficile de trouver un theme qui ne demande pas d’outils supplémentaires.

romantik

Dans tous les cas c’est le « défaut » de l’outil Hugo : par conception, la création/édition de contenu et son déploiement sont assez techniques (édition de fichiers markdown avec un front-matter, commande pour build, synchro sur le serveur). C’est très simple si tu es habitué à ce genre d’outils ; mais typiquement ça rends très compliqué son usage pour ma mère, qui pourrait en avoir besoin pour son boulot de photographe.

ça rends très compliqué son usage pour ma mère, qui pourrait en avoir besoin pour son boulot de photographe.

SpaceFox

Le site dont je parle était fait avec Publii, un générateur de site statique en WYSIWYG avec une interface clicodrome. J’ai poussé à migrer sous Hugo pour la collaboration, car Publii gère ses contenus dans une base sqlite et configure le chemin de ses projets dans un dossier particulier ~/Documents/Publii, ce qui ne le rendait pas très gittable. Mais à part ça, ça avait l’air pas mal, si elle travaille seule ça répond peut-être à ses besoins.

+1 -0

Si vous devez vraiment allez vite dans la création d’un site web et sans compétence, je recommande Scribouilli.
Il a aidé pas mal de candidats aux législatives dernièrement.

Bien plus limité que Hugo mais clé en main, il ne manque plus que l’achat et la configuration du nom de domaine.

+1 -0

J’entends parler d’Hugo depuis longtemps mais j’ai jamais sauté le pas.

Je navigue surtout entre du fait maison (mon site perso tournant sur Laravel) et Jekyll pour déployer via GitHub Pages : l’avantage étant que le build est automatique sur GitHub et qu’il y a pas grand chose à maitriser.

Mais Jekyll a pas l’air d’avoir un gros écosystème de thèmes, contrairement à Hugo (dont j’ai découvert la liste de thèmes grace à ton billet).

Ce qui manque à ce genre de système est la syndication je trouve, pour ne pas avoir à utiliser un autre soft pour suivre les autres blogs. Le RSS est bien pour exposer ses contenus mais ça permet pas de suivre les autres au même endroit ni de montrer qui on suit. Le côté social d’Instagram est quand même pas négligeable (même si, bon, les algos…)

Ce qui manque à ce genre de système est la syndication je trouve, pour ne pas avoir à utiliser un autre soft pour suivre les autres blogs. Le RSS est bien pour exposer ses contenus mais ça permet pas de suivre les autres au même endroit ni de montrer qui on suit.

viki53

Je suis d’accord, mais j’imagine que ce genre de fonctionnalité est incompatible avec la notion de « site statique ».

Le côté social d’Instagram est quand même pas négligeable (même si, bon, les algos…)

viki53

Le fait est qu’en ce qui me concerne, le côté social (en terme de diffusion de mon contenu) d’Instagram est devenu négligeable, ça m’a aidé à franchir le pas. Par contre, je me sers toujours de mon compte pour voir d’autres comptes ; et clairement ma situation n’est pas celle de tout le monde.

Ce qui manque à ce genre de système est la syndication je trouve, pour ne pas avoir à utiliser un autre soft pour suivre les autres blogs. Le RSS est bien pour exposer ses contenus mais ça permet pas de suivre les autres au même endroit ni de montrer qui on suit.

viki53

Je suis d’accord, mais j’imagine que ce genre de fonctionnalité est incompatible avec la notion de « site statique ».

Clairement oui.

Quoiqu’il y aurait moyen de stocker une liste de comptes dans un fichier de config et de charger des données dynamiquement en JS côté client.

Le côté social d’Instagram est quand même pas négligeable (même si, bon, les algos…)

viki53

Le fait est qu’en ce qui me concerne, le côté social (en terme de diffusion de mon contenu) d’Instagram est devenu négligeable, ça m’a aidé à franchir le pas. Par contre, je me sers toujours de mon compte pour voir d’autres comptes ; et clairement ma situation n’est pas celle de tout le monde.

SpaceFox

Certes, et c’est l’aspect qui me freine à quitter ce site pourtant Ô combien déplaisant (j’essaye par exemple de me limiter à la version Web, mais sur mobile c’est même pas utilisable)

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte