Website
Static Site Generator คืออะไร?
Static Site Generator (SSG) เป็นเครื่องมือช่วยให้สร้างเว็บไซต์ได้ง่ายและรวดเร็ว โดยไม่ต้องเขียน HTML Code ทั้งหมดเอง ตัวอย่างเครื่องมือ SSG ยอดนิยมได้แก่ Hugo, Jekyll, Gatsby, Next.js Static Export เป็นต้น วิธีการทำงานของ SSG คือ คุณสร้างเนื้อหาในรูปแบบ Markdown (ไฟล์ .md ที่เขียนง่าย) หรือ YAML จากนั้น SSG จะทำการ "Build" หรือแปลงไฟล์เหล่านี้เป็น HTML, CSS, JavaScript ไฟล์สำเร็จรูปที่พร้อมสำหรับเซิร์ฟเวอร์
ความเด่นของ Static Site Generator
SSG นิยมใช้ด้วยเหตุผลหลายประการ:
- ความเร็ว — เว็บไซต์ Static เป็นเพียงไฟล์ HTML, CSS, JavaScript ธรรมดา เบราว์เซอร์โหลดได้เร็วมาก ไม่ต้องรอประมวลผลจากเซิร์ฟเวอร์
- ความปลอดภัย — เนื่องจากไม่มีการประมวลผลแบบ Dynamic (เช่น PHP, Node.js) บนเซิร์ฟเวอร์ ความเสี่ยงต่อการโจมตี SQL Injection หรือ Remote Code Execution จึงลดลง
- ความเสถียร — ไฟล์ Static ไม่ขึ้นกับฐานข้อมูล ดังนั้นจึงไม่มีปัญหา Database Connection Error
- ราคาถูก — Hosting ที่สนับสนุน Static Site เพียงแค่เซิร์ฟไฟล์ ไม่ต้องประมวลผล ดังนั้น Hosting ปกติก็พอใช้ ไม่ต้อง VPS แพงๆ
- ง่ายในการเขียน — หลายคนเขียนในรูปแบบ Markdown ซึ่งง่ายกว่าการเขียน HTML โดยตรง
ขั้นตอนการ Build และอัพโหลด SSG ไปยัง Hosting
ปัญหาหลักที่มือใหม่มักเจอ คือ "ฉันสร้างเว็บไซต์ด้วย Hugo/Jekyll ให้แล้ว แล้วอัพโหลดขึ้น Hosting ยังไง?" คำตอบง่าย: ให้ Build ไฟล์เหล่านั้นเป็น HTML บนคอมพิวเตอร์ของคุณก่อน จากนั้นอัพโหลดเพียงไฟล์ HTML เท่านั้นไปยัง Hosting
ขั้นที่ 1: Build Static Files บนคอมพิวเตอร์ของคุณ
ส่วนใหญ่ SSG ที่คุณใช้ (เช่น Hugo หรือ Jekyll) จะมี Command สำหรับ Build ให้ดูเอกสารของ SSG นั้น ตัวอย่าง:
- Hugo: Run `hugo` command จะสร้างโฟลเดอร์ชื่อ `public` ที่มีไฟล์ HTML ทั้งหมด
- Jekyll: Run `jekyll build` จะสร้างโฟลเดอร์ชื่อ `_site` ที่มีไฟล์ HTML
- Gatsby: Run `npm run build` จะสร้างโฟลเดอร์ชื่อ `public` ที่มีไฟล์ HTML
หลังจากรัน Build Command เสร็จ คุณจะได้โฟลเดอร์ที่มี HTML, CSS, JavaScript ไฟล์สำเร็จรูปทั้งหมด
ขั้นที่ 2: ตรวจสอบไฟล์ที่ Build ได้
หลังจาก Build เสร็จ ให้เปิดโฟลเดอร์ผลลัพธ์ (เช่น `public` หรือ `_site`) ตรวจสอบว่ามีไฟล์เหล่านี้:
index.html— หน้าแรกของเว็บไซต์- โฟลเดอร์ `css`, `js`, `images` เป็นต้น — ไฟล์ CSS, JavaScript, รูปภาพ
- ไฟล์ HTML อื่น ๆ ที่สอดคล้องกับหน้าของเว็บไซต์ (เช่น `about.html`, `blog/post1.html` เป็นต้น)
ถ้าโฟลเดอร์นี้มีโครงสร้างที่ถูกต้อง ก็พร้อมสำหรับอัพโหลด
ขั้นที่ 3: อัพโหลดไฟล์ไปยัง Hosting ด้วย FTP
เปิด FileZilla หรือ FTP Client ที่คุณใช้อยู่ เชื่อมต่อไปยัง Hosting แล้วทำตามนี้:
- ด้านซ้าย (Local Files) ให้นำทางไปยังโฟลเดอร์ที่ Build ได้ (เช่น `public` หรือ `_site`)
- ด้านขวา (Remote Files) ให้นำทางไปยัง `public_html`
- คลิกขวาที่ไฟล์และโฟลเดอร์ทั้งหมดใน Build Folder แล้วเลือก Upload (หรือลาก-วาง)
- รอให้อัพโหลดเสร็จทั้งหมด
ขั้นที่ 4: ทดสอบเว็บไซต์
เมื่ออัพโหลดเสร็จ ให้เปิดเบราว์เซอร์และเข้าไปยัง https://yourdomain.com ถ้าเห็นเว็บไซต์ของคุณปรากฏขึ้น แสดงว่าอัพโหลดสำเร็จ
วิธีการอัพเดท Static Site เมื่อมีการเปลี่ยนแปลง
เมื่อต้องการเพิ่มบทความ เปลี่ยนแปลงเนื้อหา หรือปรับปรุงเว็บไซต์ ให้ทำตามขั้นตอนนี้:
- แก้ไขไฟล์ Markdown หรือเนื้อหาต้นฉบับของคุณในโลคัล
- รัน Build Command อีกครั้ง (เช่น `hugo` หรือ `jekyll build`) เพื่อให้ SSG สร้าง HTML ใหม่
- อัพโหลดโฟลเดอร์ Build ใหม่ไปยัง Hosting ด้วย FTP
ทุกครั้งที่อัพเดท ต้องทำ Build ใหม่แล้วจึงอัพโหลด ไม่สามารถแก้ไข HTML บนเซิร์ฟเวอร์โดยตรงได้ เพราะไฟล์ Build ถูกสร้างจากต้นฉบับเสมอ
บรรเลาและ Subdirectory Hosting
บางครั้ง Static Site อาจต้องวางในโฟลเดอร์ย่อย (Subdirectory) เช่น `yourdomain.com/blog` หรือ `yourdomain.com/docs` ในกรณีนี้ ให้ตรวจสอบ Configuration ของ SSG ว่า URL ที่ Generate มานั้นถูกต้องหรือไม่
ตัวอย่าง: ถ้าตั้ง Base URL เป็น `/blog` SSG ควร Generate link ให้เป็น `/blog/index.html`, `/blog/css/style.css` เป็นต้น ไม่ใช่ `/index.html`, `/css/style.css` (ซึ่งจะชี้ไปผิด)
ตรวจสอบว่า Static Site ทำงานถูกต้อง
หลังจากอัพโหลด Build Folder เสร็จแล้ว ให้ตรวจสอบด้วยวิธีต่อไปนี้:
# 1. เปิดเบราว์เซอร์และเข้าหน้าแรก
https://yourdomain.com
# 2. คลิก Link ต่าง ๆ ตรวจสอบว่าสามารถไปหน้าอื่น ๆ ได้
# เช่น เมนู, บทความ, หน้า About เป็นต้น
# 3. เปิด DevTools (F12) ดู Console เพื่อดู Error
# ถ้า CSS, JavaScript ไม่โหลด จะมี Error สีแดง
# 4. ตรวจสอบใน cPanel File Manager
# ไปที่ public_html ดูว่าไฟล์ HTML ทั้งหมดอยู่ที่นั่นหรือไม่
# 5. ลองเข้าหน้าแต่ละหน้า เพื่อให้แน่ใจว่า Routing ถูกต้อง
https://yourdomain.com/about
https://yourdomain.com/blog/
แก้ปัญหาที่พบบ่อย
Error: "404 Not Found" เมื่อเข้าหน้าบางหน้า
เกิดเมื่อ Link ไปยังหน้าอื่นชี้ผิด หรือไฟล์ HTML ไม่ได้อัพโหลดไป
- ตรวจสอบว่า Build Folder มีไฟล์ HTML สำหรับหน้านั้นหรือไม่
- ตรวจสอบ URL ในแต่ละ Link ว่าถูกต้องหรือไม่ (เช่น ต้องเป็น `/blog/post.html` ไม่ใช่ `/Blog/post.html` - ระวัง Capital Letter)
- ถ้าใช้ SSG ให้ตรวจสอบ Configuration ว่า URL ถูกต้อง
Error: "CSS และ JavaScript ไม่โหลด" หรือเว็บดูเหมือนไม่มีสี
ไฟล์ HTML โหลดได้ แต่ CSS, JavaScript ไม่โหลด
- ตรวจสอบ Browser DevTools (F12) → Network tab จะเห็นไฟล์ CSS, JS ที่หายไป
- ตรวจสอบ Build Folder ว่ามีโฟลเดอร์ `css`, `js` หรือไม่ ถ้าไม่มี ให้ Build ใหม่
- ตรวจสอบ Base URL หรือ Asset Path ใน SSG Configuration ว่าชี้ไปโฟลเดอร์ที่ถูกต้องหรือไม่
- ตรวจสอบว่าไฟล์ CSS, JS ได้อัพโหลดไปยัง Hosting หรือไม่ (เปิด FTP และตรวจสอบในโฟลเดอร์ public_html)
Error: "ไฟล์ Build Folder ไม่สมบูรณ์" หรือ "Build สำเร็จแต่ไม่มีไฟล์"
อาจเป็นเพราะ Build ไม่ส่งสำเร็จ หรือขาดการ Configure
- ลองรัน Build Command อีกครั้ง เช่น `rm -rf public && hugo` (ลบเก่า แล้ว Build ใหม่)
- ตรวจสอบว่ามี Error Message ขึ้นมาระหว่าง Build หรือไม่ ถ้ามี อ่านข้อความ Error แล้วแก้
- ตรวจสอบ Configuration ของ SSG ว่าชี้ไปที่ Content Directory ที่ถูกต้องหรือไม่
Error: "Image ไม่แสดง" หรือรูปหาย
ไฟล์ HTML โหลดได้ แต่รูปภาพไม่แสดง
- ตรวจสอบว่า Build Folder มีโฟลเดอร์ `images` หรือตำแหน่งที่เก็บรูป หรือไม่
- ตรวจสอบใน HTML ว่า `img src` URL ชี้ไปที่โฟลเดอร์ถูกต้องหรือไม่
- ตรวจสอบว่าโฟลเดอร์รูปภาพได้อัพโหลดไปยัง Hosting หรือไม่
Error: "Hosting ไม่เซิร์ฟไฟล์ .html" หรือต้องกด Download แทนที่จะแสดง
เกิดบนเซิร์ฟเวอร์ที่ไม่ได้ Configure ให้เซิร์ฟไฟล์ HTML ที่ถูกต้อง
วิธีแก้: ติดต่อ Hosting Provider ว่า Hosting รองรับ Static HTML Hosting หรือไม่ Hosting ส่วนใหญ่ปกติรองรับ แต่ Hosting บางตัวอาจมีการตั้งค่าผิด
คำถามที่พบบ่อย
Q: SSG เหมาะสำหรับบล็อกหรือเว็บไซต์ข่าว ที่มีการ Update บ่อยๆ หรือไม่?
A: เหมาะสำหรับจำนวน Post ที่ไม่เกิน 1000-2000 บทความ เมื่อเกิน ครั้ง Build อาจช้าขึ้น นอกจากนี้ SSG เหมาะมาก ถ้าเพิ่มบทความไม่บ่อยมาก (สัปดาห์ละ 1-2 บทความ) แต่ถ้าต้อง Update ทุกวันหลายครั้ง การ Build ทุกครั้งอาจซ้ำซ้อน ในกรณีนี้ CMS แบบ Dynamic อย่าง WordPress อาจเหมาะกว่า
Q: ต้องติดตั้ง SSG บนเซิร์ฟเวอร์ Hosting ด้วยหรือไม่?
A: ไม่เลย SSG Build บนคอมพิวเตอร์ของคุณเท่านั้น เซิร์ฟเวอร์ Hosting ไม่ต้องติดตั้ง SSG เพียงแค่เก็บไฟล์ HTML ที่ Build แล้วเท่านั้น นั่นคือข้อดีของ Static Site ไม่ต้อง Runtime ใดๆ บนเซิร์ฟเวอร์
Q: ถ้าอัพโหลดไป Hosting แล้วต้องการแก้ไขไฟล์ HTML บนเซิร์ฟเวอร์โดยตรงได้ไหม?
A: ได้นะ แต่ไม่แนะนำ เพราะไฟล์ HTML ทั้งหมดถูกสร้างจากไฟล์ต้นฉบับในเครื่องของคุณ ถ้าแก้ไข HTML บนเซิร์ฟเวอร์ครั้งต่อไปที่ Build และอัพโหลดใหม่ การแก้ไขของคุณจะหายไป ดังนั้นต้องแก้ไขในไฟล์ต้นฉบับ (Markdown หรือ Config) จากนั้น Build ใหม่ แล้วอัพโหลดแทน