Quartz

Quartz ist ein Static Site Generator (SSG), der Markdown-Notizen mit Wikilinks direkt in eine funktionierende Website verwandelt. Gebaut von Jack Zhao, optimiert für digitale Gärten.

🎯 Was macht Quartz einzigartig?

Feature	Standard SSG	Quartz
Input	Markdown	Markdown + Wikilinks
Obsidian-Support	Nein	✅ Voll kompatibel
Backlinks	Nein	✅ Automatisch
Knowledge Graph	Nein	✅ D3-Visualisierung
Callouts	Nein	✅ 13 Typen
Full-text Search	Extern	✅ Built-in
Mobile	?	✅ Responsive

🛠️ Tech-Stack

Input (Markdown)
    ↓
Remark (AST)  — Parsing
    ↓
Transformers  — Plugins (FrontMatter, Latex, Syntax, etc.)
    ↓
Rehype (HAST) — HTML-AST
    ↓
Emitters      — HTML-Generation
    ↓
Output (HTML) → Website

Wichtige Komponenten:

Remark/Rehype: Markdown-Pipeline (unified.js ecosystem)
D3.js: Interaktive Graphen
KaTeX: Math rendering
Shiki: Syntax-Highlighting
Preact: Lightweight UI-Komponenten

📝 Markdown-Features

Quartz aktiviert für dich automatisch:

# Wikilinks
[[Zettelkasten-Prinzip]]      → Link + Backlink
[[Note|Custom Text]]          → Mit Custom-Text
[[Note#sektion|Sektion]]             → Zu Überschrift springen
 
# Obsidian-Features
> [!note]
> 
> Callout Box (13 Typen)
 
![[image.png|300x200]]        → Eingebundenes Bild mit Größe
 
# Math
$x^2 + y^2 = z^2$            → Inline KaTeX
$$\int_0^\infty e^{-x} dx$$  → Block Math
 
# Diagramme
\`\`\`mermaid
graph LR
  A --> B
\`\`\`

🌐 Output-Features

Nach npx quartz build:

✅ HTML-Website (statisch)
✅ RSS-Feed (automatisch)
✅ XML-Sitemap (SEO)
✅ Full-text Search Index (FlexSearch)
✅ Open Graph Bilder (optional)
✅ 404-Seite (custom)

⚙️ Konfiguration

Deine quartz.config.ts:

const config: QuartzConfig = {
  configuration: {
    pageTitle: "Dein Garten",
    baseUrl: "dein-domain.de",
    locale: "de-DE",
  },
  plugins: {
    transformers: [/* Markdown-Processing */],
    filters: [RemoveDrafts()],
    emitters: [ContentPage(), TagPage(), FolderPage()],
  },
}

🚀 Deployment

Quartz generiert nur statische HTML →

GitHub Pages ✅
Cloudflare Pages ✅ (wie dein quartzen.pages.dev)
Netlify ✅
Eigener Server ✅

Zero Server-Overhead, ultra-schnell.

🌱 Siehe auch

01-atomic-note — Was in deinen Notizen stehen kann
02-moc — Wie du Übersichten erstellst
Zettelkasten-Prinzip — Das philosophische Konzept
Digital Garden — Das größere Ökosystem

Status: 🌳 Evergreen (stable tool documentation)

Quartz 4

Explorer