เว็บนี้สร้างขึ้นอย่างไร — เบื้องหลัง KoishiAI

สรุปสั้น: KoishiAI สร้างหน้าเว็บด้วย Astro 5 เป็นไฟล์ HTML สำเร็จรูป และโฮสต์บน Cloudflare Pages ระบบหลังบ้านเขียนด้วย Python มีงานตามเวลาวันละครั้ง ข่าวแต่ละชิ้นต้องค้นแหล่งอ้างอิง ร่าง ตรวจข้อเท็จจริงกับแหล่งต้นทาง และให้คะแนนคุณภาพก่อนขึ้นเว็บ

[อัปเดต · 2026-10-11] เขียนใหม่ทั้งบทให้ตรงกับระบบปัจจุบัน ฉบับเดือนเมษายนมีข้อมูลที่ล้าสมัยหรือไม่ถูกต้องหลายจุด จึงตัดออก

[อัปเดต · 2026-10-14] แก้ประโยคเรื่องสองภาษา เดิมเขียนว่าทุกหน้ามีทั้งสองภาษา ที่ถูกคือบทความ คู่มือ และเครื่องมือ ส่วนหน้าแท็กของสองภาษาไม่ตรงกัน

ข้อเท็จจริงสำคัญ

• หน้าเว็บสร้างด้วย Astro 5 และออกมาเป็นไฟล์ HTML สำเร็จรูป
• เว็บมีสองภาษา คือไทยและอังกฤษ โดยไม่ใช้ไลบรารีเสริม
• โฮสต์บน Cloudflare Pages (ก่อนวันที่ 15 ตุลาคม 2026 ใช้ Firebase Hosting) และเก็บรูปไว้ที่เดียวกับหน้าเว็บ
• ระบบหลังบ้านเขียนด้วย Python เก็บคิวและบันทึกการทำงานไว้ใน SQLite
• งานตามเวลารันวันละครั้ง ตั้งเป้าลงข่าวใหม่วันละหนึ่งชิ้น
• ร่างที่คะแนนคุณภาพไม่ถึงเกณฑ์ ระบบจะพักไว้ และขึ้นเว็บได้ก็ต่อเมื่อแก้แล้วผ่าน
• ซอร์สโค้ดไม่ได้เปิดสาธารณะ

KoishiAI เป็นเว็บข่าวและบทความด้าน AI สองภาษา เราใช้ระบบ AI เป็นผู้ช่วยงานบรรณาธิการ บทความนี้เล่าว่าเว็บนี้สร้างด้วยอะไร และข่าวหนึ่งชิ้นผ่านอะไรบ้างตั้งแต่แหล่งข่าวจนถึงหน้าเว็บ

ส่วนหน้าเว็บ

• Astro 5 สร้างทุกหน้าเป็นไฟล์ HTML ตั้งแต่ตอน build ผู้อ่านได้ไฟล์สำเร็จรูป ไม่มีโค้ดฝั่งเซิร์ฟเวอร์ทำงานตอนเปิดหน้า
• Tailwind CSS ใช้จัดหน้าตาเว็บ
• TypeScript แบบ strict ช่วยจับข้อผิดพลาดตั้งแต่ตอนเขียนโค้ด
• ฟอนต์ IBM Plex Sans Thai และ Inter
• สองภาษา บทความ คู่มือ และเครื่องมือสร้างไว้ทั้งใต้ /th และ /en โดยไม่ใช้ไลบรารีเสริม

ไซต์แมปและ RSS ของแต่ละภาษาก็สร้างตอน build เช่นกัน

ส่วนโฮสติ้ง

• Cloudflare Pages ส่งไฟล์ที่ build เสร็จแล้วให้ผู้อ่าน
• รูปภาพเก็บไว้ที่เดียวกับหน้าเว็บ
• รูปและไฟล์ประกอบตั้งให้เบราว์เซอร์เก็บไว้ได้นาน 1 ปี ส่วนหน้า HTML ให้โหลดใหม่ทุกครั้ง ผู้อ่านจึงเห็นฉบับล่าสุดเสมอ
• ตั้ง security header ไว้ที่โฮสต์ เช่น HSTS และ Content-Security-Policy

ส่วนหลังบ้าน

• FastAPI (ภาษา Python) เป็นระบบหลังบ้าน
• SQLite เก็บคิวหัวข้อและบันทึกการทำงาน
• APScheduler สั่งงานทำข่าววันละครั้ง

เส้นทางของข่าวหนึ่งชิ้น

แหล่งข่าว AI
    ↓
คัดหัวข้อ และตรวจว่าไม่ซ้ำกับที่เคยลง
    ↓
ค้นและอ่านแหล่งอ้างอิง
    ↓
ร่างบทความจากแหล่งอ้างอิง
    ↓
ตั้งชื่อหน้าและคำอธิบาย
    ↓
ตรวจข้อเท็จจริงในร่างกับแหล่งต้นทาง
    ↓
ให้คะแนนคุณภาพ (ร่างที่ไม่ผ่าน ระบบพักไว้ แล้วแก้และให้คะแนนใหม่ ถ้ายังไม่ผ่านก็ทิ้ง)
    ↓
หาภาพประกอบจากคลังภาพ ถ้าได้ภาพถ่ายจะใส่เครดิตช่างภาพ
    ↓
ทำฉบับอีกภาษาหนึ่ง
    ↓
บันทึกไฟล์ → git commit → build → deploy
    ↓
แชร์ข่าวประจำวัน ฉบับภาษาไทย ไปที่เพจ Facebook

ขั้นตอนข้างบนทำงานอยู่ในระบบเผยแพร่ของเรา บรรณาธิการอ่านทุกบทความเพื่อดูความชัดเจน ถ้าพบข้อผิดพลาด แจ้งเราได้ เราจะแก้ไข วิธีแจ้งอยู่ที่หน้าการแก้ไขข้อผิดพลาด

บางวันระบบปล่อยร่างเก่าที่แก้จนผ่านเกณฑ์แล้วขึ้นเว็บเพิ่มด้วย

ทำไมถึงเลือก Astro

1. หน้าเว็บเป็นไฟล์ HTML สำเร็จรูป ไม่มีโค้ดฝั่งเซิร์ฟเวอร์ทำงานตอนผู้อ่านเปิดหน้า จึงมีส่วนที่ต้องดูแลเรื่องความปลอดภัยน้อย
2. เขียนบทความเป็นไฟล์ Markdown ได้โดยตรง แล้ว Astro สร้างหน้าให้
3. ไม่ต้องส่ง JavaScript framework ไปที่เบราว์เซอร์ หน้าบทความจึงเบา

เว็บมีอะไรอีกบ้าง

• เครื่องมือ เช่น นับ Token ภาษาไทย และแปลงตัวเลขเป็นคำอ่านเงินบาท
• ตารางราคาแพ็กเกจ AI ที่แสดงเป็นเงินบาท
• คู่มือ Claude Code และซีรีส์บทเรียน

ซอร์สโค้ด

ซอร์สโค้ดของเว็บนี้ไม่ได้เปิดสาธารณะ

แหล่งข้อมูล

• Why Astro? เอกสารของ Astro
• Cloudflare Pages เอกสารของ Cloudflare
• FastAPI เอกสารของ FastAPI
• About SQLite เอกสารของ SQLite

มีคำถามเรื่องวิธีสร้างเว็บนี้ คอมเมนต์ถามได้ที่เพจ Facebook ของเรา