github twitter mastodon email
Installer Hugo Sur Yunohost
Jun 15, 2018

Lorsque je me suis rendu compte que je manquais de place sur Twitter et Mastodon pour m’exprimer librement, je me suis dit que je ferais bien de créer un blog. Je pense parfois à des choses, et je n’ai pas l’impression que les poster sur un réseau social soit la meilleure solution.

Déjà, parce que je n’aime pas avoir une chiée de commentaires désobligeants venant de fafs à la petite semaine qui se trouvent une occupation dans leur journée. Ensuite, parce que je ne peux pas exposer une opinion simple sans la voir incomprise, déformée, défoncée en 32 caractères, et immédiatement jetée aux ordures.
Et enfin, parce que j’aime bien savoir que je peux retrouver ce que j’avais écrit. Ça, c’est un vrai plus.

Je lis beaucoup de blogs, et ils ont l’avantage considérable de ne parfois pas proposer plus que ce que donnerait un thread − ou même un toot, tout en étant là, trouvables en deux clics. J’adore ça !

Un blog : mais lequel ?

Il existe plus d’outils que d’atomes dans l’univers [1]. Heureusement, pour m’en sortir dans tout ce foutrac, j’avais des besoins spécifiques.

Le blog ne devait pas être un outil lourd. Exit les Wordpress, les Drupal, les Joomla, et toute cette armée de blogs sur-équipés. Je n’ai pas besoin de 200k fonctionnalités et de trouzmille plugins troués [2].
Ensuite, étant sous YunoHost [3], j’avais besoin d’une solution compatible. L’écosystème YunoHost fonctionnant avec une logique d’applications qu’on installe, il fallait un outil adapté. J’avais utilisé Ghost, un temps. Je partais donc sur cette solution, jusqu’à ce que je découvre qu’elle était dépréciée depuis belle lurette. L’application Ghostblog n’était même plus compatible avec YunoHost dans sa version la plus récente.

Une solution fut alors de choisir un outil de blog statique. C’est-à-dire qu’au lieu d’avoir une administration directement accessible en ligne, on utilise l’outil de blogging sur sa machine. Une fois qu’on a saisi tout ce qu’on avait à saisir − directement dans un fichier .md, équivalent d’un fichier texte éditable avec n’importe quel outil adapté, on génère les pages au format .html et on pousse tout ça sur son serveur.
J’ai testé Lektor, mais je n’ai pas accroché, que ce soit à la logique, à l’interface, ou même à la pauvreté du nombre de thèmes disponibles − tous plutôt moches.

J’ai donc choisi Hugo.

Hugo n’a pas de compatibilité « native » (comprendre « sous forme d’app ») avec YunoHost, mais Hugo (et la plupart des outils de blog statique) est déployable théoriquement partout, sans distinction.

Préparation du serveur

On peut réaliser toutes ces étapes en se rendant sur l’interface d’admin de son serveur sous YunoHost. Cependant, on peut aussi être adepte de la ligne de commande et vouloir tout faire en console.
Dans tous les cas, c’est plutôt simple !

Dans cette partie, tout ce qui suit sera fait en root pour des raisons de facilité. Tout ce qui suit prend également place dans le cadre d’un accès en SSH à votre serveur.
Tout d’abord, on crée un nouveau sous domaine :

~# yunohost domain add blog.votredomaine.ext

Ensuite, on installe une webapp. J’ai personnellement fait le choix de me passer du multi-instance, donc je crée des doublons ad lib. Vous faites comme vous le sentez.

~# yunohost app install my_webapp --verbose

Vous pouvez ensuite répondre aux questions que YunoHost vous posera pour installer votre webapp. Si tout s’est bien passé, vous devriez rencontrer un beau message sur https://blog.votredomaine.ext.

Il est temps de générer un certificat Let’s Encrypt. Ça peut être fait dans la partie Domaines de l’interface d’admin, ou tranquillement en ligne de commande.

~# yunohost domain cert-install blog.votredomaine.ext

Si tout s’est bien passé, vous êtes couvert⋅e⋅s par le HTTPS qui va bien. Cela dit, les algos par défaut ne vous donneront qu’un B ou C sur Cryptcheck. Si vous souhaitez améliorer ce résultat, il y a de merveilleuses solutions toutes prêtes.

Côté serveur, c’est prêt ! Maintenant, la suite se passe sur votre machine…

Création du blog

Tout ce qui suit est à réaliser directement sur votre PC. Vous pouvez néanmoins l’appliquer sur votre serveur si le cœur vous en dit. Je trouve que le faire sur son PC a l’avantage de vous permettre d’avoir un doublon du blog. Au moins, si vous perdez l’un, vous avez l’autre ;).

La documentation quickstart de Hugo est excessivement claire, même si elle n’est disponible qu’en anglais. Nous allons donc la traduire ici, en développant un peu son contenu.

Si comme moi vous êtes sous Ubuntu (ou Debian) :

~# apt install hugo
~# hugo version

Si, à ce niveau, vous avez un beau message avec la version de Hugo qui s’affiche, c’est déjà gagné [4] ! Vous pouvez immédiatement créer votre blog :

~# hugo new site <nom-du-site>

Le nom du site sera également le nom du dossier créé automatiquement dans le /home de votre utilisateur. Pensez-y !

Une fois que ceci est fait, il vous faut choisir un thème. Hugo a une bibliothèque de thèmes incroyable, il faut un moment pour s’arrêter sur un choix. J’ai personnellement choisi Cocoa, mais vous pouvez vous perdre une bonne heure dans la liste disponible sur leur site.
Pensez à bien lire la documentation de votre thème : certains ont des spécificités qui nécessitent plus de bricolage que d’autres. On peut tricher un peu en reprenant le dossier qui se trouve généralement dans themes/<nomdutheme>/exampleSite/ ou quelque chose de similaire. Pensez tout de même à faire une sauvegarde du fichier config.toml qui se trouve à la racine de votre projet pour permettre une éventuelle marche arrière !

Lorsque vous avez trouvé un thème vous plaît, vous aurez besoin d’un lien particulier vers celui-ci. Récupérez-le sur sa page, sur le bouton Download (avec un clic droit > copier l’adresse du lien). Vous devez obtenir un lien en .git.
Rendez-vous ensuite dans votre console :

~# cd <nom-du-site>
~# git init
~# git submodule add https://github.com/foo/bar.git themes/nom-du-theme
~# echo 'theme = "nom-du-theme"' >> config.toml

La dernière ligne ajoute un theme = "nom-du-theme" dans le fichier config.toml. Il vous suffit d’éditer ce fichier et de changer le nom du thème pour changer de thème.

On peut alors créer du contenu, comme par exemple :

~# hugo new posts/blog-tout-neuf.md

Ceci crée un post de blog nommé « Blog tout neuf » (vous le retrouverez dans content/posts/. En l’éditant, vous pouvez voir un en-tête simple, à éditer ou non suivant vos envies. Sous le trait de séparation, composé de signes + ou - suivant les thèmes et les cas, vous pouvez taper le contenu de votre (formidable) article en utilisant Markdown.

Dans l’en-tête, une ligne indique draft = true. Si vous souhaitez passer le fichier en mode non-brouillon, il faudra changer le true en false.

Quand vous êtes satisfait⋅e, vous pouvez générer une démo en local de votre blog :

~# hugo server

Si votre post est en brouillon, vous devrez ajouter le paramètre -D pour le voir apparaître.
Votre blog se trouve alors sur http://localhost:1313. Rendez-vous à cette adresse pour le consulter.

Une fois que vous êtes satisfait⋅e, vous pouvez générer le blog statique avec une commande des plus simples :

~# hugo

Et le site se trouve alors dans le dossier public/.

Publication du blog

Il suffit de téléverser [5] les fichiers contenus dans public/ sur votre serveur, en vous connectant en FTP ou en SFTP − j’ai personnellement opté pour la seconde proposition.

Le dossier cible sur votre server YunoHost se trouve normalement dans /var/www/my_webapp/www/. Si vous avez plusieurs apps “My Webapp”, alors il faut rajouter __2 pour la deuxième instance, __3 pour la troisième, etc. Dans mon cas, j’utilise my_webapp__3.

Vous pouvez mettre tout cela en ligne avec, par exemple, Filezilla. Maintenant, si vous avez une clé SSH en place sur votre serveur, vous pouvez scripter le déploiement − ce qui me semble plus intéressant. Sur votre machine, toujours à la racine de votre site Hugo, il suffit de créer un script bash.

~# touch deploy.sh
~# chmod +x deploy.sh

Éditez ce nouveau fichier avec votre éditeur favori, pour y saisir ceci :

#!/bin/sh
USER=<votre-utilisateur>
HOST=<votre-domaine-ou-ip> #Ça peut être mieux d'avoir créer quelque chose dans votre .ssh/config, il vous suffit alors de mettre le nom de l'hôte
DIR=/var/www/my_webapp/www/

hugo && rsync -avz --delete public/ ${USER}@${HOST}:${DIR}

exit 0

Il peut y avoir besoin de lancer un chown -R sur /var/www/my_webapp/ pour vous octroyer des droits suffisants.

Lancez la commande ./deploy.sh et hop, votre blog se déploie de lui-même ! C’est pas beau ça ? Si vous en doutez, rendez-vous sur https://blog.votredomaine.ext pour le constater par vous-même !

Voilà, vous avez désormais de quoi passer quelques heures d’amusement, et de quoi parler à la terre entière, en statique, et avec YunoHost. En espérant que ça ait pu servir à quelqu’un⋅e ;).


  1. « À une vache près, c’est pas une science exacte » ↩︎

  2. Les CMS tels que ceux que j’ai cités sont réputés pour le nombre de failles de sécurité qu’on y découvre quasi-quotidiennement ; surtout quand ils sont gratinés de plugins en tous genres ↩︎

  3. YunoHost est un écosystème permettant de faciliter l’auto-hébergement pour le rendre accessible à des personnes non-spécialistes (voire néophytes) ↩︎

  4. #TeamDora ↩︎

  5. RPZ l’Académie Française, si si ! ↩︎