✓ เสร็จแล้ว
Astro Minimal Starter
Starter template สำหรับ Astro ที่ stripped-down จนเหลือแค่สิ่งจำเป็น — dark mode, TypeScript strict, font loading, global CSS reset พร้อมใช้งานได้เลย
สารบัญ
ทำไมถึงสร้าง
Astro official template มีหลายตัวแต่มักมาพร้อมสิ่งที่ไม่ต้องการ (Welcome.astro, demo content, default styles ที่ต้องลบทิ้งก่อนเริ่มงาน) ชอบเริ่มจาก clean slate ที่ตั้งค่าพื้นฐานไว้ให้แล้ว
สิ่งที่รวมมาให้
Structure
src/
├── layouts/
│ └── Layout.astro — base layout พร้อม meta, dark mode, font
├── components/
│ └── Header.astro — nav skeleton
├── pages/
│ └── index.astro — หน้าแรกว่างเปล่า
└── styles/
└── global.css — reset + utility classes + dark mode variablesFeature ที่ตั้งค่าไว้แล้ว
- TypeScript strict —
tsconfig.jsonพร้อม"strict": true - Dark mode — anti-FOUC inline script +
[data-theme]CSS variables - Font loading — Google Fonts + preconnect +
display=swap - CSS Reset — box-sizing, margin reset, line-height ที่อ่านสบาย
- Meta tags — og:title, og:description, og:image, canonical
- Favicon — SVG + ICO slots
สิ่งที่ไม่รวมมาตั้งใจ
- Framework (React, Vue, Svelte) — เพิ่มทีหลังเองถ้าต้องการ
- Component library — ชอบเขียน CSS เอง
- Content Collections — เพิ่มเมื่อโปรเจคต้องการ
วิธีใช้
npm create astro@latest my-project -- --template panupongws98/astro-minimal-starter
cd my-project && npm install && npm run devConfiguration ที่น่าสังเกต
Dark Mode Variables
:root {
--bg: #f8fafc;
--text: #0f172a;
--muted: #64748b;
--border: rgba(15, 23, 42, 0.1);
}
[data-theme='dark'] {
--bg: #0f172a;
--text: #e2e8f0;
--muted: #94a3b8;
--border: rgba(255, 255, 255, 0.1);
}Anti-FOUC Script
<!-- ใน <head> ก่อน CSS ทุกอย่าง -->
<script is:inline>
(function() {
try {
var s = localStorage.getItem('theme');
var d = window.matchMedia('(prefers-color-scheme: dark)').matches;
document.documentElement.dataset.theme = s || (d ? 'dark' : 'light');
} catch {}
})();
</script>สิ่งที่เรียนรู้
Starter template ดี ≠ feature เยอะ — template ที่ดีคือ template ที่ทำให้เริ่มได้เร็วและลบสิ่งที่ไม่ต้องการได้ง่าย ไม่ใช่ยิ่งครบยิ่งดี
Dark mode ต้องตั้งแต่วันแรก — การเพิ่ม dark mode ทีหลังใน CSS ที่ไม่ได้ใช้ variables มาตั้งแต่ต้น ต้องไล่แก้ทุก hardcoded color — เจ็บปวดมาก
TypeScript strict ตั้งแต่เริ่ม — การเปิด strict mode ทีหลังใน project ที่โตแล้วทำให้เจอ type errors ที่ต้องแก้เป็นร้อยจุด ดีกว่าตั้งแต่วันแรก