Skip to main content

Alessandros's Blog - Build with freedom. Share with purpose

Comment j’ai connecté Obsidian à Hugo pour publier plus facilement sur mon blog

Je réfléchissais depuis un moment à changer de moteur de blog car j’ai beaucoup de friction à publier un article de blog avec Hugo avec la configuration que j’avais mis en place (assez sommaire à vrai dire…) et la friction actuelle n’empêchais d’envisager un rythme plus élevé de publications.

Mais je suis tombé sur cet article https://4rkal.com/posts/obsidianhugo/ et j’ai décidé de l’appliquer également à mon setup. Ayant déjà utilisé Obsidian dans le passé et que l’utilisation du logiciel n’est plus payante pour une utilisation commerciale, j’ai décidé de faire le test et vous lisez actuellement le premier article publié avec ce setup 😊

Voici ce que j’ai configuré:

  • Coffre Obsidian contenant la structure Hugo Obsidian Blog Tree
  • un script permettant de:
    • Répliquer les données du coffre Obsidian vers le répertoire Hugo
    • Convertir les page pour la production
    • Pousser le repos local vers Github afin de publier le site

C’est encore fort manuel car dès que l’article est prêt, il faut lancer le script manuellement afin de publier l’article mais je pourrais automatiser le processus avec Cron mais vu que je suis sur un laptop, ce serait un peu plus compliqué à mettre en place… ce sera peut être une tache pour plus tard.

Je vous copie ici le contenu du script pour référence, il a été mis en page par ChatGpt donc n’hésitez pas à créer votre propre version ☺️

#!/bin/bash

echo "📦 Starting the sync of blog posts and images..."

# === Chemins sources et destinations ===
source_posts="$HOME/Library/Mobile Documents/iCloud~md~obsidian/Documents/Mine/Blog/"
destination_posts="$HOME/Documents/Projects/hugo-blog/content/"
source_images="$HOME/Library/Mobile Documents/iCloud~md~obsidian/Documents/Mine/images/"
destination_images="$HOME/Documents/Projects/hugo-blog/static/images"
blog_path="$HOME/Documents/Projects/hugo-blog"

# === Synchronisation avec rsync ===
echo "🔄 Syncing posts..."
rsync -ra --delete "$source_posts" "$destination_posts"
echo "🖼️ Syncing images..."
rsync -ra --delete "$source_images" "$destination_images"

# === Génération du site et commit Git ===
echo "🛠️ Building the Hugo site..."
cd "$blog_path" || { echo "❌ Failed to access blog path"; exit 1; }
  
hugo || { echo "❌ Hugo build failed"; exit 1; }

echo "📂 Adding changes to Git..."

branch_name=$(git symbolic-ref --short HEAD)
timestamp=$(date +"%Y-%m-%d %H:%M:%S")
commit_message="📄 $timestamp - $branch_name"

git commit -am "$commit_message" || { echo "⚠️ Nothing to commit"; exit 0; }

echo "🚀 Pushing to remote..."
git push && echo "✅ Blog published!"

Le système est perfectible, je dois actuellement faire attention à écrire dans Obsidian les images en format ![][] ![Image](/images/image.png) car le format ![](/images/) n’est pris en compte par Hugo. Je le garde cette amélioration sur le coude 😁

L’aventure de ce blog continue donc avec à partir d’aujourd’hui des articles journaliers documentant mon parcours d’apprentissage pour avoir des bonnes bases en tant que dev mobile avec un focus sur iOS Swift et React Native en complément.

A bientôt. Alessandro