วิธีโฮสต์เว็บไซต์แบบ Static ฟรีในปี 2026: GitHub Pages, Cloudflare Pages และฟอร์มติดต่อ

การเลือก platform สำหรับ การโฮสต์เว็บไซต์แบบ static ที่เหมาะสมช่วยประหยัดเงินได้หลายพันบาทต่อปี พร้อมทั้งทำให้เว็บไซต์ของคุณเร็ว ปลอดภัย และดูแลรักษาง่ายครับ ปัจจุบัน free tier ของหลาย platform พัฒนามาไกลมาก ทั้ง GitHub Pages และ Cloudflare Pages ต่างมี infrastructure ระดับ production ให้ใช้ฟรีโดยไม่มีค่าใช้จ่าย แต่มีความท้าทายหนึ่งที่บทแนะนำส่วนใหญ่มักข้ามไป นั่นคือจะจัดการ contact form บนเว็บไซต์ static ได้อย่างไร เมื่อไม่มี server คอยประมวลผล? คู่มือนี้จะพาคุณผ่านกระบวนการตั้งค่าทั้งหมด ตั้งแต่การเลือก platform ไปจนถึงการเชื่อมต่อ contact form ให้ใช้งานได้จริง พร้อมตัวอย่างที่จับต้องได้และข้อจำกัดที่ควรรู้ก่อนตัดสินใจครับ

ทำไมการโฮสต์ static แบบฟรีถึงน่าสนใจ

เว็บไซต์ static คือการส่งไฟล์ HTML, CSS และ JavaScript ที่ build ไว้ล่วงหน้าไปยังเบราว์เซอร์โดยตรง ไม่มี PHP ไม่มี Node.js runtime และไม่มีการ query ฐานข้อมูลในทุกครั้งที่โหลดหน้าเว็บ ความเรียบง่ายนี้เองที่ทำให้การโฮสต์เว็บ static แบบฟรีเชื่อถือได้มาก เพราะไม่มีอะไรให้ crash ให้ patch หรือให้ scale ครับ

สำหรับธุรกิจขนาดเล็ก portfolio, landing page ของ SaaS และเว็บไซต์เอกสาร การโฮสต์ static ตอบโจทย์ได้ครบ:

• ความเร็ว: ไฟล์ถูกส่งจาก CDN edge node มักใช้เวลาต่ำกว่า 100ms ทั่วโลก
• ความปลอดภัย: ไม่มี server-side runtime ทำให้ attack surface เล็กลงอย่างมาก
• ค่าใช้จ่าย: ทั้ง GitHub Pages และ Cloudflare Pages ให้ใช้ฟรีสำหรับโปรเจกต์สาธารณะและโปรเจกต์ส่วนตัวจำนวนมาก
• ความสะดวก: แค่ push โค้ดไปยัง repository เว็บไซต์ก็ deploy อัตโนมัติ

ข้อจำกัดที่แท้จริงคือฟังก์ชันการทำงานแบบ dynamic ทุกอย่างที่ต้องใช้ logic ฝั่ง server เช่น การยืนยันตัวตน ตะกร้าสินค้า หรือการประมวลผล form จำเป็นต้องพึ่งบริการภายนอก ควรคำนึงถึงจุดนี้ไว้ตลอดเมื่ออ่านขั้นตอนการตั้งค่าต่อไปนี้ครับ

เปรียบเทียบ Platform: GitHub Pages vs Cloudflare Pages

สรุปง่าย ๆ: ถ้ากลุ่มผู้ใช้ของคุณอยู่ทั่วโลกและต้องการความเร็วสูงสุด Cloudflare Pages ชนะขาด แต่ถ้าทีมของคุณใช้ GitHub อยู่แล้วและต้องการการตั้งค่าที่ง่ายที่สุด GitHub Pages ก็เพียงพอมากครับ

ขั้นตอนการ Deploy บน GitHub Pages

ตัวอย่างนี้สมมติว่าคุณมีเว็บไซต์ HTML/CSS พร้อม publish แล้ว ถ้าคุณใช้ static site generator อย่าง Hugo หรือ Jekyll กระบวนการก็แทบจะเหมือนกันทุกประการครับ

1. สร้าง GitHub repository ไปที่ github.com/new แล้วสร้าง public repository ตั้งชื่อว่า your-username.github.io ถ้าต้องการให้แสดงที่ root domain หรือจะตั้งชื่ออื่นก็ได้ถ้าต้องการให้อยู่ใน subdirectory
2. Push ไฟล์เว็บไซต์ขึ้นไป จาก folder โปรเจกต์ในเครื่อง รันคำสั่ง:

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. เปิดใช้งาน GitHub Pages ใน repository ไปที่ Settings > Pages ใต้ "Source" เลือก branch main และ folder /root (หรือ /docs ถ้า build output ของคุณอยู่ที่นั่น) แล้วคลิก Save
4. รอการ deploy GitHub จะ build และ deploy ภายใน 1-3 นาที คุณจะเห็น URL ที่ใช้งานได้จริง (เช่น https://your-username.github.io) ปรากฏในแผง Pages settings
5. เชื่อมต่อ custom domain (ไม่บังคับ) เพิ่มไฟล์ CNAME ใน root ของ repository โดยใส่ชื่อโดเมนของคุณ (เช่น www.yoursite.com) จากนั้นอัปเดต DNS provider ให้ชี้ CNAME record ไปที่ your-username.github.io GitHub จะออก SSL certificate ให้อัตโนมัติภายในไม่กี่นาทีครับ

ขั้นตอนการ Deploy บน Cloudflare Pages

1. สมัครหรือเข้าสู่ระบบ Cloudflare ไปที่ pages.cloudflare.com แล้วเชื่อมต่อบัญชี GitHub หรือ GitLab ของคุณ
2. สร้างโปรเจกต์ใหม่ คลิก "Create a project" จากนั้นคลิก "Connect to Git" แล้วเลือก repository จากรายการ
3. ตั้งค่า build settings ถ้าเว็บไซต์ของคุณเป็น HTML ธรรมดา ให้เว้น build command ว่างไว้ แล้วตั้ง output directory เป็น / หรือที่ที่ไฟล์ index.html ของคุณอยู่ สำหรับ Hugo ให้ตั้ง build command เป็น hugo และ output เป็น public สำหรับ Jekyll ใช้ jekyll build และ output เป็น _site
4. Deploy คลิก "Save and Deploy" Cloudflare จะ clone repository ของคุณ รัน build แล้ว publish ขึ้น global edge network เว็บไซต์ของคุณจะได้รับ subdomain *.pages.dev ทันที
5. เพิ่ม custom domain ใน dashboard ของโปรเจกต์ ไปที่ "Custom domains" แล้วใส่โดเมนของคุณ ถ้าโดเมนของคุณจัดการด้วย Cloudflare DNS อยู่แล้ว การตั้งค่าแค่คลิกเดียวก็เสร็จ ถ้าไม่ใช่ คุณต้องเพิ่ม CNAME record ที่ registrar ของคุณให้ชี้ไปที่ที่อยู่ *.pages.dev ครับ

ทุกครั้งที่ git push ไปยัง branch หลัก จะมีการ redeploy อัตโนมัติ Cloudflare ยังสร้าง preview deployment สำหรับ pull request ด้วย ซึ่งมีประโยชน์มากสำหรับการตรวจสอบการเปลี่ยนแปลงก่อน go live ครับ

การเพิ่ม Contact Form ในเว็บไซต์ Static

นี่คือจุดที่คู่มือส่วนใหญ่หยุดพูดถึง และเป็นจุดที่คนส่วนใหญ่ติดขัด contact form บนเว็บไซต์ static ไม่สามารถส่งข้อมูลมาประมวลผลที่ตัวเองได้ เพราะไม่มี server คอยรับอยู่ คุณมีทางเลือกที่ทำได้จริงสามแบบ:

• บริการ form backend (แนะนำ): คุณชี้ attribute action ของ form ไปยัง endpoint ของบุคคลที่สาม ซึ่งจะรับข้อมูลที่ส่งมา ตรวจสอบ แล้วส่งอีเมลมาหาคุณ
• Serverless function: คุณเขียนฟังก์ชันขนาดเล็ก (Cloudflare Workers, AWS Lambda) เพื่อประมวลผล form วิธีนี้ใช้ได้แต่ต้องเขียนโค้ดและดูแลรักษาต่อเนื่อง
• JavaScript fetch(): คุณใช้ fetch API ของเบราว์เซอร์เพื่อ post ข้อมูล form ไปยัง backend endpoint ดูรายละเอียดทางเทคนิคได้ที่คู่มือของเราเรื่อง การส่งข้อมูล HTML form ด้วย JavaScript fetch()

วิธีที่เร็วที่สุดในการมี form ที่ใช้งานได้คือบริการ form สำเร็จรูป นี่คือตัวอย่างที่ใช้งานได้จริงด้วย Sendform:

ตัวอย่างจริง: Contact Form ที่ใช้งานได้ใน 5 นาที

ก่อนเพิ่มโค้ดใด ๆ ในเว็บไซต์ คุณต้องสมัครบัญชี Sendform และสร้าง form endpoint ก่อน กระบวนการนี้ใช้เวลาประมาณสองนาทีครับ:

1. สมัครที่ Sendform.net สร้างบัญชีฟรี ไม่ต้องใช้บัตรเครดิต หลังสมัครเสร็จจะมีโปรเจกต์เริ่มต้นพร้อมใช้งานทันที
2. สร้าง form ใน dashboard คลิก "New Form" ตั้งชื่อ เลือกโปรเจกต์ และใส่อีเมลที่ต้องการรับข้อมูลที่ส่งเข้ามา Sendform จะยืนยันที่อยู่อีเมลนี้ก่อนเปิดใช้งาน endpoint
3. คัดลอก endpoint URL เมื่อสร้าง form เสร็จแล้ว คุณจะเห็น endpoint URL ในรูปแบบ https://sendform.net/!your-form-id คัดลอกไว้ เพราะนี่คือสิ่งที่คุณจะนำไปวางใน HTML ของคุณ

เมื่อได้ endpoint แล้ว ให้เพิ่ม HTML ต่อไปนี้ในเว็บไซต์ static ของคุณ:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

แทนที่ your-form-id ด้วย ID ที่แสดงใน Sendform dashboard ของคุณ ทุกการส่งข้อมูลจะถูกส่งอีเมลไปยังที่อยู่ที่คุณยืนยันไว้ตอนตั้งค่า ไม่ต้องมีโค้ด backend ไม่ต้องมี server ไม่มีค่าใช้จ่าย infrastructure รายเดือนครับ สำหรับ UX pattern ขั้นสูง รวมถึงหน้า redirect หลังส่งข้อมูลและอีเมลยืนยัน อ่านได้ที่คู่มือของเราเรื่อง แนวทางปฏิบัติที่ดีที่สุดสำหรับ form บนเว็บไซต์ static

ถ้าคุณใช้ website builder ควบคู่กับเว็บไซต์ static ของคุณ เราอธิบายกระบวนการ integration ไว้อย่างละเอียดในบทความ วิธีเชื่อมต่อ Sendform กับ website builder ของคุณ ครับ

ข้อผิดพลาดที่ควรหลีกเลี่ยง

จากประสบการณ์ช่วยผู้ใช้หลายพันคนตั้งค่าการโฮสต์เว็บ static แบบฟรี นี่คือข้อผิดพลาดที่ก่อให้เกิดความหงุดหงิดมากที่สุดครับ:

1. ลืมสร้างหน้า 404

ทั้ง GitHub Pages และ Cloudflare Pages จะแสดงหน้า error ทั่วไปถ้าไม่พบ route ที่ร้องขอ สร้างไฟล์ 404.html แบบกำหนดเองใน root directory ของคุณ เพื่อให้ผู้ใช้ยังคงอยู่บนเว็บไซต์ของคุณและรักษาประสบการณ์การใช้งานที่ดีครับ

2. Commit ข้อมูลลับลงใน public repository

API key, form endpoint secret และที่อยู่อีเมลไม่ควรอยู่ใน public GitHub repository เด็ดขาด ให้ใช้ environment variable ใน Cloudflare Pages หรืออ้างอิงไฟล์ configuration แบบ private ที่ระบุไว้ใน .gitignore ครับ

3. สร้าง form โดยไม่มีแผนสำหรับ backend

นี่คือข้อผิดพลาดที่พบบ่อยที่สุด นักพัฒนาสร้าง contact form ที่สวยงาม push ขึ้น GitHub Pages แล้วพบในวัน launch ว่า form ล้มเหลวอย่างเงียบ ๆ ตัดสินใจเรื่อง form backend ก่อนที่จะเขียน tag <input> แม้แต่อันเดียวครับ เครื่องมืออย่าง Sendform ช่วยให้คุณ ตั้งค่า contact form ที่ส่งตรงถึงอีเมลโดยไม่ต้องเขียนโค้ดเลย ซึ่งกำจัดปัญหา backend ได้อย่างสิ้นเชิง

4. ไม่สนใจปัญหา build cache

ถ้าเว็บไซต์ของคุณไม่อัปเดตหลัง push CDN cache อาจยังเสิร์ฟไฟล์เก่าอยู่ Cloudflare Pages จะล้าง cache อัตโนมัติเมื่อ deploy GitHub Pages ใช้เวลาในการกระจายการเปลี่ยนแปลงนานกว่า รอได้ถึง 10 นาที หรือเพิ่ม query string ต่อท้าย URL ของ asset ระหว่างทดสอบครับ

5. ใช้ relative path ผิด

ถ้าเว็บไซต์ GitHub Pages ของคุณอยู่ที่ username.github.io/project-name/ (subdirectory) path ของ asset ทั้งหมดต้องคำนึงถึง prefix นั้นด้วย ลิงก์ไปยัง /styles.css จะพัง ให้ใช้ relative path (./styles.css) หรือตั้งค่า baseURL ของ static site generator ให้ตรงกับ subdirectory ครับ

6. ข้ามการทำ form workflow automation

เมื่อ form ของคุณรับข้อมูลได้แล้ว คุณทำได้มากกว่าแค่รับอีเมลครับ Sendform รองรับ webhook และ integration ที่ช่วยให้คุณส่งต่อข้อมูลไปยัง Slack, CRM หรือ spreadsheet โดยอัตโนมัติ คู่มือของเราเรื่อง การ automate form workflow ด้วย webhook และ API จะแสดงวิธีตั้งค่าทั้งหมดนี้โดยไม่ต้องเขียนโค้ด backend ครับ

สรุป

การโฮสต์เว็บไซต์ static แบบฟรีไม่เคยมีประสิทธิภาพสูงเท่านี้มาก่อน GitHub Pages เหมาะสำหรับทีมที่ฝังตัวอยู่ใน GitHub ecosystem อยู่แล้ว ในขณะที่ Cloudflare Pages ให้ประสิทธิภาพระดับสากลที่ดีกว่าและ free tier ที่ใจกว้างกว่า ความท้าทายที่แท้จริงไม่ได้อยู่ที่ตัวการโฮสต์เอง แต่อยู่ที่ฟีเจอร์ dynamic โดยเฉพาะ contact form ที่ทำให้คนสะดุดกัน การจับคู่ platform ใดก็ตามกับบริการ form สำเร็จรูป ทำให้คุณได้เว็บไซต์ที่ใช้งานได้จริงระดับมืออาชีพโดยไม่มีค่าใช้จ่าย infrastructure เลย เริ่มต้นด้วยคู่มือ platform ข้างต้น ทำให้เว็บไซต์ของคุณ live แล้วเชื่อมต่อ contact form ด้วย Sendform เพื่อรับข้อมูลได้อย่างเชื่อถือได้ตั้งแต่วันแรกครับ

เพิ่ม Contact Form ในเว็บไซต์ Static ของคุณในไม่กี่นาที

ใช้ Sendform เพื่อรับข้อมูล form จากเว็บไซต์ static ที่โฮสต์บน GitHub Pages หรือ Cloudflare Pages ไม่ต้องเขียนโค้ด backend ไม่ต้องตั้งค่า server ไม่ยุ่งยาก แค่ชี้ attribute action ของ form ไปที่ endpoint ของคุณก็เสร็จแล้วครับ

เริ่มใช้งานฟรีที่ Sendform.net →

คำถามที่พบบ่อย