คู่มือการเริ่มใช้งาน Astro ร่วมกับ Notion CMS ด้วย Starter Template

ยินดีต้อนรับสู่คู่มือการใช้งาน Astro Notion Starter Template! บทความนี้จะแนะนำขั้นตอนการติดตั้งอย่างละเอียด ตั้งแต่การ Duplicate เทมเพลตฐานข้อมูลใน Notion, การสร้าง Integration Token เพื่อเชื่อมต่อกับ API, การตั้งค่า Environment Variables ในโปรเจกต์ Astro, ไปจนถึงการรันโปรเจกต์บนเครื่องของคุณเอง เพื่อสร้างบล็อกที่มีประสิทธิภาพสูง ขับเคลื่อนด้วย Astro และจัดการเนื้อหาทั้งหมดผ่าน Notion ที่คุณคุ้นเคย

สิ่งแรกที่ต้องทำคือการสร้างฐานข้อมูลใน Notion เพื่อใช้เป็นที่เก็บข้อมูลบทความของเรา

1. Duplicate Template: เริ่มต้นโดยการเข้าไปที่ลิงก์เทมเพลตฐานข้อมูล Notion ด้านล่างนี้ และกดปุ่ม "Duplicate" ที่มุมขวาบน เพื่อคัดลอกเทมเพลตนี้ไปไว้ใน Workspace ของคุณ

   ลิงค์ไปยัง Notion Database Template

• ตรวจสอบโครงสร้างข้อมูล: หลังจาก Duplicate แล้ว คุณจะเห็นตารางที่มีคอลัมน์ต่างๆ ที่จำเป็นต่อการทำงานของบล็อก เช่น:
  • Name: ชื่อบทความ (Title)
  • Slug: ชื่อ URL ที่จะแสดงผล (เช่น getting-started)
  • Published: Checkbox สำหรับกำหนดว่าจะเผยแพร่บทความนี้หรือไม่
  • Description: คำอธิบายสั้นๆ ของบทความ
  • Tags: สำหรับจัดหมวดหมู่บทความ
  • Created: วันที่สร้าง (จะถูกกำหนดโดยอัตโนมัติ)

เพื่อให้โปรเจกต์ Astro ของเราสามารถดึงข้อมูลจาก Notion ได้ เราจำเป็นต้องสร้าง "Integration" เพื่อเป็นตัวกลางในการเชื่อมต่อผ่าน API

• สร้าง Integration ใหม่:
  • ไปที่หน้า My Integrations
  • คลิกที่ปุ่ม "+ New integration"
  • ตั้งชื่อ Integration ของคุณ (เช่น "Astro Blog") และเลือก Workspace ที่ถูกต้อง
  • กด "Submit"
• คัดลอก Secret Token:
  • หลังจากสร้างเสร็จ Notion จะแสดง Internal Integration Token ให้คุณ
  • ให้คัดลอก Token นี้เก็บไว้ให้ดี เพราะเราจะต้องใช้ในขั้นตอนถัดไป

  ⚠️ ข้อควรระวัง: Token นี้เป็นความลับ ห้ามเปิดเผยหรือเก็บไว้ในที่สาธารณะ เช่น การ commit ขึ้น GitHub

• เชื่อมต่อ Integration กับ Database:
  • กลับไปที่หน้าฐานข้อมูลที่คุณ Duplicate ไว้ในขั้นตอนที่ 1
  • คลิกที่เมนูสามจุด (...) ที่มุมขวาบนของหน้า
  • เลือก "+ Add connections"
  • ค้นหาและเลือกชื่อ Integration ที่คุณเพิ่งสร้างไป
  • กดยืนยันการเชื่อมต่อ

เมื่อฝั่ง Notion พร้อมแล้ว ก็ถึงเวลาตั้งค่าในฝั่งของโปรเจกต์ Astro

1. Clone โปรเจกต์: หากยังไม่มีโปรเจกต์ ให้ทำการ clone repository ของ Astro Notion Starter มาที่เครื่องของคุณ

   git clone <https://github.com/Duckrr/astro-notion.git>
   cd astro-notion
   

• สร้างไฟล์ Environment Variables:
  • ในโฟลเดอร์ราก (root) ของโปรเจกต์ ให้สร้างไฟล์ใหม่ชื่อว่า .env
  • เปิดไฟล์ .env ขึ้นมาแล้วใส่ค่า 2 อย่างที่เราเตรียมไว้
    • NOTION_TOKEN: คือ Internal Integration Token ที่คัดลอกมาจากขั้นตอนที่ 2
    • NOTION_DATABASE_ID: คือ ID ของฐานข้อมูลของคุณ
• วิธีหา NOTION_DATABASE_ID:
  • เปิดหน้าฐานข้อมูลของคุณใน Notion ผ่านเบราว์เซอร์
  • สังเกตที่ URL จะมีรูปแบบดังนี้: https://www.notion.so/YOUR_WORKSPACE/DATABASE_ID?v=...
  • DATABASE_ID คือชุดตัวอักษรและตัวเลขที่อยู่ระหว่าง ...so/ และ ?v=...
  • ตัวอย่างเช่น ถ้า URL คือ https://www.notion.so/myworkspace/853c6531c1954f988c5822b3149e2908?v=...
  • ID ของคุณคือ 853c6531c1954f988c5822b3149e2908

  นำค่าที่ได้ไปใส่ในไฟล์ .env ของคุณ จะได้หน้าตาประมาณนี้:

  NOTION_TOKEN="secret_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  NOTION_DATABASE_ID="853c6531c1954f988c5822b314xxxxxx"

ขั้นตอนสุดท้ายคือการติดตั้ง dependencies และรัน development server เพื่อดูผลลัพธ์

1. ติดตั้ง Dependencies: เปิด Terminal ขึ้นมาในโฟลเดอร์โปรเจกต์ แล้วรันคำสั่ง:

   npm install
   # หรือ yarn install, pnpm install

2. เริ่ม Development Server: หลังจากติดตั้งเสร็จ ให้รันคำสั่ง:

   npm run dev

3. ดูผลลัพธ์: เปิดเบราว์เซอร์แล้วไปที่ http://localhost:4321 คุณจะเห็นหน้าบล็อกที่ดึงข้อมูลบทความมาจากฐานข้อมูล Notion ของคุณเรียบร้อยแล้ว!

เพียงเท่านี้คุณก็สามารถเริ่มต้นเขียนบทความใน Notion และปล่อยให้ Astro จัดการสร้างเว็บไซต์ที่รวดเร็วและสวยงามให้คุณได้อย่างง่ายดาย ขอให้สนุกกับการสร้างสรรค์ผลงานครับ