davidbgk
/
larlet-fr-david-cache

title: Un coup d’œil sous le capot
url: https://blog.gandi.net/fr/posts/un-coup-d-oeil-sous-le-capot/
hash_url: e29bd9361e89e31ac21ee21180ec1dfb

<p><img src="https://blog.gandi.net/fr/posts/un-coup-d-oeil-sous-le-capot/illustration.jpg" alt="Illustration d’ouvriers bâtissant un site web"></p>
<blockquote>
<p>« Tiens, Joachim, tu n’as pas encore grand chose à faire ? Bonne nouvelle, on a un projet pour toi. »</p>
</blockquote>
<p>C’est comme ça qu’Olivier, mon nouveau <del>boss</del> <del>manager</del> chef d’équipe, m’a présenté l’idée quelques jours après mon arrivée chez Gandi. L’équipe tech a envie de parler tech sur le web, et donc il faut mettre en place un blog.</p>
<p>Comment est-ce qu’on fait un blog en 2022 ? J’admets que j’étais resté sur mon expérience de 2006 avec un <a href="https://www.gandi.net/fr/simple-hosting/wordpress">hébergement Wordpress</a>… mais le choix s’est fait autrement : pour limiter les besoins d’infrastructure et privilégier la performance, on voulait tester un générateur de site statique. Et comme peu de gens dans l’équipe font du Go, on en a choisi un en Go. Logique.</p>
<h2 id="hugo">Hugo</h2>
<p>Un générateur de site statique a une mission : à partir de contenus écrits dans des fichiers texte, il va générer des fichiers HTML qu’on pourra placer sur un serveur web. Un bon générateur va pouvoir permettre l’utilisation d’une taxonomie (les tags tout en bas 👇), la flexibilité des thèmes, et la rapidité de prise en main.</p>
<p>N’ayant jamais touché à Hugo, c’est cette dernière qualité qui m’a impressionné. En deux temps et trois lignes de commande, c’était prêt… enfin, je veux dire, j’avais mon site en local avec un thème par défaut et un premier post en faux-latin. On était loin d’un site complet.</p>
<p>Bon, et maintenant ?</p>
<h2 id="la-structure-multi-langues">La structure multi-langues</h2>
<p>Un des éléments dans le brief, c’était de pouvoir poster des contenus en français et en anglais. Pour ça, il faut paramétrer un peu Hugo.</p>
<p>Tout d’abord, on a choisi une double arborescence, en utilisant <code>/fr/</code> et <code>/en/</code> pour différencier les langues. Les réglages sont explicites :</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="c"># config.toml</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[</span><span class="nx">languages</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">  <span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">en</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="nx">title</span> <span class="p">=</span> <span class="s2">"Gandi Blog"</span>
</span></span><span class="line"><span class="cl">    <span class="nx">languageName</span> <span class="p">=</span> <span class="s2">"English"</span>
</span></span><span class="line"><span class="cl">    <span class="nx">weight</span> <span class="p">=</span> <span class="mi">1</span>
</span></span><span class="line"><span class="cl">    <span class="nx">contentDir</span> <span class="p">=</span> <span class="s2">"content/en"</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">  <span class="p">[</span><span class="nx">languages</span><span class="p">.</span><span class="nx">fr</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="nx">title</span> <span class="p">=</span> <span class="s2">"Blog Gandi"</span>
</span></span><span class="line"><span class="cl">    <span class="nx">languageName</span> <span class="p">=</span> <span class="s2">"français"</span>
</span></span><span class="line"><span class="cl">    <span class="nx">weight</span> <span class="p">=</span> <span class="mi">2</span>
</span></span><span class="line"><span class="cl">    <span class="nx">contentDir</span> <span class="p">=</span> <span class="s2">"content/fr"</span>
</span></span></code></pre></div><p>La langue anglaise sera servie par défaut, mais il faudra préciser que même la langue par défaut devra être servie à partir de son répertoire, et non pas à partir de la racine. Pour ça :</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="c"># config.toml</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nx">defaultContentLanguageInSubdir</span> <span class="p">=</span> <span class="kc">true</span>
</span></span></code></pre></div><p>Ça y est pour l’architecture. Pour ce qui est de l’affichage, Hugo prend tout en charge automagiquement : il faut bien utiliser les balises <code>i18n</code> pour traduire les morceaux d’interface dans la langue voulue. Les fichiers de traduction utilisent le format <code>.toml</code>, qui a l’avantage d’être lisible. Une différence lorsqu’on a dû gérer des grosses applications multilingues, c’est qu’il y a peu d’intégrations avec les outils de gestion de traduction… mais le scope d’un blog est tel que je ne pense pas qu’on dépassera la cinquantaine de termes différents à traduire.</p>
<p>Quand deux posts de langue différente ont le même identifiant, ils sont considérés comme une traduction l’un de l’autre. J’ai voulu faire apparaître un lien au début du post pour indiquer où trouver la traduction :</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c">&lt;!-- layouts/partials/page-translated-list.html --&gt;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">{{ if .IsTranslated }}
</span></span><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  {{ range .Translations }}
</span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">span</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ .Lang }}"</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">    {{ i18n "translations" .Language.LanguageName }}
</span></span><span class="line"><span class="cl">    <span class="p">&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ .Permalink }}"</span><span class="p">&gt;</span>{{ .Title }}<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">span</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">  {{ end }}
</span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</span></span><span class="line"><span class="cl">{{ end }}
</span></span></code></pre></div><h2 id="la-recherche">La recherche</h2>
<p>Le choix d’un site statique a provoqué une interrogation : comment est-ce qu’on va gérer la recherche interne ? Étant donné qu’il n’y a pas de back-end dynamique qui pourrait faire des requêtes en base de donnée (et surtout vu qu’on n’a pas de base de donnée), c’est une très bonne question.</p>
<p>La recherche doit donc se situer du côté du client. Pour se faire, on a intégré l’utilitaire <a href="https://pagefind.app/">Pagefind</a>. Lorsque Hugo vient de compiler les contenus en pages HTML, on demande à Pagefind de faire un tour sur lesdites pages pour les indexer. Ensuite, l’utilitaire va générer un script JavaScript / WASM et des fichiers d’index, qui seront mis à disposition du visiteur comme le reste du site.</p>
<p>Lorsque le visiteur va activer la recherche, le script se déclenchera et téléchargera les index au fur et à mesure du besoin.</p>
<h2 id="les-styles">Les styles</h2>
<p>Une autre nouveauté a été mise en place pour le développement de ce blog, elle est à découvrir du côté des styles.<br>
Depuis peu, Pascal (le développeur responsable de l’intégration du Design System) travaille sur un système de <em>design tokens</em> pour faciliter les échanges et la passation du design, depuis les équipes de conception jusqu’aux équipes de développement.</p>
<p>Pour vous proposer ses produits et services, les développeurs de Gandi sont répartis en plusieurs équipes : application de gestion de domaine, application pour les offres d’hébergement, les sites web, etc. Ces équipes ont besoin d’utiliser les mêmes éléments de design, pour maintenir l’unité de l’apparence des applications et sites web. C’est là que les design tokens montrent leur utilité : il s’agit d’informations sous forme de valeurs partagées entre les équipes. Ces tokens sont dans nos logiciels de conception graphique : un designer ne peut pas se tromper dans le choix d’une couleur ou d’une police ; ils commencent aussi à être testés dans nos apps et nos sites : ça permet aux développeurs d’avoir une seule source de vérité. Une fois le système mis en place, si la couleur principale de la marque Gandi vient à changer, il ne faudra mettre à jour qu’un fichier qui répercutera ces informations aux applications et aux sites web : le risque d’erreurs sera réduit et l’application de changements dans la charte graphique sera accélérée.</p>
<p>Je disais plus haut que ça commence à être testé… en effet, le site que vous lisez utilise une version alpha de ces tokens. Ils couvrent les couleurs, les tailles de typos, les hauteurs de ligne, les dimensions, les espacements, les ombres… à l’heure où j’écris cet article, ce sont 200 valeurs qui sont définies.</p>
<p>Ces valeurs m’ont été fournies par l’autorité centrale (enfin, par Pascal), au format CSS Custom Property. Mais pour nos projets front-end React il les exporte en variables JavaScript ou SASS. C’est là la force du système : quelle que soit la conception et le framework qui sous-tendent le projet, on peut récupérer ces <em>tokens</em> et les utiliser nativement.</p>
<h2 id="contribution-et-déploiement">Contribution et déploiement</h2>
<p>Toutes ces bases-là ne sont que des bases. L’important dans un blog, c’est d’avoir du contenu, et d’être visible en public.</p>
<h3 id="permettre-à-léquipe-de-proposer-des-articles">Permettre à l’équipe de proposer des articles…</h3>
<p>La gestion du contenu se fait de manière <em>flat-file</em>, c’est à dire que toutes les informations sont contenues dans des fichiers, contenus dans une arborescence de répertoires qui les structure. Pas de base de donnée, pas de complication.</p>
<p>J’écris actuellement dans un fichier Markdown. Je pourrais aussi écrire dans tout un tas d’alternatives—AsciiDoc, reStructuredText, Pandoc ou HTML—et je ne doute pas qu’une ou deux personnes dans l’équipe vont contribuer en Org Mode, un format utilisé avec Emacs. Hugo pourra ensuite convertir tous ces types de contenus en pages web, générer les index, les pages d’archives, etc.</p>
<p>Étant donné qu’on utilise des fichiers texte, le moyen le plus pratique pour ouvrir la contribution à toute l’équipe, c’est de mettre le site en commun dans un dépôt de code. Avec Gitlab, la forge logicielle qu’on utilise, on pourra contribuer directement depuis le web, grâce à l’interface de développement intégrée.</p>
<p>Ces aspects techniques peuvent être un frein à la contribution, donc j’ai documenté les diverses étapes pour proposer un article. Sans ça, l’opportunité de contribuer est freinée par la difficulté de le faire.</p>
<p>Une fois l’article sur le dépot Git, le reste de l’équipe va pouvoir le relire, proposer des modifications si c’est nécessaire, et le valider.</p>
<h3 id="et-garder-le-processus-de-déploiement-le-plus-simple-possible">…et garder le processus de déploiement le plus simple possible</h3>
<p>L’automatisation est une bien belle chose. Depuis quelques années, les forges logicielles permettent de déclencher des actions lorsque des changements sont faits à la base de code. Ces actions peuvent être très complexes, et ont le doux nom de CI/CD (Continuous Integration/Continuous Deployment). Elles nous donnent la possibilité de tester le code, la conformité de celui-ci par rapport aux règles de style de l’équipe, de tester les fonctionnalités une à une, les tester conjointement dans un environnement de production… puis si les tests sont valides, ces actions vont nous permettre de déployer le code sur les serveurs de production.</p>
<p>Une fois le nouvel article sur le dépôt de code, les actions de CI/CD vont :</p>
<ol>
<li>créer une machine virtuelle et y installer Hugo et les autres outils nécessaires à…</li>
<li>…compiler les contenus pour en faire un site web, comme décrit dans la partie précédente,</li>
<li>pousser le site web vers le serveur.</li>
</ol>
<p>Comme ça, une à deux minutes après la relecture et validation par l’équipe, le site est en ligne, et visible par le public, en HTML et en RSS.</p>
<h2 id="conclusion">Conclusion</h2>
<p>En tant que premier projet public depuis mon arrivée chez Gandi, je suis content d’avoir pu tester tant de nouvelles chose—nouvelles pour moi, nouvelles pour l’équipe… la possibilité d’apprendre des nouveaux concepts et des nouvelles pratiques, c’est l’une des principales raisons pour laquelle je pratique ce métier. L’autre raison c’est que ça me permet de réaliser des choses pratiques et utiles dans le respect des personnes qui les utiliseront. J’espère avoir rempli ces missions, aussi bien pour mes nouveaux et nouvelles collègues que pour vous qui lisez cet article.</p>