Notion LogoAstro LogoTailwind CSS LogoCloudflare Logo

เปลี่ยน Notion ให้เป็น Blog สุดเร็วด้วย Astro

Starter template สำหรับสร้างบล็อกด้วย Astro โดยใช้ Notion เป็น Headless CMS จัดการเนื้อหาทั้งหมดใน Notion ที่คุณคุ้นเคย แล้วปล่อยให้ Astro สร้างหน้าเว็บที่เร็วและมีประสิทธิภาพ


?

ทำไมต้อง Astro + Notion


คู่มือการใช้งาน

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

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

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

แปลงร่าง Notion Blocks เป็นหน้าเว็บสวยๆ ด้วย Astro - สำรวจความสามารถของ Block Renderer

แปลงร่าง Notion Blocks เป็นหน้าเว็บสวยๆ ด้วย Astro - สำรวจความสามารถของ Block Renderer

บทความนี้จะพาไปดูตัวอย่างการแสดงผลเนื้อหาประเภทต่างๆ จาก Notion ที่โปรเจกต์ของเรารองรับ สำหรับ Bolck ที่นิยมใช้ พร้อมตัวอย่างการจัดสไตล์ เช่น ตัวหนา, ตัวเอียง, สีตัวอักษร และสีพื้นหลัง เพื่อให้เห็นภาพว่าคุณสามารถจัดหน้าบทความใน Notion ได้ยืดหยุ่นแค่ไหน

เจาะลึกการดึงข้อมูลด้วย @notionhq/client

เจาะลึกการดึงข้อมูลด้วย @notionhq/client

บทความนี้จะพาไปผ่าโค้ดเบื้องหลังการดึงข้อมูลจาก Notion API โดยใช้ไลบรารี notionhq/client อธิบายตั้งแต่การติดตั้ง การ query database เพื่อดึงรายการบทความทั้งหมด, และเจาะลึกเทคนิคสำคัญในการดึงข้อมูลบล็อกทั้งหมดแบบ Recursive เพื่อให้สามารถจัดการกับบล็อกที่ซ้อนกันอยู่ลึกๆ ได้ เหมาะสำหรับผู้ที่ต้องการเข้าใจการทำงานของ API และนำไปต่อยอด

Deploy FREE บน Cloudflare Pages

Deploy FREE บน Cloudflare Pages

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