Comment fonctionne ce site?

C’est une idée que d’ouvrir un blog, mais écrire régulièrement est un défi. Et surtout, quel sujet aborder après un premier billet d’introduction ?

Finalement, je me suis dit que ce ne serait peut-être pas une mauvaise idée que vous présentez comment fonctionne ce site, et donc ce blog.

Je vais vous présenter mon système en trois parties :

• quel outil pour construire mon site,
• le service d’hébergement,
• la chaîne de publication des mises à jour.

Un CMS ? Quel CMS ?

Je ne veux pas d’un système complexe. Mon site n’a rien de complexe et un simple générateur de site statique me semble être la meilleure option possible.

Sur mes précédents sites, j’utilisais le générateur Jekyll. Mais l’organisation interne des fichiers n’est pas forcément la plus simple. Par exemple, j’aimerais bien pouvoir organiser une publication comme un simple dossier qui regroupe le document source en Markdown et les images et ressources associées à cette publication.

C’est pour cela que j’ai plutôt opté pour un autre générateur de site : Hugo !

Très similaire à Jekyll sur le principe, il permet d’organiser les publications selon ma préférence. Le format de gabarit de page reste familier et il est même possible d’étendre les possibilités de Markdown en définissant des balises spécialisées, des shortcode.

L’outil est rapide pour générer un site, ce qui est un petit bonus.

Évidemment, il intègre un serveur qui observe toutes les modifications sur votre projet. Une solution idéale en phase de développement du thème du site.

Hébergement

Au risque de me répéter, mon site n’est pas complexe et il contient un minimum de médias lourds. Pour un hébergement statique, il existe beaucoup de solutions.

J’ai porté mon choix sur Netlify.

Pourquoi ?

Pour commencer, Netlify propose une offre gratuite largement satisfaisante pour mes besoins. Et si mes besoins augmentent, il me sera facile de migrer sur une option payante.

Mais si héberger le contenu produit par Hugo est indispensable, il était tout aussi important d’être capable de construire un flux de publication autonome. Et pour cela, Netlify peut construire mon site dès que je publie une mise à jour de mon contenu.

Il est donc temps de parler de mon flux de publication.

La chaîne de publication

Code source et contenus

Le contenu de mon site est divisé en deux parties :

• le thème utilisé pour la publication ;
• le contenu du site proprement dit.

Normalement, le thème est importé à partir d’un paquet indépendant. Mais comme c’est mon site personnel, je n’ai pas cherché à faire le plus modulaire possible. Je n’ai pas l’intention, pour l’instant, de publier le code de ce thème. Il est donc stocké dans le même dépôt Gît, avec le contenu du site.

J’ai donc un dépôt Git qui regroupe mon contenu et le thème Hugo utilisé.

Lorsque j’ai fini d’écrire un article, je valide mes modifications dans la branche principale de mon dépôt Git et je les publie sur le dépôt principal hébergé chez GitLab.

Publication automatisée

Il existe plusieurs moyens pour automatiser la génération du site par Hugo. Mais Netlify propose un système particulièrement bien adapté sous la forme d’un mécanisme de publication capable de s’intégrer avec différents outils, dont Hugo.

C’est ce système que j’utilise.

Netlify est averti de la mise à jour de mon dépôt dès que mon code est à jour sur GitLab. Il déclenche ainsi le processus de publication, qui va appeler Hugo pour générer mon site sous sa forme finale.

Ce dernier va produire le contenu du site, les feuilles de styles, les scripts, et organise le tout dans un dossier qui sera ensuite directement hébergé par Netlify.

Et voilà, mon site est mis à jour et directement publié, en l’espace de quelques secondes, au pire quelques minutes.

C’en est tout pour ce premier article à propos de mon site web. Rendez-vous au prochaine épisode.