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

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

ทำไม Static Hosting ฟรีถึงน่าสนใจ

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

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

• ความเร็ว: ไฟล์ถูกส่งจาก CDN edge node ซึ่งมักใช้เวลาต่ำกว่า 100ms ทั่วโลก
• ความปลอดภัย: ไม่มี runtime ฝั่ง server หมายความว่า 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 path
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
5. เชื่อมต่อ custom domain (ถ้าต้องการ). เพิ่มไฟล์ CNAME ใน root ของ repository โดยระบุชื่อ domain (เช่น 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. ถ้าเว็บไซต์เป็น 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. ในแดชบอร์ดโปรเจกต์ ไปที่ "Custom domains" แล้วกรอก domain ของคุณ ถ้า domain ของคุณจัดการผ่าน Cloudflare DNS อยู่แล้ว การตั้งค่าใช้คลิกเดียว ถ้าไม่ใช่ คุณต้องเพิ่ม CNAME record ที่ registrar ให้ชี้ไปที่ที่อยู่ *.pages.dev ของคุณ

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

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

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

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

เส้นทางที่เร็วที่สุดสู่ form ที่ใช้งานได้คือบริการ form เฉพาะทาง นี่คือตัวอย่างที่ชัดเจนโดยใช้ Sendform:

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

สมมติว่าคุณมีเว็บไซต์ portfolio ที่ deploy บน GitHub Pages คุณต้องการให้ผู้เยี่ยมชมสามารถส่งข้อความถึงคุณได้ และต้องการให้ข้อความเหล่านั้นส่งมาที่กล่องจดหมายของคุณ นี่คือ HTML ทั้งหมดที่ต้องใช้:

<form action="https://sendform.io/f/YOUR_FORM_ID" method="POST">
  <label for="name">ชื่อของคุณ</label>
  <input type="text" id="name" name="name" required>

  <label for="email">อีเมลของคุณ</label>
  <input type="email" id="email" name="email" required>

  <label for="message">ข้อความ</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">ส่งข้อความ</button>
</form>

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

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

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

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

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

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

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

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

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

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

4. ละเลยปัญหา build cache

ถ้าเว็บไซต์ไม่อัปเดตหลังจาก push CDN cache อาจกำลังให้บริการไฟล์เก่าอยู่ Cloudflare Pages ล้าง cache อัตโนมัติเมื่อ deploy GitHub Pages ใช้เวลานานกว่าในการ propagate การเปลี่ยนแปลง ให้รอสูงสุด 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. ข้ามการทำ workflow อัตโนมัติสำหรับ form

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

สรุป

การโฮสต์เว็บไซต์ static ฟรีไม่เคยมีความสามารถสูงเท่านี้มาก่อน GitHub Pages เหมาะสำหรับทีมที่ฝังตัวอยู่ใน ecosystem ของ GitHub ส่วน 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 →

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