คู่มือ Cloudflare Pages Hosting ฉบับสมบูรณ์ 2026

Complete Cloudflare Pages Hosting Guide 2026 — Deploy Static Sites, SSR, Functions & Serverless Backend

Cloudflare Pages คืออะไร แตกต่างจาก Traditional Hosting

Cloudflare Pages เป็นแพลตฟอร์ม Hosting ที่เชี่ยวชาญในการจัดการ Static Site, Progressive Web App, และ Single Page Application โดยใช้เครือข่าย CDN ของ Cloudflare ซึ่งมีเซิร์ฟเวอร์กระจายไปทั่วโลก รวมทั้งประเทศไทยด้วย

ความแตกต่างหลักจาก Traditional Hosting (เช่น Shared Hosting, VPS) คือ Cloudflare Pages ไม่ใช้เซิร์ฟเวอร์เดี่ยว แต่ใช้ Edge Computing ซึ่งหมายความว่าเว็บไซต์ของคุณจะถูกแคช (cache) และส่งไปยังผู้เข้าชมจากเซิร์ฟเวอร์ที่ใกล้ที่สุดกับพวกเขา ทำให้ได้ความเร็วสูงสุด

ในการทำงานปกติ Traditional Hosting ต้องจัดการการบำรุงรักษา, อัปเดต, ความปลอดภัย, และ Backup เอง แต่ Cloudflare Pages จัดการทั้งหมดให้คุณแล้ว คุณเพียงต้อง Push Code ไปยัง GitHub และ Cloudflare Pages จะ Deploy อัตโนมัติ (CI/CD Pipeline)

ข้อดีอีกประการหนึ่งคือ Cloudflare Pages มีการแยกแยะ Environment ที่ชัดเจน เช่น Production, Preview, Development ซึ่งช่วยให้ทดสอบเว็บไซต์ก่อนปล่อยออกสู่ Production ได้อย่างปลอดภัย

Cloudflare Pages Free Plan ทำอะไรได้บ้าง

Free Plan ของ Cloudflare Pages นั้นอัดเต็มไปด้วยความสามารถที่ยอดเยี่ยม และเป็นตัวเลือกที่ดีมากสำหรับสตาร์টอัพ, บล็อก, เว็บศิลป์, และแม้แต่เว็บไซต์ขนาดเล็กถึงกลาง

Bandwidth ไม่จำกัด: ไม่มีการจำกัดการใช้งาน Bandwidth ต่อเดือน คุณสามารถส่งข้อมูลไปยังผู้เข้าชมได้เท่าที่ต้องการ ซึ่งแตกต่างจากหลาย Hosting Provider ที่กำหนดขีดจำกัด Bandwidth

Requests ไม่จำกัด: จำนวน HTTP Requests ก็ไม่มีข้อจำกัด ไม่ว่าจะเป็นการดึงข้อมูล, อัปโหลด, หรือสื่อสารกับ API ต่างๆ

Build 500 ครั้ง/เดือน: คุณสามารถ Build และ Deploy เว็บไซต์ได้ถึง 500 ครั้งต่อเดือน ซึ่งเพียงพอสำหรับสำนักพิมพ์ขนาดเล็ก และสำหรับนักพัฒนาที่ทำงานเต็มเวลา

Custom Domain ฟรี: คุณสามารถชี้โดเมนของคุณเองไปยัง Cloudflare Pages ได้ โดยไม่มีค่าใช้จ่ายเพิ่มเติม

HTTPS โดยอัตโนมัติ: Cloudflare Pages จัดการใบรับรอง SSL/TLS ให้คุณแล้ว ทั้งหมดเป็นอัตโนมัติ และอัปเดตตัวเองเสมอ

Functions: Free Plan รวมถึง Cloudflare Functions ด้วย ซึ่งเป็นการรองรับ Serverless Function ในฟรี Tier (100,000 requests/วัน)

Preview Deployments: ทุกครั้งที่คุณสร้าง Pull Request บน GitHub, Cloudflare Pages จะสร้าง Preview URL ให้คุณเพื่อทดสอบการเปลี่ยนแปลงก่อน Merge

Static Site Generator ที่รองรับ Cloudflare Pages

Cloudflare Pages รองรับกว่า 100+ Framework และ Generator ทั้งหมด ซึ่งครอบคลุมทุกภาษาและสถาปัตยกรรมสมัยใหม่

Next.js: Framework React ยอดนิยม Cloudflare Pages รองรับทั้ง Static Generation (SSG) และ Server-Side Rendering (SSR) ผ่าน Cloudflare Functions

Nuxt.js: Framework Vue.js ที่มีความเหมาะสมสูงสำหรับการสร้าง Universal Application คุณสามารถใช้ Nuxt 2 และ 3 ได้

SvelteKit: Framework Svelte สมัยใหม่ที่มีประสิทธิภาพสูง รองรับ SSR, SSG, และ ISR ด้วย

Hugo: Static Site Generator ที่เขียนด้วย Go มีความเร็วสูงมากและใช้สำหรับการสร้างบล็อก เว็บไซต์เนื้อหา

Jekyll: Generator ยอดนิยมสำหรับการสร้างบล็อก GitHub Pages เนทีฟ เขียนด้วย Ruby

Gatsby: Framework React ที่เน้นการสร้าง Static Site ด้วยการ Query GraphQL ประสิทธิภาพสูง

Astro: Framework ที่สะดวกสำหรับการสร้าง Content-Driven Website โดยการส่ง Zero JavaScript ไปยังเบราว์เซอร์

VitePress: Static Site Generator ที่สร้างจาก Vite, เหมาะสำหรับการสร้างเอกสารและเว็บไซต์เนื้อหา

MkDocs: Generator เอกสารที่เขียนด้วย Python, มีธีมที่สวยงาม และคุณสามารถ Deploy ไป Cloudflare Pages ได้

Hexo: Generator บล็อกที่เขียนด้วย Node.js ยอดนิยมในเอเชีย โดยเฉพาะในจีน

วิธีเริ่มต้น Deploy เว็บบน Cloudflare Pages จาก GitHub

กระบวนการ Deploy บน Cloudflare Pages นั้นง่ายมาก และใช้เวลาเพียงไม่กี่นาที

ขั้นตอนที่ 1 - สร้าง GitHub Repository: ขั้นแรก สร้าง Repository ใหม่บน GitHub แล้ว Push Code ของคุณเข้าไป (หรือ Clone Repository ที่มีอยู่)

ขั้นตอนที่ 2 - เข้า Cloudflare Dashboard: ไปที่ dash.cloudflare.com และเข้าสู่ระบบด้วยบัญชี Cloudflare ของคุณ

ขั้นตอนที่ 3 - คลิก Pages: ที่เมนู Sidebar ด้านซ้าย ค้นหา Pages และคลิก

ขั้นตอนที่ 4 - ลิงค์ GitHub Account: คลิก "Connect to Git" แล้วตัวเลือก GitHub, จากนั้นอนุญาตให้ Cloudflare เข้าถึง GitHub Repository ของคุณ

ขั้นตอนที่ 5 - เลือก Repository: เลือก Repository ที่คุณต้องการ Deploy และคลิก "Begin Setup"

ขั้นตอนที่ 6 - ตั้งค่า Build: ระบบจะถามคำถามเช่น Framework ของคุณ (Next.js, Hugo, เป็นต้น), Build Command, และ Output Directory ในกรณีส่วนใหญ่ Cloudflare Pages จะตรวจจับสิ่งนี้โดยอัตโนมัติ

ขั้นตอนที่ 7 - Deploy: คลิก "Save and Deploy" จากนั้น Cloudflare Pages จะเริ่มการ Build และ Deploy เว็บไซต์ของคุณ

ภายในไม่กี่นาทีจะเห็น URL เช่น project-name.pages.dev เว็บไซต์ของคุณได้ Deploy เรียบร้อยแล้ว!

การตั้งค่า Custom Domain และ SSL บน Cloudflare Pages

หลังจาก Deploy เสร็จแล้ว คุณอาจต้องการชี้โดเมนของคุณเองไปยัง Cloudflare Pages ขั้นตอนนี้เรียกว่า "Custom Domain Setup"

ขั้นตอนที่ 1 - เพิ่ม Custom Domain: ไปที่หน้า Settings ของ Project ใน Cloudflare Pages Dashboard, ไปที่ Custom Domains และคลิก "Add Custom Domain"

ขั้นตอนที่ 2 - ใส่โดเมนชื่อ: ใส่โดเมนของคุณ (เช่น example.com หรือ blog.example.com)

ขั้นตอนที่ 3 - ชี้ DNS: Cloudflare Pages จะให้คำแนะนำว่าต้องเปลี่ยน DNS Record เป็นอย่างไร ในกรณีส่วนใหญ่คุณต้องเปลี่ยน CNAME Record จากชื่อโดเมนไปยัง Cloudflare Pages

ขั้นตอนที่ 4 - ตั้งค่า Cloudflare Nameservers (หากคุณใช้ Cloudflare DNS): หากคุณใช้ Cloudflare เพื่อจัดการ DNS ด้วย, ขั้นตอนนี้ง่ายขึ้น, เพียงเลือก Proxy Status เป็น "Proxied" (สีส้ม)

SSL/TLS Certificate: Cloudflare Pages จะจัดการใบรับรอง SSL/TLS โดยอัตโนมัติสำหรับโดเมนของคุณ และมันจะ Renew โดยอัตโนมัติเสมอ ทุกการเข้าชมจะถูกเข้ารหัส HTTPS

การตั้งค่า HTTPS Redirect ก็ทำได้โดยง่ายผ่าน Cloudflare Dashboard เพียงแค่เปิดตัวเลือก "Always Use HTTPS" ในส่วน SSL/TLS

Cloudflare Pages Functions - Serverless Backend ในแพลตฟอร์ม

Cloudflare Pages Functions เป็นการรองรับ Serverless Functions สำหรับการเขียน Backend Code โดยใช้เดียวกับ Cloudflare Workers แต่อยู่ในบริบท Pages

ด้วย Functions คุณสามารถสร้าง API, ดึงข้อมูลจาก Database, ส่งอีเมล, และทำการประมวลผลอื่นๆ ทั้งหมดบน Serverless Runtime ของ Cloudflare

วิธีสร้าง Function: สร้างโฟลเดอร์ชื่อ functions ที่ Root ของ Repository แล้วสร้างไฟล์ JavaScript เช่น functions/api/hello.js หลังจาก Deploy แล้ว Function จะ Accessible ที่ URL เช่น example.com/api/hello

ตัวอย่าง: Function ง่ายที่ Return JSON ดังนี้:

export async function onRequest(context) {
  return new Response(JSON.stringify({ message: 'Hello World' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Free Plan รองรับ 100,000 Function Invocations ต่อวัน ซึ่งเพียงพอสำหรับเว็บไซต์ขนาดเล็ก

Environment Variables และ Preview Deployments

Cloudflare Pages รองรับ Environment Variables ซึ่งช่วยให้คุณจัดเก็บ Secrets, Configuration, และข้อมูลที่ต้องการไม่ให้ Public ได้อย่างปลอดภัย

ตั้งค่า Environment Variables: ไปที่ Settings ของ Pages Project, ไปที่ Environment variables, แล้วเพิ่มตัวแปรที่ต้องการ คุณสามารถตั้งค่าแยกสำหรับ Production และ Preview

การใช้ใน Code: ใน Next.js หรือ Node.js ดึงมาโดยใช้ process.env.VARIABLE_NAME, ใน Client-Side ต้องเพิ่ม Prefix NEXT_PUBLIC_ เพื่อให้ Client สามารถเข้าถึงได้

Preview Deployments: ทุกครั้งที่คุณเปิด Pull Request บน GitHub, Cloudflare Pages จะสร้าง Preview Deployment โดยอัตโนมัติ ให้คุณ URL เฉพาะสำหรับทดสอบการเปลี่ยนแปลง ก่อนที่มันจะรวมเข้า Main Branch

Cloudflare Pages vs Vercel vs Netlify - เปรียบเทียบ

Cloudflare Pages: ข้อดีคือ Bandwidth ไม่จำกัด, CDN ที่ทั่วโลก, Free Plan ที่ดี, Functions ไม่จำกัด (100k/day), และตั้งค่าดีด้วย DNS ถ้าใช้ Cloudflare ด้วย ข้อเสียคือ Community นั้นเล็กกว่า Vercel Netlify

Vercel: ข้อดีคือ Next.js Optimization ที่ยอดเยี่ยม (Vercel เป็น Creator ของ Next.js), Performance บ่วน, Analytics ในตัว, และ Preview ที่รวดเร็ว ข้อเสียคือ Free Plan มี Bandwidth จำกัด (100GB/month)

Netlify: ข้อดีคือ Deploy ง่ายเหมือน Cloudflare Pages, Form Handling ในตัว, Identity Authentication, และหลากหลาย Plugins ข้อเสียคือ Build Minutes จำกัด (300/month), Bandwidth จำกัด, และบางคุณสมบัติเป็น Premium

สรุป: สำหรับสถาบันการศึกษา, ผู้เริ่มต้น, และเว็บไซต์ที่ไม่ต้องการ SSR ลึกๆ ให้เลือก Cloudflare Pages หากต้อง Next.js Optimization ให้เลือก Vercel หากต้องฟังก์ชันการจัดการฟอร์ม ให้เลือก Netlify

ข้อจำกัดของ Cloudflare Pages และเมื่อไหรควรเลือก Traditional Hosting

ข้อจำกัด: Cloudflare Pages เหมาะสำหรับ Static Sites และ JAMstack Applications แต่ไม่เหมาะสำหรับแอปพลิเคชันที่ต้อง Server-Side Heavy Processing, Long-Running Processes, การใช้ Memory มากๆ, หรือการกำหนด Permission ระดับไฟล์

Build Timeout มี 15 นาที ดังนั้นหากโปรเจกต์ของคุณต้องใช้เวลานาน ให้ Optimize Build Process ของคุณ

เมื่อไหรควรเลือก Traditional Hosting (VPS, Shared Hosting): ถ้าคุณต้องการ WordPress, Node.js Applications ที่ต้องการ Database เสมอ, Stream Video, Machine Learning Models, หรือการทำงาน Background Jobs ที่ยาวนาน

ดังนั้น หากคุณเป็นผู้เริ่มต้น เขียนบล็อก, Portfolio Website, หรือ Static Content Site ให้เลือก Cloudflare Pages ประหยัดเงิน, รวดเร็ว, และสะดวก