สวัสดีครับ! นี่คือ pcpKB คลังความรู้ส่วนตัวที่รวบรวมบันทึก เทคนิค และวิธีแก้ปัญหาด้านการเขียนโปรแกรมและ DevOps ไว้ในที่เดียว สร้างด้วย Astro ในรูปแบบ Static Site ที่เขียนเนื้อหาเป็นไฟล์ Markdown ล้วน ๆ
ทำไมถึงเลือก Astro?
- Zero JS by default — หน้าเว็บไม่ส่ง JavaScript ไปฝั่งผู้ใช้เลย เว้นแต่เราจงใจใส่เอง ทำให้โหลดเร็วและเบามาก
- Content Collections — จัดการเนื้อหาด้วยระบบ Type Safety มี schema คอยตรวจ Frontmatter ให้ ถ้ากรอกข้อมูลผิดประเภทจะ build ไม่ผ่านทันที กันพลาดตั้งแต่ต้นทาง
- Developer Experience — ใช้ความรู้ HTML/CSS พื้นฐานสร้างหน้าตาเว็บได้เร็ว และผสม React/Vue/Svelte ได้เมื่อจำเป็น
TIP
Static Site เหมาะกับบล็อก เอกสาร และ KB เป็นพิเศษ เพราะ deploy ง่าย โฮสต์ที่ไหนก็ได้ (แม้แต่ CDN ฟรี) ปลอดภัยสูง และแทบไม่ต้องดูแลเซิร์ฟเวอร์
โครงสร้างโปรเจกต์
src/
├─ content/
│ ├─ kb/ ← บทความทั้งหมดอยู่ตรงนี้ (.md)
│ └─ content.config.ts ← schema ของ Frontmatter
├─ layouts/ ← โครงหน้าหลัก (Layout.astro)
├─ components/ ← Header / Footer
├─ pages/ ← หน้าเว็บ + dynamic route ของบทความ
└─ styles/global.css ← ธีมและสไตล์ทั้งหมด
public/images/covers/ ← รูปปก (cover) ของบทความวิธีเขียนบทความใหม่
แค่สร้างไฟล์ .md (หรือ .mdx) ใหม่ในโฟลเดอร์ src/content/kb/ แล้วใส่ Frontmatter ตามนี้:
---
title: "หัวข้อบทความ"
description: "คำอธิบายสั้น ๆ (ใช้ทำ SEO และแสดงบนการ์ดหน้าหลัก)"
pubDate: 2026-06-25
tags: ["tag1", "tag2"]
category: "หมวดหมู่"
cover: "/images/covers/ชื่อรูป.svg" # ไม่ใส่ก็ได้
---จากนั้นเขียนเนื้อหาด้วย Markdown ปกติได้เลย ระบบจะสร้างหน้าและลิงก์ให้อัตโนมัติ
| ฟิลด์ | จำเป็น | คำอธิบาย |
|---|---|---|
title | ✅ | ชื่อบทความ |
description | ✅ | คำโปรย ใช้กับ SEO และการ์ด |
pubDate | ✅ | วันที่เผยแพร่ (YYYY-MM-DD) |
tags | — | อาเรย์ของแท็ก |
category | — | หมวดหมู่ (ดีฟอลต์ General) |
cover | — | path รูปปก ใส่หรือไม่ใส่ก็ได้ |
IMPORTANT
ชื่อไฟล์ .md จะกลายเป็น URL ของบทความ เช่น my-note.md → /kb/my-note/ ดังนั้นควรตั้งชื่อเป็นภาษาอังกฤษแบบ kebab-case (มีขีด ไม่มีเว้นวรรค)
ฟีเจอร์ที่เขียนใน Markdown ได้
นอกจาก Markdown มาตรฐาน (หัวข้อ, ลิสต์, ลิงก์, รูป, ตาราง, code block) ระบบนี้ยังรองรับ Callout แบบ GitHub ด้วย เขียนแบบนี้:
> [!NOTE]
> ข้อความที่อยากเน้นเป็นกล่องสีฟ้าแล้วจะได้กล่องสวย ๆ แยกสีตามชนิด: NOTE (ฟ้า), TIP (เขียว), IMPORTANT (ม่วง), WARNING (เหลือง), CAUTION (แดง) อย่างที่เห็นในบทความนี้
💡 สรุป
- เขียนเป็น Markdown วางในโฟลเดอร์เดียว ระบบ generate หน้าให้เอง
- Frontmatter มี schema คอยตรวจ กรอกผิดจะ build ไม่ผ่าน กันพลาดได้ดี
- ใส่
coverได้ เพื่อให้บทความมีรูปปกสวย ๆ บนการ์ดและหน้าบทความ - มี Callout ช่วยเน้นข้อความสำคัญให้อ่านง่าย
ลองสร้างไฟล์ใหม่ในโฟลเดอร์ src/content/kb/ แล้วเริ่มจดบันทึกความรู้ของคุณได้เลยครับ!