Quartz est un générateur de site statique un peu particulier. Là où des outils classiques servent à créer des blogs, Quartz est pensé pour construire un “digital garden” : un espace de connaissances interconnectées, vivant et évolutif.
Dans cet article, on va découvrir Quartz progressivement, avec une approche accessible même si vous débutez.
1. L’idée derrière Quartz
Quartz transforme des fichiers Markdown en un site web complet, mais sa vraie force est ailleurs : il permet de relier les idées entre elles, comme dans un réseau de pensée.
Vue d’ensemble
flowchart LR A[Notes Markdown] --> B[Transformation] B --> C[Pages HTML] C --> D[Site Web]
Vous écrivez des notes, Quartz les transforme, puis vous obtenez un site prêt à être exploré.
2. Le concept de “digital garden”
Contrairement à un blog classique organisé dans le temps, Quartz favorise une structure plus libre où les notes évoluent et se connectent entre elles. On ne publie pas des articles figés, on cultive un ensemble d’idées qui se développent progressivement.
Exemple de réseau de connaissances
flowchart TD A[Apprentissage] --> B[Programmation] A --> C[Psychologie] B --> D[JavaScript] B --> E[Python] C --> F[Motivation] C --> G[Habitudes]
Chaque note peut en relier plusieurs autres, formant un graphe de connaissances que l’on peut parcourir dans tous les sens.
3. Comment fonctionne Quartz ?
Quartz repose sur une chaîne de transformation. Le contenu passe par plusieurs étapes avant de devenir un site.
Pipeline simplifié
flowchart TD A[Fichier Markdown] --> B[Plugins] B --> C[Contenu transformé] C --> D[Pages générées] D --> E[Site final]
Détail du pipeline
flowchart TD A[Markdown] --> B[Transformers] B --> C[AST modifié] C --> D[Filters] D --> E[Contenu validé] E --> F[Emitters] F --> G[Fichiers HTML] G --> H[Layout] H --> I[Site final]
Quartz s’appuie sur trois types de plugins. Les transformers modifient le contenu en profondeur, les filters décident ce qui doit être publié ou non, et les emitters se chargent de générer les pages finales.
4. Écrire du contenu
Quartz utilise du Markdown enrichi, ce qui permet d’écrire rapidement tout en ajoutant des fonctionnalités puissantes.
Exemple simple
# Ma note
Voici une idée importante.
Voir aussi [[autre-note]]Les liens internes
[[nom-de-la-note]]Ce format crée automatiquement un lien entre deux notes et renforce la structure du graphe.
Exemple avancé
---
title: Exemple avancé Quartz
tags: [quartz, demo, features]
---
# Exemple avancé Quartz
Bienvenue dans cette note de démonstration. Elle illustre plusieurs fonctionnalités clés de Quartz en une seule page.
---
## 🔗 Liens internes
Quartz permet de relier facilement les idées :
- Voir aussi [[architecture-quartz]]
- Approfondir avec [[plugins-transformers]]
Ces liens alimentent automatiquement le graphe global.
---
## 💡 Callout (style Obsidian)
> [!info]
>
> Quartz supporte les callouts pour structurer visuellement l’information.
> [!warning]
>
> L’ordre des plugins peut casser certaines fonctionnalités.
---
## 🎥 Vidéo intégrée
https://www.youtube.com/watch?v=dQw4w9WgXcQ
(Si vous avez configuré un plugin d’embed, cette URL devient une vidéo.)
---
## 🧠 Diagramme Mermaid
```mermaid
flowchart LR
A[Markdown] --> B[Transformers]
B --> C[HTML]
C --> D[Site Quartz]5. Le rendu visuel
Quartz transforme les notes en une interface complète qui facilite la navigation et la compréhension globale du contenu. On y retrouve généralement une zone de lecture principale, des éléments de navigation comme une barre latérale, ainsi que des outils pour explorer les relations entre les notes.
Architecture UI
flowchart TD A[Page] --> B[Contenu] A --> C[Sidebar] A --> D[Graph] A --> E[Tags]
6. Personnaliser Quartz
Quartz est conçu pour être modifié en profondeur. Cette personnalisation repose sur trois axes principaux qui permettent d’agir à différents niveaux du système.
Les niveaux de personnalisation
flowchart TD A[Quartz] --> B[Plugins] A --> C[Layout] A --> D[Styles CSS]
Les plugins servent à modifier le comportement et la transformation du contenu, par exemple pour ajouter des fonctionnalités ou enrichir le Markdown. Le layout définit la structure des pages, notamment l’organisation des éléments à l’écran. Enfin, les styles contrôlent l’apparence visuelle, comme les couleurs, la typographie ou l’espacement.
7. Pourquoi utiliser Quartz ?
Quartz combine simplicité d’écriture et puissance de structuration. Il permet de produire un site rapide, facilement portable et extensible, tout en favorisant une organisation des connaissances plus naturelle.
Cas d’usage
Quartz peut servir à construire une base de connaissances personnelle, documenter un projet technique ou encore créer un espace de réflexion structuré autour d’un domaine précis.
8. Mental model à retenir
Quartz repose sur une idée simple : combiner du contenu, des transformations et une interface.
flowchart LR A[Contenu] --> D[Quartz] B[Plugins] --> D C[UI] --> D
Si vous comprenez comment écrire vos notes, comment elles sont transformées et comment elles sont affichées, vous avez déjà une bonne maîtrise de l’outil.
Conclusion
Quartz propose une approche différente de la publication. Il ne s’agit pas seulement de produire du contenu, mais de construire un système de connaissances interconnectées qui évolue dans le temps.
Prochaine étape
Pour commencer concrètement, vous pouvez créer quelques notes simples, les relier entre elles, puis observer comment le graphe se forme. Cela suffit souvent à comprendre le potentiel de Quartz.
Si vous souhaitez aller plus loin, vous pourrez ensuite explorer la création de plugins, adapter l’interface à vos besoins ou structurer votre espace comme un véritable outil de réflexion.