accueil ; (b)log  ; écrits ;
botanique ; bonsai ; techno ;
livres ; projets ; capsules ;
liens ; à propos  

Autohéberger un blog multilingue avec Hugo, Isso et OpenBSD

Ce guide peut être utilisé par quiconque souhaite autohéberger un site statique. Cette approche permet d’avoir un blog ayant toutes les fonctionnalités attendues d’un blog moderne (commentaires, images, taxonomies, flux RSS) tout en préservant son indépendance numérique.

un site léger: bonsai.earth

Le site bonsai.earth est créé avec le générateur de site statique Hugo et le thème PaperMod. Les commentaires sont possibles avec Isso. Ce site est autohébergé et j’ai détaillé les étapes dans ce guide.

Créer un site Hugo

  1. Installer Hugo: # pkg_add hugo
  2. Créer un site Hugo: $ hugo new site monsite -f "yaml"
  3. Activer la fonction multilingue avec Hugo
  4. Configurer Hugo pour mon blog bonsaï (Taxonomies, thème, slug, listes, archetypes)
  5. Activer un flux RSS par langue
  6. Spécifier une image à afficher par les agrégateurs de Flux RSS

Ajouter une section commentaires avec Isso

  1. Serveur Isso sur OpenBSD
  2. Relayd De base
  3. nginx + TLS
  4. Isso sécurisé (https)

Bravo! Vous avez maintenant un site statique multilingue avec des commentaires et un flux RSS. Vous pouvez désormais publier du contenu. La prochaine section explique mon workflow ou flux de travail pour publier des articles sur bonsai.earth.

Comment créer un nouvel article ?

Dans la racine de votre projet Hugo:

$ hugo new posts/2021-03-22-nouvel-article.fr.md

Ou tout simplement: 

$ vim content/posts/2021-03-22-nouvel-article.fr.md

Un fichier est créé dans contents/posts/2021-03-22-nouvel-article.md̀ et on peut maintenant y ajouter du contenu et définir les “tags” de l’en-tête YAML.

Ajouter des images à un article

  1. Importer les photos d’une caméra usb sous OpenBSD
  2. Renommer les images avec la date de l’entête EXIF
  3. Éditer les images avec gimp (recadrage)
  4. Redimensionner avec une résolution de 720 pixels de large
  5. Copier les images dans le dossier static/img du projet Hugo. J’utilise gthumb comme gestionnaire de fichiers.
  6. Insérer l’image dans le fichier .md : ![alt](/img/.jpg)

Astuce avec VIM: On peut créer une macro pour accélérer l’insertion d’image. Avec cette macro, il suffit de taper @i pour insérer le bloc de code Markdown.

q i [escape] q

Tester son site

Publier son site avec rsync



Par Philippe St-Jacques