Générateur d’article Hugo avec des images

J’écris souvent des articles comportant des images pour mes différents sites. Plusieurs tâches répétitives ralentissaient ma vitesse de rédaction et j’étais tanné de passer du temps à gérer le contenant plutôt que le contenu. Par contre je ne voulais pas adhérer à un CMS qui semblait pour moi être l’artillerie lourde.

J’ai donc écrit ce petit script pour automatiser les tâches suivantes:

1. Insérer la date présente dans le nom de fichier posts/YYYY-MM-DD-nom-article.md
2. Entrer un seul string (post_name) dans un pop-up qui populera trois variables suivantes.
3. nom du fichier
4. slug dans l’en-tête ou front matter
5. title dans l’en-tête ou front matter
6. Copier les images dans le dossier /img du site
7. Optimiser les images réduire la qualité de compression et la taille au format souhaité (720 px de large, 85 %)
8. Insérer les blocs d’image markdown avec le slug comme alttext: ![nom article](/img/image.jpg)

Tout cela avec quelques clics dans le visioneur d’images gthumb!

Comment utiliser le script ?

Pour générer un article Hugo, il suffit de sélectionner les images à publier, dans mon cas avec gthumb puis de lancer le script. Gthumb permet de rouler des scripts sur les images sélectionnées, ce qui permet d’automatiser la gestions des images. On peut aussi donner la liste d’images en argument.

Une fenêtre apparaît alors pour entrer le slug qui servira de nom de fichier ainsi que de titre préliminaire qui sera modifié plus tard.

Une fois l’article créé il suffit d’insérer le contenu dans l’article entre les images et réviser l’en-tête ou front matter.

Préalables

Les dossiers du site doivent être définis dans des variables d’environnement:

# Définir le path des images dans la variable IMGPATH
export IMGPATH="static/img"
export BLOGPATH="/home/phil/www/philavelo"
export POSTDIR="post"
export LOGFILE="/home/phil/test/img2hugopost"

Installer zenity:

# pkg_add zenity

Un archétype doit être défini pour bien formatter le slug et le titre. Par exemple /archetypes/default.md:

---
title: "{{ replace (slicestr .Name 11) "-" " " | title }}"
date: {{ .Date }}
slug: "{{ slicestr .Name 11 | lower }}"

Script

Voici le script img2hugopost. Le LOGFILE n’est pas nécessaire et peut être enlevé.

Pour voir le script d’optimisation opti.

#!/bin/ksh
#
## Script pour convertir et transférer les images pour mon blog

# Définir le path des images dans la variable IMGPATH
#export IMGPATH="static/img"
#export BLOGPATH="/home/phil/www/philavelo"
#export POSTDIR="post"
export LOGFILE="/home/phil/test/img2hugopost"

conversion() {

filename=$1
file=$(basename "$filename")
extension="$(echo "$filename" | awk -F"." '{print $NF}')"
imgpath="$BLOGPATH/$IMGPATH"

# Valider qu'il s'agit d'une image JPEG
if [ $(echo $extension | grep -Ei "jpg|jpeg") ];
then
    # Copy image to pub folder
        cp "$filename" "$imgpath"
    # Run script to reduce image dimension to target size (I use 720 pixels wide)
        /home/phil/bin/opti "$imgpath/$file"

        # Add image blocks for images (log than process)
        echo "\n![$ALT_TEXT](/img/$file)" >> $LOGFILE
        echo "\n![$ALT_TEXT](/img/$file)" >> "$BLOGPATH/content/$POSTDIR/$POST_FILENAME"
else
        echo "$filename n'est pas une image"
fi
}

# Generate Hugo post

# Get post name using zenity prompt
post_name=$(zenity --entry --text "Entrez le nom du fichier ou slug de l'article (sans espace):")
echo $post_name
export ALT_TEXT="$(echo $post_name | sed 's/-/ /g')"
cd $BLOGPATH

# Run Hugo new post command
export POST_FILENAME="$(date "+%Y-%m-%d")-$post_name.md"
echo "hugo new $POSTDIR/$POST_FILENAME" >> $LOGFILE
hugo new $POSTDIR/$POST_FILENAME

# Traiter les images
for file in "$@"
do
        conversion "$file"
done

---

Par Philippe St-Jacques