--- title: "QuillDrop" description: "Minimalistisches, blitzschnelles Blog-CMS in Go - mit Dark/Light Theme, Static Site Generator und dynamischem Server" --- # QuillDrop **QuillDrop** ist ein modernes, minimalistisches Blog-CMS, geschrieben in Go. Es kombiniert die Geschwindigkeit eines Static Site Generators mit der Flexibilität eines dynamischen HTTP-Servers - ohne externe Datenbank, ohne JavaScript-Frameworks, ohne Overhead. ## Philosophie > Write. Save. Published. QuillDrop folgt dem Prinzip der maximalen Einfachheit: Markdown-Dateien schreiben, speichern - fertig. Kein Build-Tool-Chaos, kein Node.js, keine Datenbank. Ein einzelnes Go-Binary erledigt alles. ## Features ### Dual-Mode Betrieb QuillDrop unterstützt zwei Betriebsmodi in einem einzigen Binary: - **`quilldrop serve`** - Startet einen dynamischen HTTP-Server für lokale Entwicklung und Vorschau. Ideal zum Schreiben und sofortigen Testen neuer Posts. - **`quilldrop generate`** - Generiert eine komplette statische Website als HTML-Dateien. Perfekt für Deployment auf Nginx, Apache, CDN oder GitHub Pages. ### Markdown mit YAML-Frontmatter Posts und Seiten werden als einfache Markdown-Dateien mit YAML-Frontmatter geschrieben: ```yaml --- title: "Mein neuer Blogpost" date: 2025-11-06 12:00:00 author: "Max Mustermann" cover: "/images/posts/2025/11/cover.webp" tags: [Kubernetes, DevOps, Self-Hosted] categories: [Technik] preview: "Kurze Vorschau des Posts..." draft: false toc: true --- # Hier beginnt der Post Normales Markdown mit allen Extras... ``` Unterstützte Frontmatter-Felder: | Feld | Beschreibung | |------|-------------| | `title` | Titel des Posts | | `date` | Veröffentlichungsdatum (mehrere Formate unterstützt) | | `update` | Letzte Aktualisierung | | `author` | Autor des Posts | | `cover` / `featureImage` | Cover-Bild (mit Fallback) | | `tags` | Liste von Tags | | `categories` | Liste von Kategorien | | `preview` | Benutzerdefinierte Vorschau (sonst automatisch aus erstem Absatz) | | `draft` | Entwurf - wird nicht veröffentlicht | | `toc` | Inhaltsverzeichnis automatisch generieren | | `hide` | Post verstecken | | `top` | Post oben anpinnen | ### Erweitertes Markdown-Rendering QuillDrop nutzt [Goldmark](https://github.com/yuin/goldmark) als Markdown-Engine mit folgenden Erweiterungen: - **GitHub Flavored Markdown (GFM)** - Tabellen, Strikethrough, Autolinks, Task-Listen - **Syntax Highlighting** - Über 200 Programmiersprachen mit dem Dracula-Theme via [Chroma](https://github.com/alecthomas/chroma) - **Emoji-Support** - Shortcodes wie `:rocket:`, `:tada:`, `:satellite:` - **Automatische Heading-IDs** - Für Ankerverlinkung und Inhaltsverzeichnis - **Raw HTML** - Einbettung von HTML direkt im Markdown - **Hugo-Kompatibilität** - `{{}}` Shortcodes werden automatisch verarbeitet ### Responsives Design mit Dark/Light Theme Das mitgelieferte Theme bietet: - **Dark Mode als Default** mit einem hellen Alternativ-Theme - **Theme Toggle** mit localStorage-Persistenz (bleibt nach Reload erhalten) - **Futuristisches Design** - Dunkle Hintergrunde, Cyan-Akzente, subtile Glow-Effekte - **Responsive Layout** - Mobile-first, optimiert für alle Bildschirmgrößen - **Hamburger-Navigation** auf mobilen Geräten mit Fullscreen-Overlay und eigenem Stacking Context - **Dropdown-Menus** für verschachtelte Navigation (Touch-optimiert auf Mobile) - **Integrierte Suche** — Lupe in der Navbar mit Ctrl+K Shortcut - **Typographie** - Inter als Textfont, JetBrains Mono für Code und Metadaten ### Navigation und Menü Das Navigationsmenü wird vollständig über die `config.yaml` konfiguriert und unterstützt verschachtelte Dropdown-Menüs: ```yaml menu: - label: "Home" url: "/" - label: "Projekte" children: - label: "VM-Manager" url: "/sites/projekte/vm-manager" - label: "VM-Tracker" url: "/sites/projekte/vm-tracker" - label: "QuillDrop" url: "/sites/projekte/quilldrop" - label: "Über mich" url: "/sites/ueber-mich" - label: "Tags" url: "/tags" ``` Neue Menüpunkte und Untermenüs können jederzeit durch einfaches Erweitern der YAML-Konfiguration hinzugefügt werden. ### Pagination Die Startseite zeigt eine konfigurierbare Anzahl von Posts pro Seite (Standard: 5). Die Pagination bietet: - **Intelligente Seitennummerierung** - Zeigt erste und letzte Seite, plus ein Fenster um die aktuelle Seite herum - **Ellipsis** bei vielen Seiten (1 ... 10 11 **12** 13 14 ... 23) - **Neuere/Ältere Buttons** für schnelle Navigation - **Pretty URLs** - `/page/2`, `/page/3`, etc. - SEO-freundlich: `/page/1` wird automatisch auf `/` umgeleitet (301) ### Tags und Kategorien QuillDrop unterstützt sowohl Tags als auch Kategorien zur Strukturierung von Inhalten: - **Tag-Übersicht** unter `/tags/` mit Anzahl der Posts pro Tag - **Tag-Seiten** unter `/tags/kubernetes/` mit allen Posts eines Tags - **Kategorie-Übersicht** unter `/categories/` mit Anzahl der Posts pro Kategorie - **Kategorie-Seiten** unter `/categories/technik/` mit allen Posts einer Kategorie - **Tag- und Kategorie-Badges** auf Post-Cards und Einzelseiten - Tags und Kategorien werden aus dem YAML-Frontmatter (`tags`, `categories`) ausgelesen ### Volltextsuche QuillDrop enthält eine integrierte Client-seitige Suche, die komplett ohne Backend auskommt: - **Suchindex** — Beim Generieren wird eine `search-index.json` mit allen Posts erstellt - **Lazy Loading** — Der Suchindex wird erst beim ersten Öffnen der Suche geladen - **Multi-Term-Suche** — Mehrere Suchbegriffe werden mit UND verknüpft - **Felder** — Durchsucht Titel, Vorschau, Tags und Kategorien - **Keyboard-Shortcut** — `Ctrl+K` / `Cmd+K` öffnet die Suche - **Lupe in der Navbar** — Klick auf das Such-Icon öffnet das Suchfeld - **Debounce** — Suchergebnisse erscheinen nach 200ms Tippverzögerung - **Maximal 8 Treffer** mit Highlighting der Suchbegriffe - **Escape** oder Klick außerhalb schließt die Suche - Kein externer Dienst, kein Framework — reines Vanilla JavaScript ### Artikel-Navigation Am Ende jedes Blog-Posts wird eine Navigation zum vorherigen und nächsten Artikel angezeigt: - **Neuerer Artikel** (← links) — Verlinkt zum chronologisch neueren Post - **Älterer Artikel** (→ rechts) — Verlinkt zum chronologisch älteren Post - Beim neuesten Artikel wird nur "Älterer Artikel" angezeigt - Beim ältesten Artikel wird nur "Neuerer Artikel" angezeigt - Zeigt jeweils den Titel des verlinkten Artikels an ### Inhaltsverzeichnis (Table of Contents) Posts können ein automatisch generiertes Inhaltsverzeichnis aktivieren: - Aktivierung über `toc: true` im Frontmatter - Unterstützt **H1, H2 und H3** Überschriften - **Relative Einrückung** — Das TOC erkennt die minimale Heading-Ebene und rückt relativ dazu ein - Automatische Anchor-Links zu den jeweiligen Überschriften - Wird client-seitig generiert für schnelle Seitenladezeit ### Statische Seiten Neben Blog-Posts unterstützt QuillDrop statische Seiten für: - Impressum, Datenschutzerklärung - Über mich / About - Projektseiten (mit Unterseiten) - Beliebige weitere Seiten Seiten werden als Markdown-Dateien im `sites/`-Verzeichnis abgelegt. Verschachtelte Verzeichnisse werden automatisch erkannt - z.B. wird `sites/projekte/vm-tracker/index.md` unter `/sites/projekte/vm-tracker` erreichbar. ### RSS Feed Automatisch generierter RSS 2.0 Feed unter `/index.xml` mit: - Den letzten 20 Posts - Titel, Link, Vorschau und Veröffentlichungsdatum - RSS-Autodiscovery im HTML-Head - RSS-Icon in der Navigation - URL `/index.xml` für Kompatibilität mit bestehenden Blog-Setups ### Cover-Bilder Posts können ein Cover-Bild definieren, das sowohl auf der Startseite (als Post-Card) als auch auf der Einzelansicht angezeigt wird: - **21:9 Aspect Ratio** auf Post-Cards mit Zoom-on-Hover Effekt - **Volle Breite** auf der Einzelpost-Seite - **Lazy Loading** für optimale Performance - **Fallback** von `cover` auf `featureImage` ## Architektur ### Projektstruktur ``` quilldrop/ ├── main.go # CLI Entry Point ├── config.yaml # Konfiguration ├── content/ # Blog-Posts (Markdown) │ ├── 2025-11-06-mein-post.md │ └── ... ├── sites/ # Statische Seiten │ ├── ueber-mich.md │ ├── impressum.md │ └── projekte/ │ └── mein-projekt/ │ └── index.md ├── static/ # Statische Assets │ ├── css/style.css │ ├── js/ │ │ ├── theme.js # Dark/Light Toggle + TOC Generator │ │ └── search.js # Client-seitige Volltextsuche │ └── images/ ├── internal/ │ ├── config/config.go # YAML Config Loader │ ├── content/ │ │ ├── post.go # Post Struct + FlexTime + Tags/Categories │ │ ├── parser.go # Markdown + Frontmatter Parser │ │ └── page.go # Statische Seiten Parser │ ├── server/server.go # HTTP Server │ ├── generator/ │ │ ├── generator.go # Static Site Generator │ │ └── search.go # Search-Index Generator (JSON) │ └── templates/ │ ├── render.go # Template Engine + Functions │ ├── rss.go # RSS Feed Generator │ ├── base.html # Base Layout + Navbar + Suche │ ├── home.html # Homepage + Pagination │ ├── post.html # Einzelner Post + Prev/Next Navigation │ ├── page.html # Statische Seite │ ├── tags.html # Tag-Übersicht │ ├── tag.html # Tag-Seite │ ├── categories.html # Kategorie-Übersicht │ └── category.html # Kategorie-Seite └── output/ # Generierte statische Dateien ``` ### Technologie-Stack | Komponente | Technologie | |-----------|-------------| | Sprache | Go (Standard Library + minimale Dependencies) | | HTTP Server | `net/http` (Go Standard Library) | | Templates | `html/template` mit `embed.FS` | | Markdown | Goldmark + GFM + Emoji + Chroma | | Konfiguration | YAML via `gopkg.in/yaml.v3` | | Syntax Highlighting | Chroma (Dracula Theme) | | Fonts | Inter + JetBrains Mono (Google Fonts) | | CSS | Vanilla CSS mit Custom Properties | | JavaScript | Vanilla JS — Theme Toggle, Suche, TOC (kein Framework) | ### Dependencies QuillDrop hat bewusst minimale Abhängigkeiten - **kein Web-Framework**, **kein CSS-Framework**, **kein JS-Framework**: - `github.com/yuin/goldmark` - Markdown Parser (CommonMark-konform) - `github.com/yuin/goldmark-emoji` - Emoji Shortcodes - `github.com/yuin/goldmark-highlighting/v2` - Syntax Highlighting - `github.com/alecthomas/chroma/v2` - Syntax Highlighting Engine - `gopkg.in/yaml.v3` - YAML Parser ### Embedded Assets Alle HTML-Templates werden via Go's `//go:embed` Directive direkt in das Binary eingebettet. Das bedeutet: - **Einzelnes Binary** - Keine externen Template-Dateien nötig - **Schneller Start** - Kein Dateisystem-Zugriff für Templates - **Einfaches Deployment** - Ein Binary + Config + Content = fertig ## Konfiguration Die gesamte Konfiguration erfolgt über eine einzige `config.yaml`: ```yaml title: "Mein Blog" description: "Tech Blog - DevOps, Kubernetes, Self-Hosted" author: "Max Mustermann" baseURL: "https://mein-blog.de" port: 8080 postsPerPage: 5 contentDir: "content" sitesDir: "sites" outputDir: "output" menu: - label: "Home" url: "/" - label: "Tags" url: "/tags" - label: "Über mich" url: "/sites/ueber-mich" ``` | Option | Default | Beschreibung | |--------|---------|-------------| | `title` | - | Titel der Website | | `description` | - | Beschreibung (Meta-Tag + Hero) | | `author` | - | Autor der Website | | `baseURL` | - | Basis-URL für RSS und absolute Links | | `port` | `8080` | Port für den dynamischen Server | | `postsPerPage` | `5` | Anzahl Posts pro Seite | | `contentDir` | `content` | Verzeichnis für Blog-Posts | | `sitesDir` | `sites` | Verzeichnis für statische Seiten | | `outputDir` | `output` | Ausgabeverzeichnis für statische Generierung | | `menu` | `[]` | Navigationsmenü mit optionalen Untermenüs | ## Schnellstart ### Installation ```bash # Repository klonen git clone https://github.com/ruedigerp/quilldrop.git cd quilldrop # Dependencies laden go mod download # Binary bauen go build -o quilldrop . ``` ### Neuen Post erstellen Eine neue Markdown-Datei im `content/`-Verzeichnis anlegen: ```bash touch content/2025-12-01-mein-erster-post.md ``` ```markdown --- title: "Mein erster Post" date: 2025-12-01 10:00:00 author: "Max Mustermann" tags: [Blog, QuillDrop] preview: "Das ist mein erster Post mit QuillDrop!" toc: false --- # Willkommen Das ist mein erster Post mit **QuillDrop**. ``` ### Lokale Vorschau ```bash # Dynamischen Server starten ./quilldrop serve # Oder direkt mit Go go run . serve ``` Dann im Browser: [http://localhost:8080](http://localhost:8080) ### Statische Seite generieren ```bash # HTML-Dateien generieren ./quilldrop generate # Generierte Dateien befinden sich in output/ ls output/ ``` Die generierten Dateien im `output/`-Verzeichnis können direkt auf einen Webserver (Nginx, Apache, Caddy) oder CDN deployed werden. ## URL-Schema Alle URLs verwenden konsequent Trailing Slashes, um serverseitige Redirects zu vermeiden: | URL | Beschreibung | |-----|-------------| | `/` | Startseite (letzte N Posts) | | `/page/2/` | Seite 2 der Post-Liste | | `/posts/2025-11-06-mein-post/` | Einzelner Blog-Post | | `/tags/` | Tag-Übersicht | | `/tags/kubernetes/` | Posts mit Tag "Kubernetes" | | `/categories/` | Kategorie-Übersicht | | `/categories/technik/` | Posts in Kategorie "Technik" | | `/sites/ueber-mich/` | Statische Seite | | `/sites/projekte/vm-tracker/` | Verschachtelte Projektseite | | `/index.xml` | RSS Feed | | `/search-index.json` | Suchindex (JSON) | | `/static/css/style.css` | Statische Assets | | `/images/posts/2025/11/cover.webp` | Bilder | ## Warum QuillDrop? - **Keine Datenbank** - Dateisystem als einzige Datenquelle - **Keine Build-Pipeline** - Ein `go build` und fertig - **Keine JS-Frameworks** - Vanilla JavaScript für Theme, Suche und TOC - **Minimale Dependencies** - 5 Go-Packages, alle fokussiert auf Markdown - **Blitzschnell** - Generiert 100+ Posts in unter 3 Sekunden - **Einzelnes Binary** - Templates eingebettet, kein Runtime-Setup - **Hugo-kompatibel** - Bestehende Hugo-Posts mit Frontmatter funktionieren - **Dual-Mode** - Entwicklung mit Server, Produktion mit Static Generator ## Lizenz QuillDrop ist Open Source.