Obsidian-Quartz Setup

Meine erste Quartz-Seite

2 min read

Quartz Setup

Dependencies

Quartz nutzt Node.js (Javascript). Das muss zuerst installiert werden:

sudo apt install nodejs npm

Bei Debian/Ubuntu wird da eine alte Version installiert. Mit dem version manager (nvm) kann man problemlos auf eine neue switchen:

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash  
source ~/.nvm/nvm.sh  
nvm install --lts  
nvm use --lts  
npm --version

Quartz-Seite Initialisieren

Anscheinend muss man sich die Quartz-Dateien aus dem Repo holen:

cd <beliebigen Ordner wo die Seite liegen soll>
git clone https://github.com/jackyzha0/quartz.git <Ordner-Name>
cd <Ordner-Name>

Erst müssen nötige JS dependencies geholt werden:

npm i

Quartz-Seite initialisieren:

npx quartz create

Der Befehl erstellt einen ./content-Ordner. Dort liegt der Obsidian-Vault. Diesen Ordner könnte man direkt als git repo initialisieren (optional):

cd content
git init

Wenn der Obsidian-Vault woanders liegen soll, ist dieses auch problemlos möglich. Hierzu muss nach dem Ausführen von npx quartz create die Symlink-Option gewählt werden, und der Pfad zum Obsidian-Vault eingetragen werden.

Konfiguration

Am besten liest man sich in die Doku ein: https://quartz.jzhao.xyz/

Ein paar hilfreiche Einstellungen:

Front matter

Notes sollten Frontmatter bekommen:

---
title: <name der seite>
draft: false # hiermit steuert man, ob die Seite gezeigt wird
---

Ich teste mal eine draft Seite - der Link unten müssten einen 404-Fehler produzieren: Das ist ein Draft

Dieser Link öffnet eine Seite: Das ist kein Draft

Quartz-Seite bauen

Die Quartz-Seite kann mit folgendem Befehlt gebaut werden:

npx quartz build

Damit wir in dem Ordner /public eine eigenständige statische HTML-Seite erstellt. Die Dateien in /public können in einen beliebigen Host-Ordner kopiert werden.

Alternativ kann man die Seite auch lokal “serven”:

npx quartz build --serve

Der Vorteil ist:

  1. Nun kann die Seite im Browser unter localhost:8080 angeschaut werden
  2. Jegliche Änderungen im /content-Ordner (Obsidian Vault) werden automatisch in /public gebaut

Quartz + git

Um das Veröffentlichen der Seite möglichst einfach zu machen, kann man den Webhost (bspw. in unserem VPS) einfach als git repo anlegen (Server-seitige Einstellung). Anschliessend initialisiert man ein Repo, wo alle Dateien aus /public hinkopiert werden (ich würde nicht direkt public nutzen, da der Ordner immer neu angelegt wird.)

cd <repo-Ordner>
git init
git add remote origin <link der Git Repo wird vom Server bereitgestellt>

Dann kann man Änderungen über einen Standard git client (e.g. GitKraken, TortoiseGit) einchecken (git commit ...).

Änderungen würde man dann so machen:

  1. Änderung im Obsidian-Vault
  2. npx quartz build im Quartz-Ordner
  3. /public-Dateien in das Repo kopieren
  4. git commit & push

Graph View