Deploy FREE บน Cloudflare Pages

หลังจากตั้งค่าโปรเจกต์บนเครื่องเรียบร้อยแล้ว ขั้นตอนต่อไปคือการนำบล็อกของคุณขึ้นสู่โลกออนไลน์! บทความนี้จะแนะนำวิธี deploy โปรเจกต์ Astro + Notion ของคุณบน Cloudflare Pages แพลตฟอร์มโฮสติ้งประสิทธิภาพสูงที่ให้บริการฟรีสำหรับโปรเจกต์ Static Site เราจะเริ่มตั้งแต่การนำโค้ดขึ้น GitHub, การตั้งค่าโปรเจกต์บน Cloudflare, การกำหนดค่า Environment Variables อย่างปลอดภัย ไปจนถึงการ deploy เว็บไซต์ให้พร้อมใช้งานจริง

1. โปรเจกต์ Astro + Notion ต้องสามารถรันบนเครื่องของคุณได้เรียบร้อยแล้ว (npm run dev ทำงานได้)
2. บัญชี GitHub สำหรับเก็บ Source Code ของโปรเจกต์ (สมัคร GitHub)
3. บัญชี Cloudflare สำหรับใช้บริการ Pages (สมัคร Cloudflare)

Cloudflare Pages ทำงานโดยการดึงโค้ดจาก Git repository (เช่น GitHub) ดังนั้นขั้นตอนแรกคือการนำโปรเจกต์ของเราไปเก็บไว้ที่นั่น

• สร้าง Repository ใหม่บน GitHub:
  • ไปที่ GitHub แล้วกดปุ่ม "New" เพื่อสร้าง repository ใหม่
  • ตั้งชื่อ repository (เช่น my-astro-notion-blog)
  • เลือกระหว่าง Public หรือ Private (สามารถใช้ได้ทั้งสองแบบ)
  • ไม่ต้อง initialize ด้วย README หรือ .gitignore เพราะเรามีไฟล์เหล่านี้ในโปรเจกต์อยู่แล้ว
  • กด "Create repository"
• Push โค้ดจากเครื่องของคุณ
  • เปิด Terminal ขึ้นมาในโฟลเดอร์โปรเจกต์ของคุณ
  • รันคำสั่งต่อไปนี้ทีละบรรทัด โดยเปลี่ยน URL ของ repository ให้เป็นของคุณ

  # เริ่มต้น git ในโปรเจกต์
  git init -b main
  
  # เพิ่มไฟล์ทั้งหมดเข้าระบบ (ไฟล์ .gitignore จะช่วยคัดกรองไฟล์ที่ไม่จำเป็นออกไป)
  git add .
  
  # สร้าง commit แรก
  git commit -m "Initial commit"
  
  # เชื่อมต่อ local repository กับ remote บน GitHub
  git remote add origin <https://github.com/YOUR_USERNAME/YOUR_REPOSITORY.git>
  
  # Push โค้ดขึ้นไปเก็บไว้ที่ GitHub
  git push -u origin main
  

✅ ตรวจสอบความปลอดภัย: โปรเจกต์นี้มีไฟล์ .gitignore ที่ตั้งค่ามาอย่างถูกต้อง ทำให้ไฟล์สำคัญอย่าง .env (ที่เก็บ Token ของคุณ) และโฟลเดอร์ node_modules จะไม่ถูก push ขึ้นไปยัง GitHub ซึ่งเป็นวิธีปฏิบัติที่ดีที่สุด

เมื่อโค้ดของเราพร้อมบน GitHub แล้ว ก็ถึงเวลาเชื่อมต่อกับ Cloudflare

• ล็อกอินเข้าสู่ Cloudflare Dashboard:
  • ไปที่เมนูด้านซ้าย เลือก Workers & Pages
  • คลิกที่แท็บ Pages แล้วเลือก Create application
  • เลือก Connect to Git
• เชื่อมต่อกับ GitHub Repository:
  • Cloudflare จะขออนุญาตเชื่อมต่อกับบัญชี GitHub ของคุณ
  • เลือกบัญชีและอนุญาตให้เข้าถึง repository ที่คุณต้องการ (สามารถเลือก "All repositories" หรือ "Only select repositories" ก็ได้)
  • เลือก repository ที่คุณสร้างไว้ในขั้นตอนที่ 1 แล้วกด Begin setup

หน้านี้คือส่วนที่สำคัญที่สุดในการบอกให้ Cloudflare รู้ว่าจะต้อง build โปรเจกต์ Astro ของเราอย่างไร

1. Project name: ตั้งชื่อโปรเจกต์ของคุณ ชื่อนี้จะกลายเป็นส่วนหนึ่งของ URL (<project-name>.pages.dev)
2. Production branch: เลือก branch หลักที่คุณใช้ ซึ่งก็คือ main

• Build settings: Cloudflare ฉลาดพอที่จะตรวจจับได้ว่านี่คือโปรเจกต์ Astro และจะตั้งค่าให้โดยอัตโนมัติ แต่ให้ตรวจสอบอีกครั้งว่าการตั้งค่าถูกต้องดังนี้:
  • Framework preset: Astro
  • Build command: npm run build
  • Build output directory: /dist
• Environment Variables (สำคัญมาก!)
  • นี่คือส่วนที่เราจะนำค่าจากไฟล์ .env บนเครื่องของเราไปใส่ให้ Cloudflare ใช้อย่างปลอดภัย
  • เลื่อนลงมาที่ส่วน Environment Variables (advanced) แล้วกด Add variable
  • เพิ่มตัวแปร 2 ตัว ดังนี้:
    • Variable name: NOTION_TOKEN
    • Value: คัดลอกค่า Token ของคุณจากไฟล์ .env มาวาง
    • Variable name: NOTION_DATABASE_ID
    • Value: คัดลอกค่า Database ID ของคุณจากไฟล์ .env มาวาง

เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้ว

1. กดปุ่ม "Save and Deploy"
2. Cloudflare จะเริ่มกระบวนการดึงโค้ด, ติดตั้ง dependencies, รันคำสั่ง build, และนำผลลัพธ์ที่ได้ (จากโฟลเดอร์ /dist) ไป deploy ขึ้นบนเครือข่ายระดับโลกของ Cloudflare
3. คุณสามารถดูความคืบหน้าและ log การ build ได้แบบ real-time
4. เมื่อกระบวนการเสร็จสิ้น (ใช้เวลาประมาณ 1-2 นาที) Cloudflare จะแสดง URL ของเว็บไซต์คุณ (เช่น https://my-astro-notion-blog.pages.dev)

คลิกที่ URL นั้นเพื่อเข้าชมบล็อกของคุณที่เผยแพร่อยู่บนโลกออนไลน์เรียบร้อยแล้ว!

การทำงานอัตโนมัติ (CI/CD)

สิ่งที่ยอดเยี่ยมที่สุดคือ Cloudflare Pages ได้ตั้งค่าระบบ CI/CD (Continuous Integration/Continuous Deployment) ให้คุณโดยอัตโนมัติ ซึ่งหมายความว่า

ทุกครั้งที่คุณ git push การเปลี่ยนแปลงใหม่ๆ ไปยัง branch main บน GitHub, Cloudflare จะทำการ build และ deploy เว็บไซต์เวอร์ชันใหม่ให้คุณเองโดยอัตโนมัติ

ดังนั้น workflow การอัปเดตบล็อกของคุณในอนาคตจึงง่ายมาก

1. เขียนบทความใหม่ใน Notion
2. (ทางเลือก) หากมีการแก้ไขโค้ด ก็ push โค้ดใหม่ขึ้น GitHub
3. หากไม่มีการแก้ไขโค้ด แต่ต้องการให้เว็บดึงข้อมูลใหม่จาก Notion คุณอาจต้อง trigger build ใหม่ด้วยตนเองใน Cloudflare Dashboard หรือทำการ push commit ว่างๆ (git commit --allow-empty -m "Trigger deploy" && git push)
4. รอสักครู่ เว็บไซต์ของคุณก็จะอัปเดตเป็นเวอร์ชันล่าสุด