Cloudflare Pages: สร้างและเผยแพร่เว็บไซต์ฟรีด้วยแพลตฟอร์มระดับโลก

โฮสต์เว็บไซต์ Static และ JAMstack ฟรีพร้อมฟีเจอร์ระดับองค์กร

1. ทำความเข้าใจ Cloudflare Pages

Cloudflare Pages คืออะไร?

• นิยาม: แพลตฟอร์มสำหรับสร้างและเผยแพร่เว็บไซต์แบบ Static และ JAMstack
• ความสามารถหลัก:
  • โฮสติ้งฟรีไม่จำกัด
  • CI/CD pipeline อัตโนมัติ
  • การกระจายคอนเทนต์ทั่วโลกผ่าน CDN ของ Cloudflare
  • รองรับเฟรมเวิร์คยอดนิยมเกือบทั้งหมด
• ข้อดี: ไม่มีค่าใช้จ่าย ไม่จำกัด bandwidth และจำนวนการ deploy

ทำไมต้องใช้ Cloudflare Pages?

• ความเร็ว: เว็บไซต์โหลดเร็วขึ้นด้วย CDN ทั่วโลก
• ความง่าย: เชื่อมต่อกับ Git repository และ deploy อัตโนมัติ
• ประหยัด: ฟรีสำหรับทั้งโปรเจกต์ส่วนตัวและธุรกิจ
• ปลอดภัย: HTTPS อัตโนมัติและการป้องกันการโจมตี
• ขยายได้: รองรับการเติบโตของเว็บไซต์โดยไม่มีข้อจำกัด

2. เปรียบเทียบ Cloudflare Pages กับแพลตฟอร์มอื่น

Pages vs Netlify

Pages vs Vercel

Pages vs GitHub Pages

3. การเริ่มต้นใช้งาน Cloudflare Pages

ขั้นตอนการสร้างโปรเจกต์แรก

1. สร้างบัญชี Cloudflare

   • ไปที่ cloudflare.com และสมัครบัญชีฟรี
   • ยืนยันอีเมลของคุณ

2. เตรียม Git Repository

   • สร้างหรือใช้ repository ที่มีอยู่แล้วใน GitHub, GitLab หรือ Bitbucket
   • ตรวจสอบว่ามีไฟล์ index.html หรือโค้ดของเว็บไซต์

3. สร้างโปรเจกต์ใน Cloudflare Pages

   • ไปที่ Cloudflare Dashboard > Pages
   • คลิก “Create a project”
   • เลือก “Connect Git”
   • เลือก repository ที่ต้องการ

4. ตั้งค่าการ Build

   • เลือก Framework preset (เช่น React, Vue, Next.js, Hugo) หรือตั้งค่าเอง
   • กำหนด Build command (เช่น npm run build หรือ hugo)
   • กำหนด Build output directory (เช่น build, dist, public)

5. Deploy โปรเจกต์

   • คลิก “Save and Deploy”
   • รอการ build และ deploy เสร็จสิ้น
   • เข้าถึงเว็บไซต์ที่ URL ที่ Cloudflare สร้างให้ (*.pages.dev)

การตั้งค่าโดเมนที่กำหนดเอง

1. เพิ่มโดเมนใน Pages

   • ไปที่โปรเจกต์ > Custom domains
   • คลิก “Set up a custom domain”
   • ใส่โดเมนที่ต้องการ

2. ตั้งค่า DNS

   • ถ้าโดเมนอยู่ใน Cloudflare แล้ว: เลือก “Activate domain”
   • ถ้าโดเมนไม่ได้อยู่ใน Cloudflare: ทำตามคำแนะนำในการเพิ่ม CNAME record

3. ยืนยันการตั้งค่า

   • รอการตรวจสอบ DNS และการออก SSL certificate
   • เมื่อเสร็จสิ้น โดเมนของคุณจะชี้ไปที่เว็บไซต์ใน Cloudflare Pages

4. การใช้งานกับเฟรมเวิร์คยอดนิยม

React

{
  "scripts": {
    "build": "react-scripts build"
  }
}

การตั้งค่า Pages:

• Build command: npm run build
• Build output directory: build

Next.js

{
  "scripts": {
    "build": "next build && next export"
  }
}

การตั้งค่า Pages:

• Build command: npm run build
• Build output directory: out

Vue.js

{
  "scripts": {
    "build": "vue-cli-service build"
  }
}

การตั้งค่า Pages:

• Build command: npm run build
• Build output directory: dist

Hugo

การตั้งค่า Pages:

• Build command: hugo --minify
• Build output directory: public

Gatsby

{
  "scripts": {
    "build": "gatsby build"
  }
}

การตั้งค่า Pages:

• Build command: npm run build
• Build output directory: public

5. ฟีเจอร์ขั้นสูงของ Cloudflare Pages

Preview Deployments

• การทำงาน: สร้าง URL ชั่วคราวสำหรับทุก branch และ pull request
• ประโยชน์:
  • ทดสอบการเปลี่ยนแปลงก่อน merge เข้า main branch
  • แชร์ URL ให้ทีมตรวจสอบได้
  • ลดความเสี่ยงในการ deploy โค้ดที่มีปัญหา
• การใช้งาน: เปิดใช้งานอัตโนมัติเมื่อมีการสร้าง branch ใหม่

Environment Variables

• การตั้งค่า: ไปที่โปรเจกต์ > Settings > Environment variables
• ประเภท:
  • Production: ใช้กับ main branch
  • Preview: ใช้กับ branch อื่นๆ
• ตัวอย่างการใช้งาน:

  API_URL=https://api.example.com
  GOOGLE_ANALYTICS_ID=UA-XXXXXXXXX
  

Functions (ผ่าน Cloudflare Workers)

• การทำงาน: เพิ่มความสามารถ server-side ให้กับเว็บไซต์ static

• การตั้งค่า:

  1. สร้างโฟลเดอร์ functions ในโปรเจกต์
  2. สร้างไฟล์ JavaScript หรือ TypeScript ในโฟลเดอร์นั้น

• ตัวอย่าง Function:

  // functions/api/hello.js
  export function onRequest(context) {
    return new Response(JSON.stringify({
      message: "Hello from Cloudflare Pages Function!"
    }), {
      headers: {
        "Content-Type": "application/json"
      }
    });
  }
  

Web Analytics

• การเปิดใช้งาน: ไปที่โปรเจกต์ > Settings > Web Analytics
• ข้อมูลที่แสดง:
  • จำนวนผู้เข้าชม
  • ประเทศที่เข้าชม
  • เบราว์เซอร์และอุปกรณ์
  • Core Web Vitals
• ข้อดี: ไม่ต้องติดตั้ง JavaScript tracking code

6. การเพิ่มประสิทธิภาพเว็บไซต์ใน Pages

การตั้งค่า Cache

• Cache-Control Headers:

  <!-- ใน <head> ของ HTML -->
  <meta http-equiv="Cache-Control" content="public, max-age=3600">
  

• การตั้งค่าใน _headers:

  # /static/*
  Cache-Control: public, max-age=31536000, immutable
  
  # /*.html
  Cache-Control: public, max-age=3600
  

การใช้ Asset Optimization

• Auto Minify:

  • HTML, CSS, และ JavaScript จะถูก minify โดยอัตโนมัติ
  • ไม่ต้องตั้งค่าเพิ่มเติม

• Image Optimization:

  • ใช้ Cloudflare Image Resizing ผ่าน Workers
  • ตัวอย่าง URL: https://yoursite.com/cdn-cgi/image/width=800,quality=80/image.jpg

การใช้ HTTP/3 และ QUIC

• การทำงาน: เปิดใช้งานโดยอัตโนมัติ
• ประโยชน์:
  • ลด latency
  • เพิ่มความเร็วในการโหลดเว็บไซต์
  • รองรับการเชื่อมต่อที่ไม่เสถียร

การใช้ Cloudflare Zaraz

• การทำงาน: จัดการ third-party scripts (Google Analytics, Facebook Pixel, ฯลฯ)
• ประโยชน์:
  • ลดเวลาในการโหลดเว็บไซต์
  • เพิ่มความเป็นส่วนตัวของผู้ใช้
  • จัดการ consent ได้ง่ายขึ้น
• การตั้งค่า: ไปที่ Cloudflare Dashboard > Zaraz

7. การใช้ Pages กับ Headless CMS

การเชื่อมต่อกับ Contentful

1. ติดตั้ง SDK:

   npm install contentful
   

2. ดึงข้อมูลจาก Contentful:

   // src/api/contentful.js
   import { createClient } from 'contentful';
   
   const client = createClient({
     space: process.env.CONTENTFUL_SPACE_ID,
     accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
   });
   
   export async function getEntries(contentType) {
     const entries = await client.getEntries({
       content_type: contentType
     });
     return entries.items;
   }
   

3. ตั้งค่า Environment Variables ใน Pages:

   CONTENTFUL_SPACE_ID=your_space_id
   CONTENTFUL_ACCESS_TOKEN=your_access_token
   

การเชื่อมต่อกับ Sanity

1. ติดตั้ง SDK:

   npm install @sanity/client
   

2. ดึงข้อมูลจาก Sanity:

   // src/api/sanity.js
   import sanityClient from '@sanity/client';
   
   const client = sanityClient({
     projectId: process.env.SANITY_PROJECT_ID,
     dataset: process.env.SANITY_DATASET,
     apiVersion: '2021-10-21',
     useCdn: true
   });
   
   export async function getPosts() {
     return client.fetch(`*[_type == "post"]{
       title,
       slug,
       mainImage {
         asset->{
           _id,
           url
         }
       },
       body
     }`);
   }
   

การเชื่อมต่อกับ WordPress

1. ใช้ WordPress REST API:

   // src/api/wordpress.js
   export async function getPosts() {
     const response = await fetch('https://your-wp-site.com/wp-json/wp/v2/posts');
     return response.json();
   }
   

2. การ Build แบบ Incremental:

   • ใช้ GitHub Actions เพื่อ trigger การ build เมื่อมีการอัพเดทคอนเทนต์
   • ตั้งค่า webhook ใน WordPress เพื่อเรียก GitHub API

8. การใช้ Pages กับ E-commerce

การสร้าง E-commerce ด้วย Snipcart

1. เพิ่ม Snipcart ใน HTML:

   <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.css" />
   <script async src="https://cdn.snipcart.com/themes/v3.2.1/default/snipcart.js"></script>
   <div hidden id="snipcart" data-api-key="YOUR_API_KEY"></div>
   

2. เพิ่มปุ่ม Add to Cart:

   <button class="snipcart-add-item"
     data-item-id="starry-night"
     data-item-price="79.99"
     data-item-url="/paintings/starry-night"
     data-item-description="High-quality replica of The Starry Night by Vincent van Gogh."
     data-item-image="/assets/images/starry-night.jpg"
     data-item-name="The Starry Night">
     Add to cart
   </button>
   

การเชื่อมต่อกับ Shopify Storefront API

1. ติดตั้ง SDK:

   npm install @shopify/shopify-api
   

2. ดึงข้อมูลสินค้า:

   // functions/api/products.js
   import { Shopify } from '@shopify/shopify-api';
   
   export async function onRequest(context) {
     const shopify = new Shopify({
       shopName: 'your-store.myshopify.com',
       apiKey: context.env.SHOPIFY_API_KEY,
       apiSecretKey: context.env.SHOPIFY_API_SECRET
     });
   
     const products = await shopify.product.list();
   
     return new Response(JSON.stringify(products), {
       headers: {
         'Content-Type': 'application/json'
       }
     });
   }
   

การใช้ Commerce.js

1. ติดตั้ง SDK:

   npm install @chec/commerce.js
   

2. ดึงข้อมูลสินค้า:

   // src/api/commerce.js
   import Commerce from '@chec/commerce.js';
   
   const commerce = new Commerce(process.env.COMMERCE_PUBLIC_KEY);
   
   export async function getProducts() {
     return commerce.products.list();
   }
   
   export async function getProduct(permalink) {
     return commerce.products.retrieve(permalink);
   }
   

9. การใช้ Pages กับ Authentication

การใช้ Cloudflare Access

• การทำงาน: ระบบ authentication และ authorization สำหรับเว็บไซต์
• การตั้งค่า:
  1. ไปที่ Cloudflare Dashboard > Access
  2. สร้าง Application
  3. กำหนด Access Policies (เช่น อีเมลโดเมนที่อนุญาต)
• ประโยชน์:
  • ป้องกันเนื้อหาที่ต้องการความปลอดภัย
  • รองรับ SSO กับ Google, GitHub, ฯลฯ
  • ไม่ต้องเขียนโค้ด authentication เอง

การใช้ Auth0

1. ติดตั้ง SDK:

   npm install @auth0/auth0-react
   

2. ตั้งค่า Auth0 Provider:

   // src/index.js
   import { Auth0Provider } from '@auth0/auth0-react';
   
   ReactDOM.render(
     <Auth0Provider
       domain={process.env.AUTH0_DOMAIN}
       clientId={process.env.AUTH0_CLIENT_ID}
       redirectUri={window.location.origin}
     >
       <App />
     </Auth0Provider>,
     document.getElementById('root')
   );
   

3. สร้างปุ่ม Login:

   import { useAuth0 } from '@auth0/auth0-react';
   
   function LoginButton() {
     const { loginWithRedirect } = useAuth0();
     return <button onClick={() => loginWithRedirect()}>Log In</button>;
   }
   

การใช้ Firebase Authentication

1. ติดตั้ง SDK:

   npm install firebase
   

2. ตั้งค่า Firebase:

   // src/firebase.js
   import { initializeApp } from 'firebase/app';
   import { getAuth } from 'firebase/auth';
   
   const firebaseConfig = {
     apiKey: process.env.FIREBASE_API_KEY,
     authDomain: process.env.FIREBASE_AUTH_DOMAIN,
     projectId: process.env.FIREBASE_PROJECT_ID,
     // ...other config
   };
   
   const app = initializeApp(firebaseConfig);
   export const auth = getAuth(app);
   

3. สร้างฟอร์ม Login:

   import { signInWithEmailAndPassword } from 'firebase/auth';
   import { auth } from './firebase';
   
   function LoginForm() {
     const handleSubmit = async (e) => {
       e.preventDefault();
       const email = e.target.email.value;
       const password = e.target.password.value;
       try {
         await signInWithEmailAndPassword(auth, email, password);
       } catch (error) {
         console.error(error);
       }
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <input name="email" type="email" placeholder="Email" />
         <input name="password" type="password" placeholder="Password" />
         <button type="submit">Log In</button>
       </form>
     );
   }
   

10. การใช้ Pages กับ Forms

การใช้ Cloudflare Workers เพื่อจัดการ Forms

1. สร้าง Function สำหรับรับข้อมูล Form:

   // functions/api/contact.js
   export async function onRequest(context) {
     if (context.request.method !== "POST") {
       return new Response("Method not allowed", { status: 405 });
     }
   
     const formData = await context.request.formData();
     const name = formData.get("name");
     const email = formData.get("email");
     const message = formData.get("message");
   
     // ส่งอีเมลหรือบันทึกข้อมูลลง database
     // ตัวอย่างเช่น ส่งไปยัง Mailgun, Sendgrid, ฯลฯ
   
     return new Response(JSON.stringify({ success: true }), {
       headers: { "Content-Type": "application/json" }
     });
   }
   

2. สร้าง Form ใน HTML:

   <form action="/api/contact" method="POST">
     <input type="text" name="name" placeholder="Your Name" required>
     <input type="email" name="email" placeholder="Your Email" required>
     <textarea name="message" placeholder="Your Message" required></textarea>
     <button type="submit">Send Message</button>
   </form>
   

การใช้ Formspree

1. สร้าง Form ที่ใช้ Formspree:

   <form action="https://formspree.io/f/your_form_id" method="POST">
     <input type="text" name="name" placeholder="Your Name" required>
     <input type="email" name="email" placeholder="Your Email" required>
     <textarea name="message" placeholder="Your Message" required></textarea>
     <button type="submit">Send Message</button>
   </form>
   

2. การตั้งค่า CORS ใน _headers:

   /api/*
     Access-Control-Allow-Origin: *
     Access-Control-Allow-Methods: GET, POST, OPTIONS
     Access-Control-Allow-Headers: Content-Type
   

การใช้ Google Forms

1. สร้าง Embed Form:

   <iframe 
     src="https://docs.google.com/forms/d/e/your_form_id/viewform?embedded=true" 
     width="640" 
     height="800" 
     frameborder="0" 
     marginheight="0" 
     marginwidth="0">
     Loading…
   </iframe>
   

2. การใช้ Google Forms API:

   // functions/api/submit-form.js
   export async function onRequest(context) {
     const formData = await context.request.formData();
   
     // แปลงข้อมูลเป็นรูปแบบที่ Google Forms ต้องการ
     const googleFormsData = new FormData();
     googleFormsData.append("entry.123456789", formData.get("name"));
     googleFormsData.append("entry.987654321", formData.get("email"));
   
     // ส่งข้อมูลไปยัง Google Forms
     await fetch("https://docs.google.com/forms/d/e/your_form_id/formResponse", {
       method: "POST",
       body: googleFormsData
     });
   
     return new Response(JSON.stringify({ success: true }));
   }
   

11. การ Debug และ Troubleshooting

การดู Build Logs

• วิธีเข้าถึง: ไปที่โปรเจกต์ > Deployments > เลือก deployment > View details
• ข้อมูลที่แสดง:
  • Build command และ output
  • ข้อผิดพลาดที่เกิดขึ้น
  • ระยะเวลาในการ build
  • Environment variables ที่ใช้

ปัญหาที่พบบ่อยและวิธีแก้ไข

1. Build Failed:

   • สาเหตุ: Build command ไม่ถูกต้อง หรือ dependencies ไม่ครบ
   • วิธีแก้ไข: ตรวจสอบ build command และลอง build ในเครื่องก่อน

2. 404 Not Found:

   • สาเหตุ: Build output directory ไม่ถูกต้อง หรือไม่มีไฟล์ index.html
   • วิธีแก้ไข: ตรวจสอบ output directory และโครงสร้างไฟล์

3. Environment Variables ไม่ทำงาน:

   • สาเหตุ: ไม่ได้เพิ่ม prefix REACT_APP_ (สำหรับ React) หรือ NEXT_PUBLIC_ (สำหรับ Next.js)
   • วิธีแก้ไข: ตั้งชื่อ environment variables ให้ถูกต้องตามเฟรมเวิร์ค

4. Custom Domain ไม่ทำงาน:

   • สาเหตุ: DNS ยังไม่อัพเดท หรือตั้งค่าไม่ถูกต้อง
   • วิธีแก้ไข: ตรวจสอบการตั้งค่า DNS และรอการอัพเดท (อาจใช้เวลาถึง 24 ชั่วโมง)

การทดสอบ Locally ก่อน Deploy

1. ใช้ Wrangler CLI:

   npm install -g wrangler
   wrangler pages dev ./build
   

2. ใช้ Local Server:

   # สำหรับ Node.js
   npx serve -s build
   
   # สำหรับ Python
   python -m http.server
   

12. กรณีศึกษา: การใช้งานจริงของ Startup

กรณีศึกษา 1: เว็บไซต์บริษัท

• ความท้าทาย: Startup ต้องการเว็บไซต์ที่เร็ว ปลอดภัย และประหยัดต้นทุน
• การใช้ Pages:
  • สร้างเว็บไซต์ด้วย React และ Gatsby
  • เชื่อมต่อกับ Contentful เพื่อจัดการคอนเทนต์
  • ใช้ Cloudflare Analytics เพื่อติดตามผู้เข้าชม
• ผลลัพธ์:
  • ประหยัดค่าใช้จ่ายโฮสติ้งได้ 100%
  • เว็บไซต์โหลดเร็วขึ้น 40%
  • ทีมมาร์เก็ตติ้งสามารถอัพเดทคอนเทนต์ได้เอง

กรณีศึกษา 2: E-commerce

• ความท้าทาย: ร้านค้าออนไลน์ต้องการเว็บไซต์ที่รองรับทราฟฟิกสูงในช่วงโปรโมชัน
• การใช้ Pages:
  • สร้างเว็บไซต์ด้วย Next.js
  • ใช้ Snipcart สำหรับระบบตะกร้าสินค้า
  • ใช้ Cloudflare Workers เพื่อเชื่อมต่อกับระบบสต็อก
• ผลลัพธ์:
  • รองรับทราฟฟิกช่วง Black Friday ได้โดยไม่มีปัญหา
  • อัตราการ conversion เพิ่มขึ้น 25% เนื่องจากเว็บไซต์เร็วขึ้น
  • ลดต้นทุนโฮสติ้งลง 80%

กรณีศึกษา 3: SaaS Documentation

• ความท้าทาย: บริษัท SaaS ต้องการเว็บไซต์เอกสารที่อัพเดทอัตโนมัติเมื่อมีการเปลี่ยนแปลง API
• การใช้ Pages:
  • สร้างเว็บไซต์ด้วย VuePress
  • ใช้ GitHub Actions เพื่อสร้าง API docs จาก OpenAPI spec
  • ตั้งค่า webhook เพื่อ trigger การ build เมื่อมีการอัพเดท API
• ผลลัพธ์:
  • เอกสารอัพเดทอัตโนมัติเมื่อมีการเปลี่ยนแปลง API
  • ลดเวลาในการจัดทำเอกสารลง 90%
  • ผู้ใช้งานเข้าถึงเอกสารได้เร็วขึ้นทั่วโลก

13. ข้อจำกัดและการอัพเกรด

ข้อจำกัดของ Cloudflare Pages

• Build Minutes: 500 นาทีต่อเดือน (ฟรี)
• Build Memory: 1GB RAM
• Build Timeout: 20 นาที
• Asset Size: ไฟล์เดี่ยวไม่เกิน 25MB
• Total Size: โปรเจกต์ทั้งหมดไม่เกิน 20,000 ไฟล์หรือ 1GB
• Functions: จำกัด CPU time และ memory

เมื่อไรควรพิจารณาแพ็กเกจ Paid

1. ปริมาณการ Build:

   • มีการ deploy บ่อยและใช้ build minutes เกิน 500 นาทีต่อเดือน
   • โปรเจกต์ใหญ่และใช้เวลา build นาน

2. ความต้องการพิเศษ:

   • ต้องการ build memory มากกว่า 1GB
   • ต้องการ build timeout มากกว่า 20 นาที
   • ต้องการ support แบบ priority

3. ฟีเจอร์ Enterprise:

   • ต้องการ SLA (Service Level Agreement)
   • ต้องการ SAML SSO สำหรับทีม
   • ต้องการ audit logs และ advanced security

ทางเลือกอื่นๆ ของ Cloudflare

• Workers: สำหรับแอปพลิเคชันที่ต้องการ server-side logic
• R2 Storage: สำหรับเก็บไฟล์ขนาดใหญ่ (เช่น วิดีโอ, ไฟล์ดาวน์โหลด)
• Durable Objects: สำหรับแอปพลิเคชันที่ต้องการเก็บสถานะ
• Stream: สำหรับ video hosting และ streaming

14. สรุป: ทำไม Cloudflare Pages ถึงเหมาะกับ Startup

1. ประหยัดต้นทุน
   ฟรีทั้งหมด ไม่มีค่าใช้จ่ายแฝง ไม่จำกัด bandwidth

2. ประสิทธิภาพสูง
   CDN ทั่วโลก ทำให้เว็บไซต์โหลดเร็วในทุกประเทศ

3. ง่ายต่อการใช้งาน
   เชื่อมต่อกับ Git และ deploy อัตโนมัติ ไม่ต้องตั้งค่าซับซ้อน

4. ปลอดภัย
   HTTPS อัตโนมัติ และการป้องกันการโจมตีจาก Cloudflare

5. ขยายได้ไม่จำกัด
   รองรับการเติบโตของธุรกิจโดยไม่มีข้อจำกัด

“Cloudflare Pages เป็นทางเลือกที่ดีที่สุดสำหรับ Startup ที่ต้องการเว็บไซต์ที่เร็ว ปลอดภัย และประหยัดต้นทุน โดยไม่ต้องกังวลเรื่องการจัดการเซิร์ฟเวอร์หรือการขยายตัวในอนาคต”

15. แหล่งเรียนรู้เพิ่มเติม

เอกสารและบทความ:

• Cloudflare Pages Documentation
• Cloudflare Pages Blog
• JAMstack.org

คอมมูนิตี้:

• Cloudflare Developers Discord
• Stack Overflow - Cloudflare Pages
• GitHub - Cloudflare Pages Examples

คอร์สและวิดีโอ:

• Cloudflare Pages YouTube Playlist
• JAMstack Explorers

เคล็ดลับ: Cloudflare มีการอัพเดทฟีเจอร์ใหม่ๆ สำหรับ Pages อยู่เสมอ ติดตาม Cloudflare Blog และ Twitter เพื่อไม่พลาดฟีเจอร์ล่าสุดที่อาจช่วยให้เว็บไซต์ของคุณดียิ่งขึ้น