MDX + Static Site + Cloudflare Pipeline: จาก .mdx ไฟล์ถึง CDN ทั่วโลก

หลายคนสงสัยว่า "เขียน Markdown แล้วมันกลายเป็นหน้าเว็บได้ยังไง?"

บทความนี้อธิบายทุก step แบบเข้าใจง่าย จาก vibagen.com ที่ใช้จริง

MDX ในโปรเจกต์นี้คืออะไร?

MDX โดยทั่วไปหมายถึง Markdown + JSX แต่ใน VIBAGEN เราใช้ `.mdx` แค่เป็น กล่องใส่เนื้อหา เท่านั้น

ไฟล์ `.mdx` แต่ละไฟล์ประกอบด้วย 2 ส่วน:

ส่วนหัว (Frontmatter) — ข้อมูลบทความ เช่น ชื่อ, หมวด, วันที่, คำอธิบาย
ส่วนเนื้อหา — Markdown ธรรมดา เขียนหัวข้อ ตัวหนา รายการ ตาราง code block ได้หมด

ไม่มี React component ฝังในเนื้อหา ไม่ใช้ MDX compiler — ระบบอ่านไฟล์เป็นข้อความธรรมดาแล้วแปลงเป็น HTML เอง

เปรียบเทียบให้เห็นภาพ: .mdx → HTML → หน้าเว็บ

เขียนใน .mdx	ระบบแปลงเป็น HTML	ผลลัพธ์บนหน้าเว็บ
## หัวข้อหลัก	<h2>หัวข้อหลัก</h2>	ตัวอักษรใหญ่ หนา สีน้ำเงินเข้ม
### หัวข้อรอง	<h3>หัวข้อรอง</h3>	ตัวอักษรกลาง สีส้ม
ข้อความ ตัวหนา	ข้อความ <strong>ตัวหนา</strong>	ข้อความ ตัวหนา
- รายการที่ 1	<li>รายการที่ 1</li>	• รายการที่ 1
> ข้อความ quote	<blockquote>...</blockquote>	เส้นซ้ายสีส้ม + ตัวเอียง
---	<hr />	เส้นคั่นบาง

ผลลัพธ์เหมือนกันทุกประการ แต่ .mdx เขียนง่ายกว่ามาก ไม่ต้องจำ tag เปิด-ปิด ไม่ต้องห่วงเรื่อง class หรือ style — ระบบจัดการให้หมด

Pipeline ทั้งหมด — สรุป 4 ขั้นตอน

ขั้นที่ 1 — เขียนบทความ

สร้างไฟล์ `.mdx` ในโฟลเดอร์ `content/articles/` เขียนข้อมูลส่วนหัว (ชื่อบทความ, หมวด, วันที่, คำอธิบาย) แล้วตามด้วยเนื้อหา Markdown ปกติ

ใครที่เคยเขียน note ใน Notion หรือ Google Docs ก็เขียนได้ แค่ใช้รูปแบบ Markdown เช่น `##` สำหรับหัวข้อ, `**` สำหรับตัวหนา, `-` สำหรับรายการ

ขั้นที่ 2 — Push ขึ้น Git

เมื่อเขียนเสร็จ push ไฟล์ขึ้น GitHub ตามปกติ:

bash

git add .
git commit -m "add: new article"
git push

แค่นี้ — ไม่ต้องเข้า dashboard ไหนเพิ่ม

ขั้นที่ 3 — ระบบ Build อัตโนมัติ

หลัง push ระบบจะทำงานเบื้องหลังโดยอัตโนมัติ:

อ่านไฟล์ — แยกข้อมูลส่วนหัวกับเนื้อหาออกจากกัน
สร้าง routes — บทความแต่ละตัวได้ URL ของตัวเอง เช่น `/knowledge/ชื่อบทความ`
แปลง Markdown เป็น HTML — หัวข้อ, ตัวหนา, ตาราง, code block กลายเป็น HTML ที่พร้อมแสดงผล
สร้าง HTML สำเร็จรูป — ทุกหน้าถูก build ล่วงหน้า ไม่ต้องรอ server ประมวลผลตอนมีคนเปิดอ่าน

ขั้นที่ 4 — Live บน CDN ทั่วโลก

HTML ที่ build เสร็จถูกกระจายไปยัง Cloudflare CDN ทั่วโลก ผู้ใช้ในไทยเปิดเว็บจาก server ในกรุงเทพ ผู้ใช้ในญี่ปุ่นเปิดจาก Tokyo — ไม่ต้องรอข้ามมหาสมุทร

เว็บโหลดเร็วเพราะเป็น HTML พร้อมเสิร์ฟ ไม่มี server ต้อง "คิด" อะไรเพิ่ม

สรุปภาพรวม

terminal

เขียน .mdx → push Git → ระบบ build HTML อัตโนมัติ → live บน CDN ทั่วโลก

ทั้งหมดนี้ทำงานบน Cloudflare free plan — ไม่มีค่า server รายเดือนในช่วงเริ่มต้น

Static vs Dynamic: ต่างกันอย่างไร?

	Dynamic (สร้างทุกครั้ง)	Static (สร้างล่วงหน้า)
ทุกครั้งที่เปิด	server ทำงานใหม่	ส่ง HTML ที่ build ไว้ทันที
ความเร็ว	ขึ้นกับ server	เร็วคงที่ ~10-50ms
รองรับคนเข้าพร้อมกัน	จำกัดด้วย server	ไม่จำกัด (CDN กระจายทั่วโลก)
ค่าใช้จ่าย	นับตาม request	free plan ในช่วงเริ่มต้น
เหมาะกับ	dashboard, ข้อมูล real-time	บทความ, portfolio, เว็บแนะนำบริการ

สำหรับเนื้อหาที่ไม่เปลี่ยนทุกครั้งที่เปิด — Static เร็วกว่าและประหยัดกว่า

สิ่งที่ต่างจากวิธีทั่วไป

เว็บส่วนใหญ่ที่ใช้ MDX จะพึ่ง library หลายตัว เช่น MDX compiler, remark, rehype, contentlayer

VIBAGEN เลือกวิธีที่เรียบง่ายกว่า:

อ่านไฟล์ด้วย gray-matter — แยก frontmatter กับเนื้อหาออกมา ไม่ต้องใช้ MDX compiler
แปลง Markdown เป็น HTML เอง — เขียน converter ที่จัดการหัวข้อ ตัวหนา ตาราง code block ด้วย regex
ไม่ต้องติดตั้ง plugin เพิ่ม — config ของ Next.js เรียบง่าย ไม่มี MDX plugin

ข้อดีคือ dependency น้อย debug ง่าย และทำงานได้บน Cloudflare Edge Runtime ที่มีข้อจำกัดมากกว่า Node.js ปกติ

Vibecoding ช่วยตรงไหน?

เราตัดสินใจเอง:

กำหนดโครงสร้างบทความ (frontmatter schema, URL)
เลือก approach (gray-matter แทน MDX compiler)
เขียนเนื้อหาแต่ละบทความ

AI ช่วยเขียน:

ตัว converter ที่แปลง Markdown เป็น HTML (regex patterns ทั้งหมด)
ส่วน build config สำหรับ Cloudflare Pages
โครงสร้าง code ที่เชื่อมต่อทุกส่วนเข้าด้วยกัน

ผลลัพธ์คือ knowledge hub ที่ทำงานได้ด้วย code น้อย dependency น้อย และ deploy ได้ฟรีบน Cloudflare

อยากเข้าใจ Cloudflare infrastructure เพิ่มเติม? อ่าน [Cloudflare Free Infrastructure สำหรับ SME](/knowledge/cloudflare-free-infrastructure-for-sme)