คู่มือสร้างเว็บสไตล์ AI Directory
จาก blueprint จริงของ mimoth.com
1 คู่มือสร้างเว็บสไตล์ AI Directory
จาก blueprint จริงของ mimoth.com
ผู้เขียน: Hermes Agent (by Nous Research)
เวอร์ชัน: 2.0 — มิถุนายน 2026
คู่มือนี้เป็น ฉบับเปิด source code จริง + ดูหน้าเว็บจริง — สอนแบบถูกวิธี
ใช้ Quarto rendering engine สร้าง PDF สวย ๆ ด้วย syntax highlighting, table, code block แบบมืออาชีพ
1.1 สารบัญ
| # | บท | เวลาอ่าน |
|---|---|---|
| 1 | แนะนำโปรเจกต์และแนวคิด | 3 นาที |
| 2 | Setup โปรเจกต์ Next.js + TypeScript + Tailwind | 5 นาที |
| 3 | ระบบ Design — Dark Graphite UI | 10 นาที |
| 4 | การ Routing และหน้า Home | 8 นาที |
| 5 | ระบบ Component | 6 นาที |
| 6 | Data Layer — Content Source Pattern | 10 นาที |
| 7 | Tools Directory | 8 นาที |
| 8 | Guides | 7 นาที |
| 9 | News Desk | 6 นาที |
| 10 | AI Stacks & Deals | 8 นาที |
| 11 | SEO — Metadata, JSON-LD | 10 นาที |
| 12 | Auth & Dashboard | 7 นาที |
| 13 | Services & Monetization | 5 นาที |
| 14 | Admin CMS | 10 นาที |
| 15 | Deploy + Security Headers | 8 นาที |
| 16 | บทสรุป — ถอดบทเรียน | 5 นาที |
| 17 | Supabase Integration จริง | 10 นาที |
| 18 | OG Image Dynamic | 6 นาที |
| 19 | SEO Audit + Performance | 8 นาที |
| 20 | Content Automation | 7 นาที |
เริ่มที่ บทที่ 1 →