Quartz 5

quartz_setup_guide

3 min read

คู่มือการเผยแพร่ Obsidian ขึ้นเว็บไซต์ด้วย Quartz (เข้าถึงได้ตลอด 24 ชม. แม้ปิดคอม)

เพื่อให้คุณสามารถเปิดดูหรือแชร์โน้ตใน Obsidian ได้จากทั้งบนมือถือและคอมพิวเตอร์ตลอดเวลาโดยไม่มีค่าใช้จ่าย และไม่ต้องเปิดคอมพิวเตอร์ทิ้งไว้ เราได้ทำการติดตั้งและตั้งค่า Quartz ให้คุณเรียบร้อยแล้วในเครื่องของคุณ โดยมีโครงสร้างการทำงานและขั้นตอนการเชื่อมต่อดังนี้ครับ

🛠️ โครงสร้างการทำงาน (Architecture Overview)

graph TD
    Obsidian[Obsidian Vault บนคอม] -- อัปเดตโน้ตอัตโนมัติ --> QuartzFolder[โฟลเดอร์ Quartz ในเครื่อง]
    QuartzFolder -- คำสั่ง npx quartz sync --> GitHub[GitHub Repository]
    GitHub -- อัปเดต/สร้างเว็บใหม่อัตโนมัติ --> CloudHost[Cloudflare Pages หรือ Vercel]
    CloudHost -- เปิดเข้าชมได้ 24 ชม. --> MobileBrowser[มือถือ หรือ เว็บไซต์]

สิ่งที่เราเตรียมไว้ให้คุณแล้วในเครื่องคอมพิวเตอร์นี้:

  1. ติดตั้ง Quartz ไว้ที่โฟลเดอร์ /home/xiantie/Projects/quartz เรียบร้อยแล้ว
  2. สร้างระบบเชื่อมโยง (Symlink) โฟลเดอร์เนื้อหาของ Quartz (content) ให้ดึงข้อมูลโดยตรงจาก Obsidian Vault ของคุณที่ /home/xiantie/ObsidianData/xiantie
  3. ตั้งค่าระบบลิงก์ ให้สอดคล้องกับ Obsidian (รูปแบบ shortest link)

เมื่อใดก็ตามที่คุณแก้ไขโน้ตใน Obsidian ข้อมูลจะมาปรากฏในโฟลเดอร์ Quartz ทันทีโดยที่คุณไม่ต้องคัดลอกไฟล์ซ้ำซ้อน

📋 ขั้นตอนที่คุณต้องทำต่อเพื่อให้เว็บไซต์เปิดใช้งานได้จริง

ขั้นตอนที่ 1: สร้าง Repository บน GitHub

  1. เปิดเว็บไซต์ GitHub และล็อกอินเข้าบัญชีของคุณ
  2. คลิกปุ่ม New เพื่อสร้าง Repository ใหม่
  3. ตั้งชื่อ Repository เช่น my-quartz-garden
  4. เลือกเป็น Public (เปิดเผยให้ทุกคนเห็นได้) หรือ Private (ถ้าต้องการเห็นเฉพาะตัวเอง)
  5. ห้าม ติ๊กเลือก Add a README file, .gitignore หรือ license (สร้างเป็น Repository เปล่า)
  6. เมื่อสร้างเสร็จแล้ว ให้คัดลอก URL ของ Repository (เช่น https://github.com/USERNAME/my-quartz-garden.git)

ขั้นตอนที่ 2: เชื่อมโยงโฟลเดอร์ Quartz ในเครื่องเข้ากับ GitHub

เปิด Terminal บนคอมพิวเตอร์ของคุณแล้วรันคำสั่งเหล่านี้ (เปลี่ยน USERNAME และ my-quartz-garden เป็นของคุณ):

cd /home/xiantie/Projects/quartz
 
# เปลี่ยน URL ของ origin รีโพสิทอรีหลักให้ชี้ไปที่ GitHub ของคุณ
git remote set-url origin https://github.com/USERNAME/my-quartz-garden.git
 
# ตรวจสอบการเชื่อมต่อ
git remote -v

ขั้นตอนที่ 3: ล็อกอิน Git / GitHub และซิงค์ครั้งแรก (First Sync)

ในการส่งโค้ดขึ้น GitHub ครั้งแรก คอมพิวเตอร์ของคุณต้องได้รับการยืนยันตัวตนกับ GitHub ก่อน

วิธีที่ 3.1: ยืนยันตัวตนผ่าน GitHub CLI (แนะนำ)

เปิด Terminal แล้วรันคำสั่ง:

gh auth login
  • เลือก GitHub.com
  • เลือกโปรโตคอล HTTPS
  • ตอบ Yes เพื่อตั้งค่า Git credential helper ให้จำรหัสผ่านโดยอัตโนมัติ
  • เลือก Login with a web browser จากนั้นคัดลอก One-time code ไปกรอกในเว็บเบราว์เซอร์เพื่อเชื่อมโยงบัญชี

วิธีที่ 3.2: ซิงค์โน้ตขึ้น GitHub

เมื่อล็อกอินเรียบร้อยแล้ว ให้รันคำสั่ง:

cd /home/xiantie/Projects/quartz
npx quartz sync

ขั้นตอบที่ 4: เชื่อมต่อเว็บไซต์บน Cloudflare Pages (แนะนำ)

Cloudflare Pages สามารถให้บริการเว็บไซต์แบบ Static Site ได้ฟรี รวดเร็ว และรองรับ Quartz ได้อย่างสมบูรณ์แบบที่สุด

  1. ล็อกอินเข้าใช้งาน Cloudflare Dashboard (หากยังไม่มีบัญชี สามารถสมัครได้ฟรี)
  2. ไปที่เมนู Workers & Pages (ทางซ้ายมือ) -> คลิกปุ่ม Create application -> เลือกแท็บ Pages
  3. คลิกปุ่ม Connect to Git
  4. ล็อกอิน GitHub ของคุณและเลือก Repository my-quartz-garden ที่คุณเพิ่งสร้างขึ้น
  5. ตั้งค่าการติดตั้ง (Build settings) ดังนี้:
    • Production branch: v5 (หรือตามชื่อกิ่งหลักของคุณ)
    • Framework preset: เลือก None
    • Build command: ใส่ npx quartz plugin install && npx quartz build
    • Build output directory: ใส่ public
  6. คลิก Save and deploy

ระบบของ Cloudflare Pages จะทำการดาวน์โหลดซอร์สโค้ดจาก GitHub ของคุณและบิวด์ออกมาเป็นเว็บไซต์จริง โดยจะมอบ URL ฟรีให้กับคุณ เช่น https://my-quartz-garden.pages.dev ซึ่งคุณสามารถใช้ URL นี้เพื่อเปิดชมโน้ตผ่านมือถือหรืออุปกรณ์อื่น ๆ ได้ตลอด 24 ชม.

🔄 วิธีอัปเดตโน้ตในอนาคต

เมื่อใดก็ตามที่คุณจดโน้ตเพิ่ม หรือแก้ไขบทความใน Obsidian และต้องการอัปเดตขึ้นบนเว็บไซต์:

  1. เปิด Terminal ในเครื่องคอมพิวเตอร์ของคุณ
  2. รันคำสั่งเดียวสั้น ๆ: 
    cd /home/xiantie/Projects/quartz
npx quartz sync
  3. Quartz จะสลายลิงก์ชั่วคราว ดึงข้อมูลโน้ตล่าสุด ทำการ Commit และ Push ไปยัง GitHub ให้คุณทันที
  4. หลังจาก Push สำเร็จแล้ว Cloudflare Pages หรือ Vercel จะตรวจพบความเปลี่ยนแปลงและนำข้อมูลใหม่ไปประมวลผลเป็นเว็บภายในเวลา 1-2 นาทีโดยอัตโนมัติ

⚠️ การแก้ไขปัญหาเบื้องต้น (Troubleshooting)

1. ข้อผิดพลาด: Error: ENOENT: no such file or directory, lstat '.../content'

  • สาเหตุ: เกิดจากการซิงค์รอบที่แล้วล้มเหลวกลางคัน (เช่น ติดปัญหาเรื่องการยืนยันตัวตน GitHub) ทำให้สคริปต์ของ Quartz ลบโฟลเดอร์เชื่อมโยง content ออกไปชั่วคราวแต่ยังไม่ทันได้กู้คืนกลับมา
  • ✔️ วิธีแก้: รันคำสั่งนี้ใน Terminal เพื่อสร้างโฟลเดอร์เชื่อมโยงใหม่: 
    ln -sf /home/xiantie/ObsidianData/xiantie /home/xiantie/Projects/quartz/content

2. ข้อผิดพลาด: Failed: error occurred while fetching repository บน Cloudflare Pages

  • สาเหตุที่ 1: ยังไม่ได้รันคำสั่ง npx quartz sync ในเครื่อง ทำให้บน GitHub ไม่มีข้อมูลอะไรเลย
  • สาเหตุที่ 2: Cloudflare Pages ไม่มีสิทธิ์ดึงข้อมูลจาก Private Repository ของคุณ
    • ✔️ วิธีแก้: ไปที่ GitHub Applications Settings -> คลิก Configure ที่แอป Cloudflare Pages แล้วเลือกเพิ่มสิทธิ์ให้เข้าถึง repository my-quartz-garden ได้

3. ข้อผิดพลาด: Could not resolve "../../.quartz/plugins" ในขั้นตอนบิวด์ Quartz

  • สาเหตุ: โฟลเดอร์ปลั๊กอิน .quartz ไม่ได้ถูกนำส่งขึ้น GitHub ไปด้วย (เนื่องจากอยู่ในไฟล์ยกเว้น .gitignore ตามปกติของระบบเพื่อไม่ให้ไฟล์ขยะล้น) ทำให้เครื่องเซิร์ฟเวอร์ของ Cloudflare บิวด์เว็บไม่สำเร็จเพราะหาปลั๊กอินไม่เจอ
  • ✔️ วิธีแก้:
    1. เข้าหน้าแดชบอร์ด Cloudflare -> ไปที่โปรเจกต์ Pages ของคุณ
    2. ไปที่แท็บ Settings -> เลือก Build & deployments
    3. มองหาหัวข้อ Build configuration แล้วคลิก Configure settings
    4. แก้ไข Build command ให้ทำการติดตั้งปลั๊กอินก่อนการบิวด์:
      • เปลี่ยนเป็น: npx quartz plugin install && npx quartz build
    5. กด Save แล้วไปสั่ง Retry deployment ใหม่อีกครั้ง

Graph View

Backlinks