Quartz
Static Site Generator ที่สร้างมาสำหรับ Obsidian โดยเฉพาะ — แปลงไฟล์ Markdown เป็นเว็บไซต์ HTML พร้อม Graph View แบบ interactive
ปัญหาที่แก้
ไฟล์ .md ใน Obsidian เปิดอ่านได้แค่บนเครื่องตัวเอง ถ้าอยากให้คนอื่นดูผ่าน browser ต้อง แปลง .md → HTML ก่อน
.md files (Obsidian) ──Quartz build──> เว็บไซต์ HTML + Graph View
จุดเด่น
- รองรับ
[[wikilinks]], frontmatter, tags ของ Obsidian ตรง ๆ - สร้าง Graph View แบบ interactive ให้อัตโนมัติ
- มี search, backlinks, table of contents ในตัว
- เขียนด้วย TypeScript ใช้ Node.js ในการ build
- ฟรี + Open Source
Flow การ Deploy
Push notes ขึ้น GitHub (private repo ได้)
↓
Cloudflare Pages ดึง code จาก GitHub
↓
รัน `npx quartz build` (แปลง .md → HTML ลง public/)
↓
เอา HTML ขึ้นเว็บให้อัตโนมัติ
↓
เข้าถึงผ่าน custom domain เช่น garden.admyhusky.dev
ทุกครั้งที่ push note ใหม่ เว็บอัปเดตเองเลย
การใช้งานจริงใน Digital Garden
โครงสร้างที่ใช้:
my-digital-garden/
├── content/ ← Markdown ที่ Quartz build
├── quartz/ ← Quartz source code
├── quartz.config.ts ← ตั้งค่า title, theme, สี, font
├── quartz/styles/custom.scss ← CSS เพิ่มเติม
└── public/ ← output HTML (ไม่ commit)
Config ที่สำคัญ (quartz.config.ts)
| ค่า | หน้าที่ |
|---|---|
pageTitle | ชื่อเว็บ |
baseUrl | domain เช่น garden.admyhusky.dev |
locale | ภาษา เช่น th-TH |
ignorePatterns | folder/file ที่ไม่ต้อง build |
theme.typography | ฟอนต์ (ใช้ Chakra Petch) |
theme.colors | สี light/dark mode |
Cloudflare Pages Settings
| ค่า | ใส่อะไร |
|---|---|
| Build command | npx quartz build |
| Build output | public |
| Environment variable | NODE_VERSION = 20 |
Key Points
- Quartz สร้างมาเพื่อ Obsidian โดยเฉพาะ ไม่ต้อง convert format
- Deploy ฟรีบน Cloudflare Pages (bandwidth ไม่จำกัด)
- Private repo ก็ deploy ได้
- Custom domain ตั้งได้ฟรีผ่าน Cloudflare