[Tuto] Construire son blog low-tech

2023/11/02 - Pourquoi et comment concevoir un site basse consommation.

1/ Pourquoi un site basse consommation ?

Croissance énergétique et besoins numériques

Entre 2013 et 2017, la consommation globale du numérique est passée, selon le Shift Project ¹, de 2000 à 3000 TWh par an, et elle atteint près de 14% de la consommation électrique mondiale. D’ici 2025, la consommation énergétique du numérique devrait continuer à croître à un rythme annuel de 10% et pourrait se situer entre 5700 et 7300 TWh en 2025.

Rappelons par ailleurs que le numérique est responsable de 4% des émissions de gaz à effet de serre au niveau mondial et que l’usage du numérique y contribue à hauteur de 25% (là où la fabrication des équipements tels les infrastructures réseaux, les data centers et les terminaux des utilisateurs contribuent à hauteur de 75%). ²

Sur la question de la consommation d’énergie et sur l’usage des ressources (nombreuses et nécessaires à la production d’un nombre toujours croissant d’infrastructures hardware – datacenters, réseaux, ordinateurs, smartphones) de très nombreuses instances appellent à la sobriété numérique ³.

Cependant la croissance exponentielle de la consommation de ressources et d’énergie (Yet another exponential growth…) s’explique par un double constat :

• Tout d’abord, la révolution numérique a modifié la nature des relations humaines. Les possibilités d’expressions humaines, qui définissent à peu de choses près ce qui fait de nous des êtres humains, sont maintenant indissociables des infrastructures numériques de notre société. Cela s’est traduit par un phénomène de numérisation de nos vies. qui a conduit à dématérialiser de plus en plus de rapports sociaux: faire les courses, discuter, sortir au cinéma, lire, s’informer. Vivre déconnecté est de moins en moins possible, puisque cela signifierait s’exclure de la vaste majorité des activités humaines.

• Et deuxièmement, les tendances sociales de notre culture mondialisée entraînent une croissance exponentielle des besoins énergétiques par une action élémentaire. Autrement dit, l’énergie nécessaire pour regarder un site web a été multipliée par 10 pendant les 20 dernières années. Les mêmes besoins demandent désormais exponentiellement plus d’énergie qu’avant pour être satisfait. Mais alors, comment en est-on arrivé là ?

Le mythe de l’immatérialité

Le numérique est assez insidieux. Pour déplacer une table de la cuisine sur la terrasse, n’importe qui a une idée assez simple de la quantité d’énergie nécessaire, porter la table est un peu trop pour moi tout seul, je vais demander de l’aide à Lou. À l’opposé, ce que l’on appelle l’immatérialité du numérique se comprend comme une rupture de cette compréhension des dépendances énergétiques. L’application de streaming fonctionne, mais l’utilisateur n’a aucune idée de la consommation d’énergie que celle-ci demande. D’autant plus que dans nos pays occidentaux, où l’énergie peut encore être considérée comme très peu chère et accessible, en y ajoutant que nos modèles économiques sont basés sur la personnalisation publicitaire, la question de l’énergie a disparue des soucis de l’utilisateur. Une conséquence de ce mythe de l’immatérialité a été une propension croissante à l’instantanéité des services (on s’attend à recevoir instantanément nos mails, que les vidéos streaming se chargent sans attente…).

Ainsi, petit à petit, le manque de connaissance et la croyance en une “immatérialité” des services numériques a entraîné une explosion des puissances nécessaires à la réalisation des services maintenant numérisés ainsi qu’une perte des savoirs-faire issus des anciennes contraintes techniques de capacités de stockages et de calculs, aujourd’hui largement dépassés par les progrès techniques du secteur.

Réintroduire l’efficience au cœur des développements numériques

Sur la question des besoins énergétiques et matériels du secteur du numérique, stopper cette folie exponentielle de croissance doit passer par une restructuration des activités numériques autour de la problématique suivante :

Ré-introduire l’efficience au centre des développements numériques !

L’efficience vise une équation équilibrée entre la satisfaction d’un besoin et les dépenses en ressources nécessaires à cette satisfaction. Ses moyens d’actions portent alors aussi bien sur la réduction des besoins en ressources que sur la réduction des actions incompatibles avec une sobriété numérique. Concernant le premier point, les leviers sont techniques et nombreux. Concernant le deuxième point, les leviers sont plus sociaux, et viennent d’une mauvaise compréhension des besoins en ressources du numérique. Par exemple, l’ajout de nombreuses features, cookies, tracking par les concepteurs rendent les sites web bien plus lourd qu’avant. Il est alors question de réinterroger les pratiques d’écriture et de partage de contenu numérique.

Cet article présente les moyens mis en place lors de la création de ce site web afin de minimiser ses besoins énergétiques.

2/ Créer un site basse consommation

A/ Un site de complexité intermédiaire

Aucun de nous deux n’avaient à priori de compétences en création de site web. Nous possédions une connaissance extrêmement rudimentaire des langages html et css. Cependant nous avions la volonté d’apprendre à travers ce projet de blog.

Les plateformes “grand public” de réalisation de site web (comme Wordpress) sont à double tranchant. D’un coté, elles facilitent la réalisation de contenu web, mais de l’autre, elles invisibilisent la manière dont est agencé, procédé, manipulé l’information. Et par ailleurs, la sobriété numérique est rarement l’une des considérations de ces plateformes. Cependant, écrire un site web à partir de rien, en css, html, js était hors de question. Bien que cela aurait été possible, les efforts à fournir étaient trop nombreux. Par soucis d’accessibilité, nous avons souhaité explorer d’autres méthodes, que l’on peut qualifier de niveau intermédiaire… Celles-ci demandent des compétences plus rudimentaires en programmation, mais nécessitent de comprendre comment le contenu est créé.

D’un autre coté, nos recherches sur la création d’un site basse consommation nous ont fait prendre conscience de plusieurs leviers. Gauthier Rousshile, dans l’article pour la création d’un site low-tech⁴ les classes en 3 catégories:

• Réduction de l’impact à l’usage
• Réduction du transfert de données
• Réduction des besoins matériels (électricité, équipements…)

Cette recherche de niveau intermédiaire, ainsi que la volonté de réduire l’empreinte écologique de notre blog, ont aboutit à trois principes clés:

• Les sites statiques.
• Le langage Markdown.
• Le concept de dithering.

B/ Les sites statiques ?

Site statique VS site dynamique

Une des tendances des sites actuels est qu’ils sont conçus de manière dynamique, cela signifie qu’à chaque fois que quelqu’un se connecte sur le site, la page est générée du côté serveur à partir du code et des informations qui le définissent. Cela veut dire qu’à chaque requête de connexion, une quantité d’énergie est consommée pour générer le site web. Cela permet de construire des pages plus personnalisées (en générant de la publicité ciblée par exemple, ou bien pour gérer l’affichage d’une base de donnée en fonction du filtre sélectionner par l’utilisateur), mais autant le dire, si les besoins n’exprime pas clairement la nécessité d’une page dynamique, alors il convient d’opter pour une page statique. Une page d’un site est dit statique si celle-ci est générée une seule fois, la page est stockée côté serveur. Lors d’une requête de connexion, le site statique peut directement rediriger vers le fichier de la page. Ainsi, pour 300 visites, un site dynamique génère 300 pages web tandis qu’un site statique n’en aura généré qu’une seule !

Réaliser son site statique

Inspiré par des sites basses consommations comme celui du low-tech magazine⁵, nous avons découvert les générateurs de sites statiques. Ceux-ci sont nombreux, leur principe est simple : créer une structure rudimentaire pour écrire du contenu et générer un site statique. En général, la création d’un site implique alors :

1. Choisir un générateur de site statique et l’installer (c’est une application, souvent un CLI pour les curieux)
2. Choisir un thème.
3. Installer le thème, personnaliser le thème en suivant le wiki du thème, voir modifier le thème avec des ajouts css et markdown pour les plus motivés.
4. Ecrire du contenu (en markdown).
5. Générer le site.

Autrement dit, vous n’avez besoin que d’un gestionnaire de fichier et d’un éditeur de texte pour générer votre site web ! Aucune compétence en html ou css requise. Seulement un peu de lecture de la documentation de votre thème: les plus détaillées expliquent comment modifier un certain nombre de paramètres depuis un unique fichier config.toml, et là, pas besoin de nombreuses compétences : parameter: true ou parameter : false suffisent souvent pour indiquer l’état d’un paramètre. Bien sûr, vos choix sont assez vite limités : si vous voulez une personnalisation totale du site web, vous serez amené à créer par vous même vos classes CSS (que vous écrirez dans base.css ou quelque chose comme ça…)… Vous n’aurez plus qu’à y faire appel en écrivant votre contenu.

Ecrire le contenu de votre site est de loin la partie la plus simple, je vous invite à lire la partie suivante sur le langage markdown pour quelques approfondissements !

Nous avons essayé Pelican , Hugo , Zola qui sont trois générateurs puissants et simple d’usage. Notre choix s’est arrêté sur Hugo car c’est sur ce dernier que nous avons trouvé le thème monochrome , le plus proche de nos besoins et envies.

C/ Langage Markdown

Structure des générateurs de site statique

Les thèmes proposés par les générateurs Hugo, Zola, Pelican, permettent très facilement d’obtenir une structure de site internet. Il convient ensuite de le personnaliser et d’y rajouter son contenu. Pour Hugo par exemple, le code html est dans le fichier layout, le code css dans assets et les pages de blog sont dans content. Oui, le contenu des pages web (les articles, les pages de blog, etc) sont stockés dans un dossier à part, et le language Markdown permet de les rendre presque entièrement exempt de lignes de code. Il vous suffit alors d’écrire vos articles sur le gestionnaire de texte de votre choix (un simple notepad ou bien des applications plus complètes comme Obsidian, Joplin, Atom), de les sauvegarder en .md et de les placer dans content. C’est le générateur de site statique Hugo qui se chargera ensuite de transformer le .md précédent en page complète html. Bien sûr quelques règles d’écritures s’imposent, mais rien de bien compliqué (voir la partie suivante.)

La personnalisation de notre blog a demandé de se plonger dans les fichiers html et css du thème choisit. Cela est facultatif, car bien souvent, pour de nombreuses personnalisations, les thèmes proposent une documentation détaillant comment transformer les couleurs, les titres, les pages… Cependant, nous avons souhaité créer notre propre thème à partir d’un thème de base.

Ecrire en Markdown

L’écriture est très simplifiée par les générateurs de sites statiques. Les pages sont écrites en markdown :

Markdown est un langage d’écriture créé pour permettre un balisage simple et efficace tout en gardant un maximum d’accessibilité et de lisibilité. Autrement dit, c’est un langage de balisage facile à lire dans sa forme non formatée. Ce langage permet une écriture simplifiée et compréhensible du contenu de notre site web.

Par exemple:

# Ceci est un titre 1 en markdown

## Et la un titre 2

** Ce texte est en gras **

De nombreux wiki mardown existent, en voici un assez didactique.

D/ Images et dithering

L’augmentation du poids des pages web est en grande partie causée par l’accroissement de la taille des images. Plusieurs méthodes existent alors pour réduire la taille de ses images. L’une d’elles, le dithering fut une source d’inspiration pour notre identité visuelle. Son côté rétro nous a tapé dans l’œil. Le principe du dithering illustre par ailleurs assez bien la notion d’efficience numérique, le “faire mieux avec moins”.

Le principe du dithering est de recréer l’illusion d’une “profondeur de couleur” dans les images dont la palette de couleurs est limitée. Les couleurs qui ne sont pas disponibles dans la palette sont approximées par une diffusion de pixels colorés provenant de la palette disponible. L’œil humain perçoit la diffusion comme un mélange des couleurs qu’elle contient. Cela permet de réduire la taille des images en réduisant le nombre de pixel et le nombre de couleurs au minimum. Ce procédé permet de réduire d’un facteur 5 à 20 la taille d’une image. On passe ainsi aisément d’une image de 4 ou 5 Mo à une image ditheré de 50 à 300 Ko! Et ce, en gardant un accessibilité visuelle totalement acceptable et un style retro assez unique :

^Image ditheré avec DitherIt⁶

^Autre exemple de palette pour le dithering (Blue & Yellow)

^Image d’origine

Les images tramées (oui, on dit tramé en français), en particulier celles qui comportent relativement peu de couleurs, se distinguent souvent par un aspect granuleux ou moucheté caractéristique.

D’un point de vue informatique, le dithering est l’application volontaire d’un bruit afin de randomiser les erreurs de discrétisation⁷. L’article Ditherpunk explore de manière pédagogique les secrets informatiques derrière le dithering.

3/ Publication de notre blog

Une fois que l’on a notre contenu généré, il ne manque que deux choses afin de rendre son blog accessible sur internet: nom de domaine et hébergeur. Sur ces points, de nombreuses considérations peuvent être faites (concernant l’éthique des structures d’hébergements, leurs politiques de protection des données, la qualité des services, l’étendue des moyens de gestion et d’administration de son site ou, au contraire, le conditionnement de son activité…). Nous laisserons de côtés ces réflexions pour un autre article afin de nous concentrer sur le thème d’aujourd’hui: les sites basse consommation.

Choisir son nom de domaine

Très peu de levier à première vue pour réduire la consommation via le nom de domaine. Cependant, tout comme les banques, l’argent que vous investissez dans votre nom de domaine va in fine servir vos convictions ou s’y opposer. Vérifiez alors que la structure qui détient votre nom de domaine est transparente sur les sources d’énergie qu’elle utilise, et que ses valeurs (ses engagements en terme d’éthique) comprennent la réduction de l’impact environnemental du numérique.

Nous concernant, nous avons choisi Gandi principalement pour des visions éthique de transparence, d’intégrité et d’un web ouvert et accessible à tous.

Choisir son hébergeur

Un hébergeur, sur le volet environnemental, a le choix d’utiliser ou non une énergie verte, et choisit la durée de vie de ses infrastructures. Ainsi si votre hébergeur n’a que faire de la sobriété et qu’avec ses partenaires il décide de changer ses datacenters tous les 2 ans pour créer de la valeur économique afin de continuer l’extraction de ressources (Mouahaha), alors votre argent peut vous sembler mal investit.

Ainsi chez Deuxfleurs , notre hébergeur membre des CHATONS⁸, sont transparents concernant le matériel hardware qu’ils utilisent ainsi que leur position sur le sujet de la consommation d’énergie (voir leur article ici ).

Commentaires :