Coder soi-même un site avec les pieds

Mon précédent blog WordPress

En 2019 je m'étais mis en tête de faire un site léger, simple, en un mot minimaliste. À l'époque je ne me voyais pas utiliser les Hugo ou Jekyll qui revenaient souvent quand on cherchait à faire des sites web statiques et sobres.

Alors j'étais resté chez Gandi pour l'hébergement et avais installé WordPress dessus. L'avantage avec WordPress c'est qu'il dispose de très nombreux thèmes, depuis 2019 il en existe plein de nouveaux en mode minimaliste. J'avais pour ma part fait le choix de mnmlist dont j'étais très satisfait après quelques améliorations sur la feuille de style css (jusqu'au 14/06/2024 cet ancien blog était visible ici, sa fin est proche).

J'ai oublié de préciser, je code avec les pieds, mais j'ai de vieux restes du code, donc je jargonne un peu dans cet article, probablement qu'un·e lecteur·rice complètement novice devrait s'arrêter ? À vous de décider.

Frugarilla en mode GitLab / Hugo

Au lancement du média frugarilla.fr en 2023, aucun doute, notre choix sera radical, frugal, essentiel. Nous optons pour le combo Gitlab pour la gestion des versions, les modifications multi utilisateur·rices et le déploiement. Nous optons pour Hugo pour la génération du site statique à partir de page markdown.

Heureusement que Pablo est là pour mettre tout ça en place, comme moi il code avec ses pieds, mais contrairement à moi, il sait utiliser ces outils. Je me familiarise avec Gitlab et Hugo, et j'avoue que c'est loin d'être intuitif. Je me dis à ce moment là, je ferais une nouvelle version de mon blog perso, j'arrêterais d'utiliser WordPress, je quitterais Gandi... Mais la barrière des compétences est grande, je ne sais pas comment faire.

Tomber en amour de deuxfleurs

Il y a quelques mois, poussé par des questions de mes collègues édutiants en redirection écologique, en particulier Maxime et Camille, je refais un état des lieux de ce qui existe. Le paysage est à peu près le même qu'en 2019, mais je retombe sur l'association deux fleurs qui fabrique un internet convivial et dont je kiffe le site web à base d'ascii (je vous ai déjà prévenu pour le jargon ?). Là c'est décidé, je quitte Gandi pour Deuxfleurs. Reste à trouver comment faire un site statique et à gérer les redirections DNS, oups nouvel obstacle.

Monter une instance Castopod pour héberger mon nouveau podcast

C'était une autre idée de longue date : lancer un podcast à propos de la sobriété. Ça a pris environ 1 an, mais il est finalement né : Enquêtes de sobriété. Et bien sûr la question de chez qui héberger ce podcast m'a occupé pas mal de we. C'est le comparse Tristan qui m'a parlé de Castopod et quand j'ai enfin compris que Castopod offrait un service d'hébergement d'une instance pré-installée, je me suis lancé. Cependant j'avais envie d'avoir mon propre domaine, donc achat de enquetes-de-sobriete.fr puis configuration DNS pour pointer vers l'instance Castopod. Ce ne fût pas si simple, j'ai fait des redirections DNS un peu n'importe où, mais au final j'y suis arrivé.

yapluka faire mon site statique

Les redirections DNS n'ont plus de secret pour moi (non je déconne, j'ai toujours pas compris ALIAS, AAA, etc...) et après l'expérience frugarilla.fr je vais bien réussir à copier le repo Gitlab, changer de thème Hugo, et faire tourner tout ça... Ben non, franchement GitLab et la CI/CD je comprends pas, et alors comment brancher un environnement de dev local sur Gitlab pour pouvoir installer un nouveau thème Hugo... Mon cerveau tourne encore !

Là je me souviens d'un post de l'ami Sébastien, celui dans lequel il nous dit "j'ai développé mon générateur de site statique et j'en suis content", il le dit bien mieux que ça, je vous laisse lire son article. Je regarde son outil, et j'avoue je comprends pas grand chose, je me retrouve sur Github de nouveau à pas vraiment comprendre comment tout ça fonctionne... Mais je retombe sur This is a motherfucking website et sur l'article de Fabien Sanglard All you may need is html qui me font remonter des vagues souvenirs d'html de 20 ans... J'essaie de jouer avec le script php de Fabien Sanglard et je réalise après quelques heures malheureusement qu'il y a en fait 2 scripts php imbriqués dans son code, l'un qui s'exécute pour générer le site, l'autre qui s'exécute à la consultation du site, en mode Inception... C'est beaucoup trop compliqué pour mon cerveau... Ce que je veux c'est écrire des fichiers en markdown, appuyer sur un bouton et que ça me créée les fichiers html pour mon site statique, en intégrant automatiquement un header et un footer pour pas avoir à me le farcir à chaque fois ! C'est pourtant pas compliqué !

Quoi de mieux que de faire son outil quand on le trouve pas

Je me mets en tête de faire mon propre script Shell pour faire l'opération de mes rêves décrites ci-dessus. Mais bien sûr shell, bash, ksh tout ça c'est pas tout à fait pareil, et j'avoue que je comprends pas vraiment. J'essaie quand même. Il me faut 2 heures pour réussir à comparer 2 dates de fichiers, j'ai créé 3 fichiers de 7 Go en faisant une mauvaise manip', j'ai galéré pour le flux rss et la page erreur 404 et pour l'instant je gère encore mal les images et les tableaux.

Mais bon ça marche ! J'écris mes fichiers en markdown en local sur mon ordi, j'améliore mon header et footer à l'envie, et je génère le site statique en local sur mon ordi en 1 clic :-) Il me suffit ensuite d'ouvrir Filezilla pour copier-coller le site sur mon hébergement deuxfleurs et voilà !

Comment ça marche

Un même dossier contient :

le script shell : qui transforme les fichiers .md en .html voir ci-dessous
footer.html : qui contient le pied de page automatiquement ajouté à chaque page
header.html : qui contient le style et le menu d'entête
un dossier source avec la structure du site et les pages en markdown
un dossier cible qui contient la même structure avec les pages en html

Pour l'ensemble des dossiers et fichiers .md du dossier source, le script les transforme en html en ajoutant header.html et footer.html.

Ce qui pourrait encore être fait :

gérer les images en optimisant leur taille et leur format automatiquement avant de les déposer dans le dossier cible à l'aide d'un petit script
corriger la prise en charge des tableaux par pandoc (cf ci-dessous) en markdown

Tout est fait en local sur ma machine, pas d'environnement de test, pas de gestion de version, pas de multiples utilisateurs, Filezilla permet de transférer directement sur le serveur.

Et voici le script shell avec une dépendance sur pandoc et une autre sur common.sh de l'ami Sébastien, il m'a fallu 2-3 jours pour tout développer, probablement 2h il y a 20 ans quand je codais encore, et probablement 2 minutes pour un bon développeur (à noter que dans le code ci-dessous il faut remplacer chaque _ _title par la même chose sans l'espace entre les 2 tirets bas) :

#!/bin/env bash

source common.sh

# le nom des dossiers md et html
basedir=/Users/toto/Sites/alexis8nicolas
dirmd="$basedir"/sitemd
dirhtml="$basedir"/sitehtml

# On efface le dossier dirhtml et son contenu
cd "$dirhtml"
rm -rf *
cd "$basedir"

# On copie dossier content
cp -R "$dirmd"/content/ "$dirhtml"/content/

# On va dans le dossier source
cd "$dirmd"

tail +4 404.md > temp.md
TITLE=`article_title 404.md`
# on transforme le fichier 404.md en fichier html provisoire
pandoc -f gfm -t html temp.md -o "$dirhtml"/4041.html
# on ajoute header et footer au fichier html provisoire pour créer le fichier index.html du sous-dossier
cat "$basedir"/header.html "$dirhtml"/4041.html "$basedir"/footer.html > "$dirhtml"/404.html
# on remplace _ _title dans le fichier html
sed -i -e "s/_ _title/$TITLE/g" "$dirhtml"/404.html
# on supprime le fichier html provisoire
rm "$dirhtml"/404.html-e
rm "$dirhtml"/4041.html
rm temp.md 

# on supprime les 4 premières lignes du fichier md
tail +4 index.md > index1.md
TITLE=`article_title index.md`
#DATE=`article_date index.md`
#echo $TITLE 
#echo $DATE 
# on transforme le fichier index.md en fichier html provisoire
pandoc -f gfm -t html index1.md -o "$dirhtml"/index1.html
# on ajoute header et footer au fichier html provisoire pour créer le fichier index.html du sous-dossier
cat "$basedir"/header.html "$dirhtml"/index1.html "$basedir"/footer.html > "$dirhtml"/index.html
# on remplace _ _title dans le fichier html
sed -i -e "s/_ _title/$TITLE/g" "$dirhtml"/index.html
# on supprime les fichiers html et md provisoire
rm "$dirhtml"/index.html-e
rm "$dirhtml"/index1.html
rm index1.md 

# Traitement dossier a-propos
cd "$dirmd"/a-propos
mkdir "$dirhtml"/a-propos
# on supprime les 4 premières lignes du fichier md
tail +4 index.md > index1.md
TITLE=`article_title index.md`
# on transforme le fichier index.md en fichier html provisoire
pandoc -f gfm -t html index1.md -o "$dirhtml"/a-propos/index1.html
# on ajoute header et footer au fichier html provisoire pour créer le fichier index.html du sous-dossier
cat "$basedir"/header.html "$dirhtml"/a-propos/index1.html "$basedir"/footer.html > "$dirhtml"/a-propos/index.html
# on remplace _ _title dans le fichier html
sed -i -e "s/_ _title/$TITLE/g" "$dirhtml"/a-propos/index.html
# on supprime les fichiers html provisoire
rm "$dirhtml"/a-propos/index.html-e
rm "$dirhtml"/a-propos/index1.html
rm index1.md
cd "$dirmd"

# Initialisation dossier feed avec xml basique
mkdir "$dirhtml"/feed
cat "$dirmd"/feed/rss.xml > "$dirhtml"/feed/rss.xml

# création dossier articles dans dirhtml
mkdir "$dirhtml"/articles
cd "$dirmd"/articles
# pour chaque sous-dossier du dossier dirmd/articles
for subdir in *; do
    test -d "$subdir" || continue

    #création du même sous-dossier dans dossier cible
    if [ -d "$dirhtml"/articles/"$subdir" ] ; then
        echo $subdir" existe déjà"
    else
        mkdir "$dirhtml"/articles/"$subdir"
    fi

    # on va dans le sous-dossier
    cd "$subdir"

    # pour chaque fichier markdown du sous-dossier
    for f in *.md; do
        export FILE=${f%%.md}

        # si le fichier .md existe
        if [ -e $FILE.md ] ; then 

            # on supprime les 4 premières lignes du fichier md
            tail +4 $FILE.md > $FILE1.md
            TITLE=`article_title index.md`
            DATE=`article_date index.md`
            GUID=`article_guid index.md`

            # on complète le fichier rss
            echo "<item><title>${TITLE}</title><link>${GUID}</link><description/><pubDate>${DATE}</pubDate><guid>${GUID}</guid></item>" >> "$dirhtml"/feed/rss.xml

            # on transforme le fichier md en fichier html provisoire
            pandoc -f gfm -t html $FILE1.md -o "$dirhtml"/articles/"$subdir"/index1.html
            # on ajoute header et footer au fichier html provisoire pour créer le fichier index.html du sous-dossier
            cat "$basedir"/header.html "$dirhtml"/articles/"$subdir"/index1.html "$basedir"/footer.html > "$dirhtml"/articles/"$subdir"/index.html

            # on remplace _ _title dans le fichier html
            sed -i -e "s/_ _title/$TITLE/g" "$dirhtml"/articles/"$subdir"/index.html

            # on supprime le fichier html provisoire
            rm "$dirhtml"/articles/"$subdir"/index1.html
            rm "$dirhtml"/articles/"$subdir"/index.html-e
            rm $FILE1.md

        fi

    done

    cd ..
done

# on finalise le fichier rss
echo "</channel></rss>" >> "$dirhtml"/feed/rss.xml

Si vous voulez en savoir plus sur ce script shell, vous pouvez me trouver ici.