Digital Garden

Translated by: gpt-4o-2024-08-06 | Original version

Jardin numérique

J'ai lu sur les Jardins Numériques sur heise (en allemand) et j'ai vraiment aimé l'idée. Les principales différences avec mon blog actuel auxquelles j'ai pensé sont :

  • L'idée de noter des idées et de commencer des articles immédiatement - et de les avoir dans le jardin tout de suite. C'est une grande différence par rapport à l'attitude de "je dois finir l'article avant de le publier".
  • L'idée de lier à d'autres articles et de créer un réseau d'articles. C'est quelque chose que je peux déjà faire dans mon blog, mais le processus est délicat : si je renomme ou déplace un article, les liens vers celui-ci sont rompus. De plus, l'idée de rétroliens est frappante.
  • Mettre les sujets plus en avant plutôt que la date : mon blog est principalement structuré et présenté par date. Avoir le(s) sujet(s) davantage comme structure de navigation semble attrayant. Bien sûr, je laisserais toujours la date de création, ainsi que la date de la dernière modification.

Exigences

Comme d'habitude, j'ai tendance à commencer par regarder le côté technique 😀. J'ai donc noté mes exigences et demandé de l'aide à ChatGPT.

Mes exigences pour un système de jardin numérique :

  • Les articles sont basés sur des fichiers markdown.
  • Construit comme un site web statique généré.
  • Un article dans un répertoire avec ses ressources : images, PDF, autres fichiers. De cette façon, le rendu local par article a du sens, très utile lors de l'édition. J'éditerais les articles avec VScode ou un autre éditeur qui prend en charge le markdown.
  • Les articles (c'est-à-dire leurs répertoires) peuvent être dans une structure arborescente de répertoires. Leur structure de répertoire décrit la catégorie. Par exemple /tech/dev/data_science
  • Écrit en Python, pour que je puisse bricoler.
  • Le pipeline de construction peut être complété : une étape pour vérifier les liens internes.
  • Liens internes comme [ [liens] ]. Et montrer les rétroliens dans les articles liés.
  • Je veux créer facilement des types d'articles spécifiques avec une structure, des champs, un rendu spéciaux. Des exemples sont RECETTE, LIEU ou EMPLACEMENT, AVENTURE DE VOYAGE, …
  • Beau site ! Pas comme un jardin de nerd désordonné ! S'inspirer de beaux blogs comme ghost.
  • Multilingue, avec des langues remplies par l'IA si non fournies par l'auteur.
  • Différents droits d'accès : certains contenus sont publics, d'autres pour la famille et les amis ou d'autres groupes d'utilisateurs.
  • Rôles d'accès, par exemple : les articles non publiés ne peuvent être vus que par les utilisateurs avec le rôle ÉDITEUR.
  • Permettre plusieurs pages d'index : tags, index historique (peut-être aussi par tag), les plus lus, les plus étoilés… Les pages d'index peuvent être générées mais aussi faites à la main. Spécifiquement la page d'accueil.

Technologie et Architecture

C'est ce que ChatGPT a produit (je pense que c'est vraiment bien, donc je le colle ici en entier) :

Super. Je vais explorer les meilleurs générateurs de sites statiques basés sur Python et l'architecture pour construire un jardin numérique magnifiquement stylé, piloté par markdown avec prise en charge du contrôle d'accès, de la vérification des liens internes, de la prise en charge multilingue et de la personnalisation des types d'articles. Je m'assurerai également que le système prend en charge votre flux d'édition local préféré, génère du HTML simple et fonctionne bien avec GitHub Pages.

Je reviendrai vers vous avec une pile recommandée, un diagramme d'architecture et des suggestions sur la façon de mettre en œuvre vos exigences en douceur.

Recherché pendant 11m 16s * 23 sources

ChatGPT : Construire un Jardin Numérique Alimenté par Python : Pile & Architecture

Générateur de Site Statique & Organisation du Contenu

Pour un générateur de site statique basé sur Python, Pelican est un excellent choix. Pelican est activement maintenu et bien documenté, prenant en charge le contenu Markdown et la publication multilingue dès le départ (GitHub - getpelican/pelican: Static site generator that supports Markdown and reST syntax. Powered by Python.). Il génère un site HTML simple (pas besoin de React/Vue) et dispose d'un riche écosystème de plugins pour étendre les fonctionnalités (GitHub - getpelican/pelican: Static site generator that supports Markdown and reST syntax. Powered by Python.).

Structure du Contenu : Organisez le contenu du jardin numérique dans une hiérarchie de répertoires logique sous le dossier content/ de Pelican. Chaque article vit dans son propre sous-répertoire avec ses ressources. Par exemple :

content/
├── tech/
│   └── dev/
│        └── data_science/
│             └── my-article/
│                  ├── index.md        # Article en Markdown
│                  ├── figure1.png     # Images/PDFs liés à l'article
│                  └── data.pdf
└── travel/
    └── trip-to-paris/
         ├── index.md
         └── eiffel.jpg

Dans cette disposition, chaque article (index.md) est regroupé avec ses médias. Pelican peut gérer des "page bundles" comme celui-ci en traitant ces sous-dossiers à la fois comme des chemins de contenu et de statique. Nous configurons les paramètres de Pelican pour inclure chaque dossier dans ARTICLE_PATHS et STATIC_PATHS afin que les fichiers markdown soient traités et que les ressources soient copiées dans la sortie (Writing content - PELICAN 4.11.0) (Writing content - PELICAN 4.11.0). La syntaxe attach de Pelican permet de lier facilement des fichiers locaux : en Markdown, utilisez {attach} pour référencer des fichiers dans le même dossier. Par exemple : ![Figure]({attach}figure1.png) dans my-article/index.md copiera figure1.png dans le répertoire de sortie de l'article et y fera référence (Writing content - PELICAN 4.11.0) (Writing content - PELICAN 4.11.0). Cela garde les images/PDFs co-localisés avec leur article et garantit que les liens ne sont pas rompus après la construction statique (Writing content - PELICAN 4.11.0).

Pelican prend également en charge l'utilisation des noms de dossiers comme catégories automatiquement. Par défaut, le dossier parent immédiat devient la catégorie (par exemple, "data_science" dans le chemin ci-dessus) (Writing content - PELICAN 4.11.0). Nous pouvons préserver un emboîtement plus profond dans les URLs en personnalisant le chemin de sauvegarde. Par exemple, en définissant ARTICLE_SAVE_AS = '{category}/{slug}/index.html' et un ARTICLE_URL similaire, chaque article sera enregistré comme un index.html dans un dossier correspondant à sa catégorie/slug. Cela produit des URLs propres comme /tech/dev/data_science/my-article/ reflétant la structure du répertoire. (Le USE_FOLDER_AS_CATEGORY=True de Pelican utilise par défaut le dossier le plus bas comme catégorie ; pour une taxonomie à plusieurs niveaux, on peut soit combiner le chemin en une seule catégorie, soit traiter les dossiers supérieurs comme sections et utiliser des tags pour la sous-classification.)

Édition Markdown & Aperçu Local

Tous les articles sont écrits en Markdown simple (avec front matter YAML/TOML pour les métadonnées) pour que vous puissiez rédiger du contenu confortablement dans VS Code ou tout autre éditeur. Chaque fichier Markdown commence par des métadonnées comme le titre, la date, les tags, etc. Pelican ne nécessite qu'un titre (il peut en déduire d'autres si nécessaire) (Writing content - PELICAN 4.11.0), mais nous utiliserons les métadonnées de manière intensive pour un comportement personnalisé (plus à ce sujet plus tard). Un exemple de front matter pour un article pourrait être :

Title: Mon Voyage en Science des Données  
Date: 2025-04-10  
Category: data_science  
Tags: python, analytics  
Slug: mon-voyage-en-science-des-donnees  
Status: published

Aperçu Local : Pour activer l'aperçu par article lors de l'édition, utilisez le serveur de développement intégré de Pelican. Le CLI/Makefile de Pelican prend en charge un serveur de rechargement automatique (par exemple make devserver ou pelican --autoreload --listen) qui surveille les changements de fichiers et reconstruit au fur et à mesure que vous écrivez. De cette façon, vous pouvez naviguer vers http://localhost:8000/tech/dev/data_science/my-article/ et voir le HTML rendu se mettre à jour à chaque sauvegarde. Parce que Pelican effectue une écriture de sortie sélective et un cache, les reconstructions sont rapides même pour les grands sites (GitHub - getpelican/pelican: Static site generator that supports Markdown and reST syntax. Powered by Python.). Cela donne un aperçu presque en temps réel de l'article dans le contexte du thème/modèle réel. Pour une itération rapide sur une seule page, la construction incrémentielle de Pelican détectera que seul my-article a changé et régénérera juste cette page, rendant la boucle de rétroaction rapide. VS Code peut également prévisualiser le Markdown, mais utiliser le serveur de Pelican garantit que le contenu est vu avec le style et la mise en page du site final.

Liens Internes de Style Wiki & Rétroliens

Pour interconnecter les notes à la manière d'un wiki, nous activons le lien de style Wiki en Markdown. Pelican dispose d'un plugin communautaire appelé Wikilinks qui convertit automatiquement la syntaxe [Nom de la Page](/nom-de-la-page/) en hyperliens appropriés entre les pages (GitHub - minchinweb/minchin.pelican.plugins.wikilinks: Support Wikilinks when generating Pelican sites). Par exemple, écrire Nous nous appuyons sur des idées de [Mon Voyage en Science des Données](/mon-voyage-en-science-des-donnees/) dans un autre article créera un lien vers la page “Mon Voyage en Science des Données” (résolvant à son slug ou nom de fichier). Le plugin Wikilinks prend en charge le texte d'affichage optionnel (par exemple [texte personnalisé](/nom-de-la-page/)) (GitHub - minchinweb/minchin.pelican.plugins.wikilinks: Support Wikilinks when generating Pelican sites). En coulisses, il scanne les motifs [...](//) après le traitement du markdown et les remplace par des liens <a> vers l'URL de la page cible (GitHub - minchinweb/minchin.pelican.plugins.wikilinks: Support Wikilinks when generating Pelican sites). Cela rend le référencement croisé du contenu aussi facile que dans des outils comme Obsidian ou Roam. (Nous imposerons des noms de fichiers uniques pour les notes afin d'éviter les liens ambigus (GitHub - minchinweb/minchin.pelican.plugins.wikilinks: Support Wikilinks when generating Pelican sites).)

Rétroliens : Pour obtenir un lien bidirectionnel (voir ce qui renvoie à une page), nous pouvons créer un plugin Pelican personnalisé ou utiliser les métadonnées du site. Pendant la construction, nous pouvons collecter toutes les références de liens wiki : par exemple, maintenir un dictionnaire associant chaque page cible à une liste de pages qui l'ont mentionnée. Ensuite, étendre le contexte de l'article de Pelican pour inclure une liste de "rétroliens" pour chaque article. Enfin, dans le modèle d'article, si des rétroliens existent, rendre une section “Lié depuis : …” listant ces pages référentes. Cela nécessite un plugin personnalisé qui s'intègre à la phase de génération de Pelican (en utilisant des signaux comme article_generator_finalized) pour rassembler les liens et injecter les données. L'effort est gérable compte tenu de l'API de plugin de Pelican (hooks Python), et garantit que chaque page se termine par une liste d'autres notes qui y renvoient, renforçant la navigation de type wiki. Si l'on écrit un plugin à partir de zéro, nous analyserons le HTML de chaque article (ou utiliserons la carte de lien interne du plugin Wikilinks) pour identifier les href sortants pointant à l'intérieur du site, puis inverser cette cartographie.

La syntaxe de lien standard de Pelican ({filename}target.md) pourrait également être utilisée pour les liens internes (Writing content - PELICAN 4.11.0) (Writing content - PELICAN 4.11.0), mais le style wiki est plus intuitif pour un flux de travail de jardin numérique. Avec le plugin Wikilinks et un plugin de rétroliens, le site aura des pages entièrement connectées avec des références automatiques.

Types de Contenu Personnalisés & Modèles

L'un des points forts de Pelican est sa flexibilité en matière de métadonnées et de modélisation, que nous exploitons pour définir des types d'articles personnalisés comme RECETTE ou VOYAGE. Tous les fichiers Markdown peuvent inclure des champs de front-matter arbitraires (tant qu'ils ne sont pas en conflit avec des mots-clés réservés) (Writing content — Pelican 4.7.2 documentation) (Writing content — Pelican 4.7.2 documentation). Nous définissons un champ de métadonnées Type (ou utilisons un tag/catégorie) pour indiquer le type de contenu, et ajoutons les champs personnalisés nécessaires. Par exemple, une recette pourrait avoir :

Title: Cookies aux Pépites de Chocolat  
Date: 2025-03-01  
Type: recette  
Portions: 4  
Temps_Préparation: 15 min  
Temps_Cuisson: 10 min  
Ingrédients:

- Farine
- Sucre
- Pépites de chocolat
  Étapes:

1. Préchauffer le four…
2. Mélanger les ingrédients…  
   Template: recette <!-- utiliser un modèle Jinja personnalisé -->

Dans ce cas, nous définissons Template: recette qui indique à Pelican de rendre cette page avec recette.html au lieu du modèle par défaut ([Writing content — Pelican 4.7.2 documentation](https://docs.getpelican.com