วิธีทำบล็อกด้วย Obsidian + Hugo + GitHub + Cloudflare

• เขียนบทความบนเครื่องแบบโลคัลด้วย Obsidian แล้วเผยแพร่บล็อกส่วนตัวได้อย่างรวดเร็วและฟรีด้วยชุด Hugo + ธีม Bear Blog + Cloudflare Pages
• การจัดการเวอร์ชันผ่าน GitHub และการดีพลอยอัตโนมัติช่วยให้ดูแลง่าย เขียนบทความ บันทึก และคอมมิต ก็เผยแพร่ได้ทันที
• การตั้งค่าเริ่มต้นต้องมีความรู้ด้านการพัฒนาเล็กน้อย แต่หลังจากนั้นเวิร์กโฟลว์จะเรียบง่ายมาก
• เหมาะสำหรับคนที่กำลังมองหาวิธีทำบล็อกแบบเบา ๆ และยั่งยืน

รายละเอียดการจัดองค์ประกอบ

• ใช้ Obsidian ในการเขียนบทความทั้งหมด
  • จัดเก็บเป็นไฟล์โลคัล ทำให้ข้อมูลทั้งหมดเป็นของผู้ใช้เอง
  • ธีม Minimal มอบอินเทอร์เฟซที่สะอาดตาและไม่รบกวนสมาธิ
  • ซิงก์ข้ามอุปกรณ์ได้ไม่จำกัดผ่าน iCloud (ใช้ Dropbox, Google Drive ได้เช่นกัน)
• การเผยแพร่
  • Hugo: เครื่องมือสร้างเว็บไซต์แบบสแตติกที่เร็วมาก
  • ธีม Bear Blog: ธีมบล็อกแบบมินิมอลและรวดเร็ว
  • GitHub + Cloudflare Pages: เผยแพร่เว็บไซต์ได้ฟรี
  • ข้อดี: ไม่มีค่าสมาชิกรายเดือน, ไม่มี vendor lock-in, ไม่มีความเสี่ยงจากการเปลี่ยนนโยบายแพลตฟอร์ม

การตั้งค่าระบบ

• ติดตั้ง Hugo แล้วสร้างไซต์ใหม่

  hugo new site myblog  
  cd myblog  
  

• เพิ่มธีม Bear Blog

  git init  
  git submodule add https://github.com/janraasch/hugo-bearblog.git themes/hugo-bearblog  
  

• ตั้งค่าไฟล์ config.toml ให้ใช้ธีม Bear Blog

  theme = 'hugo-bearblog'  
  

• เชื่อม Obsidian เข้ากับ Hugo
  • เขียนบทความไว้ในโฟลเดอร์ content/blog ของ Hugo
  • ใช้ฟังก์ชัน "Open folder as vault" ใน Obsidian เพื่อเชื่อมโฟลเดอร์นั้น
  • แบบนี้บทความที่เขียนใน Obsidian จะเชื่อมเป็นโพสต์บนไซต์ Hugo โดยตรง
• เพิ่มเทมเพลต Front Matter สำหรับ Hugo ไว้ด้านบนของบทความที่เขียนใน Obsidian

  +++  
  title= "Your Post Title"  
  date= YYYY-MM-DD  
  tags= ["post"]  
  draft= true  
  +++  
  

• เมื่อพร้อมเผยแพร่ ให้เปลี่ยนค่า draft เป็น false
• ใช้ความสามารถเซิร์ฟเวอร์โลคัลของ Hugo เพื่อพรีวิวบทความในเบราว์เซอร์

  hugo server -D  
  

• สร้าง GitHub repository ใหม่และเชื่อมโปรเจกต์บนเครื่อง

  git remote add origin https://github.com/yourusername/yourblog.git  
  git add .  
  git commit -m "Initial commit"  
  git push -u origin main  
  

• สมัคร Cloudflare แล้วสร้างโปรเจกต์ Pages
  • เชื่อม GitHub repository และใช้การตั้งค่าการ build ดังนี้
    • คำสั่ง build: hugo --minify
    • ไดเรกทอรีผลลัพธ์: public

เวิร์กโฟลว์การเผยแพร่

• เขียนโพสต์ใน Obsidian
• เปลี่ยน draft: true ในเทมเพลต Front Matter เป็น draft: false
• คอมมิตและพุชไปยัง GitHub
  git add . git commit -m "Publish new post" git push
• Cloudflare Pages จะตรวจจับการเปลี่ยนแปลงโดยอัตโนมัติและ build ไซต์ใหม่ จากนั้นนำขึ้นใช้งานภายใน 1~2 นาที

[codject]

ผมก็ใช้งานบล็อก Hugo อยู่เหมือนกันครับ
หลังจากเขียนบทความใน Obsidian แล้ว ผมใช้วิธีให้การ push ไปยัง GitHub repository เป็นตัว trigger เพื่อโฮสต์บน Cloudflare Pages
แล้วก็ใส่บริการค้นหาของ Algolia เพิ่มเข้าไปด้วย และทุกครั้งที่เขียนบทความใหม่ ผมจะสร้างไฟล์ sh ขึ้นมาหนึ่งไฟล์เพื่อใช้สำหรับทำ indexing แล้วก็ยัดคำสั่งที่เชื่อมโยงกันทั้งหมดอย่าง git และการทำ indexing เข้าไป จากนั้นก็สั่งรัน sh เพื่อเผยแพร่บทความครับ

ผมใช้ Obsidian เป็นหลักเพราะสนุกกับการเอาบทความที่เขียนไว้มาดูแบบรวมกันใน Graph View เป็นครั้งคราวครับ

[sungchi]

ผมก็ทำคล้าย ๆ กันมาตลอดเหมือนกัน แต่ตอนนี้เขียนจากรีโพซิทอรีบน github.com โดยตรงแล้วครับ (ใช้ฟังก์ชันที่ github pages สร้าง jekyll ให้อัตโนมัติ)

https://plan9.kr/

[jk34011]

โห คุณคือคนที่ทำ Text Battle ใช่ไหมครับ?
เมื่อก่อนเคยเห็นในคอมมูนิตี้แล้วเล่นอย่างสนุกเลย 555 ยินดีที่ได้เจอนะครับ

[zxshinxz]

ผมก็ทำบล็อกด้วย Hugo เหมือนกัน ดีใจที่ได้เห็นครับ!
เคยคิดเหมือนกันว่าจะใช้ Obsidian เป็นตัวแก้ไขหลัก แต่ถ้าเป็นสภาพแวดล้อมที่มีคอมพิวเตอร์อยู่ด้วย ผมว่า VSCode น่าจะดีกว่า
เพราะมันสะท้อนการเปลี่ยนแปลงได้ในระดับมิลลิวินาที เลยไม่ค่อยรู้สึกถึงความจำเป็นของ Obsidian เท่าไรครับ

[halfenif]

ผมไม่เข้าใจเหตุผลว่าทำไมต้องเชื่อม Hugo กับ Obsidian

ถ้าเป็นผู้ใช้ Hugo ก็รู้สึกว่า VSCode ดูเป็นธรรมชาติมากกว่านะครับ

[bobross0]

อันนี้น่าสนใจมากจริง ๆ

[gdaw3440]

ปลั๊กอิน digital garden ก็ใช้งานสะดวกเช่นกัน

[haejuk99]

ขอบคุณสำหรับการแชร์เนื้อหาครับ ตอนนี้ผมเพิ่งเริ่มใช้ obsidian อยู่เหมือนกัน คงต้องลองใช้ร่วมกันดูแล้ว

[ethanhur]

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

[tequila]

ไม่กี่วันก่อนผมเพิ่งทำบล็อกด้วย Hugo ขึ้นมาอันหนึ่งพอดี เลยรู้สึกดีใจมากที่ได้เจอเนื้อหานี้
ส่วนผมตั้งค่าให้ deploy ไปที่ GitHub Pages ตอน push แล้วใช้งานแบบนั้นอยู่ครับ ฮ่าๆ
ผมก็ชอบ Obsidian มากเหมือนกัน แต่ขอแนะนำให้ลองใช้ส่วนขยายชื่อ "Front Matter" ใน vscode ด้วยครับ
มันมีฟังก์ชัน CMS แบบง่ายๆ ให้ใช้ ถึงจะไม่ได้สมบูรณ์แบบมาก แต่ก็ถือว่าใช้ได้ไม่เลวเลยครับ

[GN⁺]

ความคิดเห็นจาก Hacker News

• สแตกนี้ให้การควบคุมได้อย่างเต็มที่: ไม่มีค่าสมัครสมาชิก, ไม่มีการผูกติดกับผู้ให้บริการ, ไม่มีความเสี่ยงที่แพลตฟอร์มจะหายไปหรือนโยบายเปลี่ยน
  • ผู้เขียนแสดงให้เห็นผ่านสิ่งนี้ว่า ความหมายของ "การควบคุมอย่างเต็มที่" ได้เปลี่ยนไปมาก
• การดูแลบล็อกแบบสแตติกเป็นหนึ่งในกรณีที่โฮสต์เองได้ง่ายที่สุด
• รู้สึกแปลกนิดหน่อยที่จะพูดถึง "การควบคุมอย่างเต็มที่" และ "ไม่มีความเสี่ยงที่แพลตฟอร์มจะหายไป" ขณะเดียวกันก็พึ่งพา free tier ของบริษัทภายนอกสองแห่ง
• คาดหวังโพสต์บล็อกถัดไปในอีก 1 ปีชื่อ "ฉันสร้างบล็อกของตัวเองใหม่อย่างไร"
• การค้นหาใน Google ว่า "ฉันสร้างบล็อกด้วย [next.js/Gatsby ฯลฯ] อย่างไร" เป็นงานอดิเรกที่สนุกดี
• บล็อกนักพัฒนาหลายร้อยแห่งไม่มีโพสต์อะไรเลยนอกจากบทความประกาศวิธีสร้างบล็อก
• การเลือก Obsidian ในบริบทนี้ดูแปลกนิดหน่อยแต่น่าสนใจ
  • แทนที่จะเปิดโฟลเดอร์ย่อยของโปรเจกต์ Hugo ใน Obsidian ก็สามารถเปิดทั้งโปรเจกต์ใน VSCode หรือ IDE ที่คล้ายกันได้
  • ประสบการณ์การแก้ไข Markdown ของ Obsidian แตกต่างจาก IDE ทั่วไป
  • ถ้าชอบชุดฟีเจอร์ของ Obsidian การเลือกนี้ก็เข้าใจได้
  • จุดแข็งอย่างหนึ่งของ Markdown คือมีตัวแก้ไขหลากหลายที่รองรับมัน
• มีการตั้งค่าคล้ายกัน แต่ได้เขียนปลั๊กอิน Obsidian แบบคัสตอมเพื่อบีบอัด asset/แปลง frontmatter/และ push bundle ไปยังที่เก็บบล็อกบน Github
• Github ใช้ Pelican เพื่อแปลงเป็น HTML และ deploy ไปยัง VPS
  • สามารถมีอินเทอร์เฟซแบบ WYSIWYG ได้ง่าย
  • VSCode ก็เพียงพอสำหรับการทำบล็อกด้วย Markdown
  • Hugo จะคอมไพล์หน้าเมื่อบันทึก จึงวนรอบการทำงานได้รวดเร็ว
• ความเสี่ยงที่แพลตฟอร์มจะหายไปหรือนโยบายเปลี่ยนก็ยังคงมีอยู่
• Jekyll ช้ากับคอนเทนต์ขนาดใหญ่ แต่ Hugo เร็ว
• ย้ายระหว่าง Github Pages, CloudFlare Pages, Netlify และ Vercel ได้ง่าย
• Kirby CMS เหมาะที่สุด
• SSG อาจเกิด software rot ได้หากปล่อยทิ้งไว้หลายปี
• สามารถใช้ Obsidian Publish เพื่อตัด Huge, Github และ Cloudflare ออกได้