Astro Blog Theme
Minimal Astro blog starter theme ที่ focus บน typography, dark mode, และ content — ไม่มี bloat
อ่านเพิ่ม →#astro 29
รายการ Projects, Resources และ Notes ทั้งหมดที่มี tag นี้
Projects 11
Panupong WS
เว็บส่วนตัวสำหรับรวบรวม projects, resources และ notes ด้าน tech, dev และ graphic design สร้างด้วย Astro และ TypeScript แบบ static site
อ่านเพิ่ม →Astro Component Playground
Interactive sandbox สำหรับทดสอบ Astro components แบบ real-time — เขียน component code แล้วเห็น preview ทันที
อ่านเพิ่ม →Link Garden
พื้นที่รวบรวมและจัดหมวดหมู่ลิงก์ที่น่าสนใจในแบบ digital garden สร้างด้วย Astro ไม่ใช่ bookmark ธรรมดา แต่มี note อธิบายว่าทำไมลิงก์นี้ถึงมีคุณค่า
อ่านเพิ่ม →Astro SEO Audit
CLI script ตรวจ SEO ของ Astro static site — ตรวจ meta tags, canonical URL, Open Graph, structured data และ performance hints
อ่านเพิ่ม →Zod Schema Studio
Web tool สำหรับเขียน Zod schema แบบ interactive — เห็น type output และ validation errors แบบ real-time ไม่ต้อง setup project
อ่านเพิ่ม →Reading Log
Static site สำหรับบันทึกหนังสือที่อ่าน พร้อม rating, note และ tags จัดการด้วย Astro Content Collections ไม่ต้องมี backend
อ่านเพิ่ม →Astro Minimal Starter
Starter template สำหรับ Astro ที่ stripped-down จนเหลือแค่สิ่งจำเป็น — dark mode, TypeScript strict, font loading, global CSS reset พร้อมใช้งานได้เลย
อ่านเพิ่ม →Link-in-Bio Page
หน้า link-in-bio แบบ static ที่สร้างด้วย Astro ไม่พึ่ง third-party service ดูแลการออกแบบเองได้ 100% โหลดเร็วกว่า Linktree มาก
อ่านเพิ่ม →Markdown CV
CV/Resume ที่เขียนใน Markdown แล้ว render เป็น HTML ด้วย Astro — แก้ไขง่าย print-ready และไม่ต้องพึ่ง Canva หรือ Google Docs
อ่านเพิ่ม →Obsidian to Astro Exporter
Script แปลง Obsidian vault เป็น Astro Content Collection — ดึง frontmatter, แปลง wikilinks เป็น markdown links, และ copy assets อัตโนมัติ
อ่านเพิ่ม →Resources 13
Astro Islands Architecture — JavaScript เฉพาะที่จำเป็น
เข้าใจ Islands Architecture ของ Astro ว่าทำงานอย่างไร ทำไมถึงส่ง zero JS by default และเมื่อไรควรใช้ client directives เพื่อ hydrate component
อ่านเพิ่ม →Astro Server Islands — Dynamic Content ใน Static Site
Server Islands คือ Astro 5 feature ที่ช่วยฝัง dynamic server-rendered component ลงใน static page โดยไม่ต้อง sacrifice performance ของหน้าอื่น
อ่านเพิ่ม →Deploying Static Sites — Vercel, Netlify, GitHub Pages
วิธี deploy static site ด้วย Vercel, Netlify, และ GitHub Pages — เปรียบเทียบ features, ราคา, และ workflow
อ่านเพิ่ม →VS Code Setup สำหรับ Astro + TypeScript
การตั้งค่า VS Code ที่ทำให้การเขียน Astro + TypeScript smooth ที่สุด — extensions, settings.json, snippets, และ debug config
อ่านเพิ่ม →SEO Meta Tags — คู่มือครบสำหรับ Static Site
รวม meta tags ที่จำเป็น ตั้งแต่ title, description, Open Graph, Twitter Card ไปจนถึง JSON-LD structured data สำหรับ static site
อ่านเพิ่ม →Astro SSR — output server/hybrid mode
คู่มือ Astro SSR mode — เปิด server rendering, adapters (Node.js, Cloudflare, Vercel), และ hybrid (บาง page static บาง page server)
อ่านเพิ่ม →Astro Content Collections — คู่มือฉบับใช้งานจริง
คู่มือการใช้ Content Collections ใน Astro 6 สำหรับจัดการเนื้อหาแบบ type-safe ด้วย Zod schema พร้อม patterns ที่ใช้บ่อยในโปรเจคจริง
อ่านเพิ่ม →Astro View Transitions — เปลี่ยนหน้าแบบ Smooth ด้วย ClientRouter
วิธีใช้ View Transitions API ใน Astro ผ่าน ClientRouter, transition:name สำหรับ shared elements, และการ handle events ที่ถูกต้อง
อ่านเพิ่ม →Zod — Schema Validation ที่ TypeScript รัก
Zod คือ library สำหรับ validate ข้อมูลแบบ type-safe ซึ่ง Astro Content Collections ใช้ภายใต้ฝาครอบ รู้จัก Zod ให้ดีคือรู้จัก schema ของ content collection ให้ดีขึ้น
อ่านเพิ่ม →Pagefind — Full-text Search สำหรับ Static Site
Pagefind คือ library สำหรับเพิ่มระบบค้นหาให้กับ static site โดยไม่ต้องมี server หรือ external API ทำงานได้หลัง build เลย
อ่านเพิ่ม →สร้าง RSS Feed กับ Astro — @astrojs/rss
วิธีตั้งค่า RSS feed สำหรับ Astro static site ด้วย @astrojs/rss รองรับ Content Collections และ custom channel metadata
อ่านเพิ่ม →Astro Image Optimization — ใช้ astro:assets ให้ถูกต้อง
คู่มือใช้ <Image /> component และ getImage() ใน Astro สำหรับ WebP, lazy loading และ responsive images ที่ optimize แล้ว
อ่านเพิ่ม →Core Web Vitals — ทำ Static Site ให้ได้คะแนนสูง
แนวทางปรับ LCP, CLS, INP สำหรับ static site บน Astro ที่ทำได้จริงโดยไม่ต้องจ้างผู้เชี่ยวชาญ
อ่านเพิ่ม →Notes 5
YAML dates ใน Astro Content Collections
YAML parse date โดยอัตโนมัติ — quoted vs unquoted ให้ผลต่างกัน และส่งผลกับ z.date() ใน Astro schema
อ่านเพิ่ม →Astro Actions — type-safe server functions ใน Astro 5
อ่านเพิ่ม →Astro Middleware — intercept requests ก่อนถึง page
อ่านเพิ่ม →ทำไม static site ถึงเหมาะกับเว็บส่วนตัวมากกว่า CMS
ความคิดเรื่อง trade-off ระหว่าง static generator กับ CMS สำหรับเว็บ developer ส่วนตัว
อ่านเพิ่ม →Astro 5: ใช้ entry.id แทน entry.slug ใน Content Collections
Astro 5 เปลี่ยน API — entry.slug ถูกลบออก ใช้ entry.id แทนสำหรับ glob loader
อ่านเพิ่ม →