Zettelkasten UI (GitHub Pages)
Zettelkasten UI (GitHub Pages)
This repository publishes a browser-only Zettelkasten reader at /zettelkasten/.
It runs entirely on GitHub Pages and pulls markdown straight from zettels/<year>/<yyyymm>/<id>.md—no CLI or backend services required.
How it works
- The page
pages/zettelkasten.mdloads/assets/data/zettelkasten-index.jsonfor a fast first pass, then can rebuild the list live from GitHub on demand. - A small inline markdown renderer in
assets/js/zettelkasten.jshandles headings, lists, emphasis, blockquotes, links, and inline code without external dependencies. - Styling lives in
assets/css/zettelkasten.cssto avoid conflicts with the rest of the site. - Quick authoring hooks are wired directly to GitHub: the New note button opens a pre-filled
zettels/<year>/<yyyymm>/<id>.mddraft in the repo’smainbranch, and the Edit selected link jumps to the GitHub editor for the currently selected note.
Use the Refresh button after removing, renaming, or adding a note. It will pull a fresh list from GitHub if the static index hasn’t caught up and keep your place while reselecting the closest available entry. The deck controls below the viewer let you step forward/backward through the loaded set without exposing a long list.
Open the Card Catalog (button or Ctrl/Cmd+K) to search titles, full text, and tags without disturbing the main viewer. Check one or more tags to narrow results, navigate with the arrow keys, and hit Enter to open the focused card in the existing reader.
Zettel layout
- Notes live under
zettels/<year>/<yyyymm>/<id>.md(e.g.,zettels/2025/202511/251115_example.md). - A starter template is available at
templates/zettel_template.md. - Maps of Content live in
MOCs/and binaries live inattachments/.
Updating the index
Run the helper script whenever you add or rename files in zettels/:
node scripts/build-zk-index.js
The script scans zettels/**.md, extracts the first heading as the title, captures a short excerpt, and writes the fresh index to
assets/data/zettelkasten-index.json for the UI to consume.