Astro Blog Theme

แนวคิด

Astro official blog starter มี boilerplate เยอะ — Tailwind config, card components, social links ที่ไม่ได้ใช้ทุกคน อยากได้ starter ที่:

• ไม่มี CSS framework — CSS custom properties เขียนเอง
• Dark mode ถูกต้อง (ไม่ FOUC)
• Typography ที่อ่านสบาย
• Markdown rendering ที่สวยและ accessible

Features

• Astro 5 + TypeScript strict mode
• Content Collections พร้อม Zod schema
• Dark mode — [data-theme] + localStorage, anti-FOUC
• Typography — Inter + Noto Sans Thai, fluid sizing
• Code blocks — Shiki dual-theme (light/dark)
• RSS feed built-in
• Sitemap auto-generated
• Reading time estimate
• Prev/next post navigation
• Tag pages auto-generated
• Search ผ่าน Pagefind (หลัง npm run build)
• View Transitions
• ขนาด < 5kB CSS, < 10kB JS (ยกเว้น Pagefind)

โครงสร้าง

astro-blog-theme/
├── src/
│   ├── content/
│   │   └── posts/        ← เขียน .md ไฟล์ที่นี่
│   ├── layouts/
│   │   ├── Layout.astro  ← HTML wrapper + meta
│   │   └── Post.astro    ← สำหรับ blog posts
│   ├── pages/
│   │   ├── index.astro   ← รายการ posts ล่าสุด
│   │   ├── posts/[slug].astro
│   │   ├── tags/[tag].astro
│   │   └── rss.xml.ts
│   ├── components/
│   │   ├── Header.astro
│   │   ├── Footer.astro
│   │   └── PostCard.astro
│   └── styles/
│       └── global.css
├── public/
│   ├── favicon.svg
│   └── robots.txt
├── astro.config.mjs
├── content.config.ts
└── package.json

ใช้งาน

# สร้าง project ใหม่จาก template
npm create astro@latest -- --template panupongws98/astro-blog-theme

# หรือ clone โดยตรง
git clone https://github.com/panupongws98/astro-blog-theme
cd astro-blog-theme
npm install
npm run dev

Frontmatter Schema

---
title: 'My First Post'
description: 'Short description for SEO and card preview'
date: 2026-01-15
tags: ['astro', 'css', 'webdev']
draft: false       # true = ไม่แสดง ยกเว้นตอน dev
---

สิ่งที่เรียนรู้

• การ design typography system ที่รองรับทั้งภาษาไทยและอังกฤษ
• Anti-FOUC pattern สำหรับ dark mode
• Astro Content Collections + Zod schema design
• Pagefind integration ตั้งแต่แรก ไม่ใช่เพิ่มทีหลัง
• การเขียน README ที่ดีสำหรับ open-source starter