เริ่มต้นกับ Astro: คู่มือสำหรับมือใหม่
เรียนรู้วิธีการเริ่มต้นใช้งาน Astro framework ที่ทรงพลังสำหรับการสร้างเว็บไซต์สมัยใหม่
เริ่มต้นกับ Astro: คู่มือสำหรับมือใหม่
Astro เป็น framework ที่ได้รับความนิยมสำหรับการสร้างเว็บไซต์ที่รวดเร็วและทันสมัย ในบทความนี้เราจะมาเรียนรู้วิธีการเริ่มต้นใช้งาน Astro กันครับ
ทำไมต้อง Astro?
Astro มีจุดเด่นหลายประการที่ทำให้เป็นตัวเลือกที่ดีสำหรับนักพัฒนา:
- Zero JavaScript by default: โหลดเร็วเพราะไม่มี JavaScript ไม่จำเป็น
- Component-based: ใช้งานง่ายด้วยระบบ component
- Framework agnostic: ใช้ได้กับ React, Vue, Svelte และอื่นๆ
- Static-first: เน้นการสร้างเว็บไซต์แบบ static ที่เร็ว
การติดตั้ง Astro
เริ่มต้นด้วยการสร้างโปรเจ็กต์ใหม่:
npm create astro@latest my-astro-site
cd my-astro-site
npm install
npm run devโครงสร้างโปรเจ็กต์
โปรเจ็กต์ Astro มีโครงสร้างที่เข้าใจง่าย:
src/
├── components/ # คอมโพเนนต์ต่างๆ
├── layouts/ # เลย์เอาต์สำหรับหน้าเว็บ
├── pages/ # หน้าเว็บไซต์
└── styles/ # ไฟล์ CSSการสร้างหน้าแรก
สร้างไฟล์ src/pages/index.astro:
---
// Frontmatter - JavaScript/TypeScript code
const title = "ยินดีต้อนรับสู่ Astro";
---
<html>
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<p>นี่คือหน้าแรกของเว็บไซต์ Astro</p>
</body>
</html>การใช้งาน Components
สร้าง component ใน src/components/Button.astro:
---
export interface Props {
text: string;
variant?: 'primary' | 'secondary';
}
const { text, variant = 'primary' } = Astro.props;
---
<button class={`btn btn-${variant}`}>
{text}
</button>
<style>
.btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 0.25rem;
cursor: pointer;
}
.btn-primary {
background: #3b82f6;
color: white;
}
.btn-secondary {
background: #6b7280;
color: white;
}
</style>การ Deploy
Astro รองรับการ deploy บนหลายแพลตฟอร์ม:
- Netlify:
npm run build && netlify deploy --prod --dir dist - Vercel: ใช้ Vercel CLI หรือ GitHub integration
- Cloudflare Pages: เชื่อมต่อ repository และ auto-deploy
สรุป
Astro เป็น framework ที่ยอดเยียมสำหรับการสร้างเว็บไซต์ที่เร็วและเป็นมิตรกับ SEO ด้วยแนวคิด “Zero JavaScript by default” และความยืดหยุ่นในการใช้งาน framework ต่างๆ ทำให้ Astro เป็นตัวเลือกที่น่าสนใจสำหรับโปรเจ็กต์ต่างๆ
ลองเริ่มต้นสร้างเว็บไซต์ด้วย Astro กันดูครับ!
