Ship trang Astro đầu tiên của bạn

Tại sao Astro

Astro mặc định ship zero JavaScript. Nội dung của bạn render thành HTML thuần trên server, và các island tương tác chỉ hydrate ở nơi bạn yêu cầu. Với một trang cá nhân nặng nội dung — blog, research, galleries — đó chính là sự đánh đổi bạn muốn.

Con đường 45 phút

1. npm create astro@latest — chọn template blog, TypeScript strict.
2. Định nghĩa content collection trong src/content.config.ts với zod schema.
3. Viết bài .mdx đầu tiên — frontmatter được validate lúc build.
4. Thêm trang [slug].astro với getStaticPaths() + render().
5. Deploy: astro build tạo ra dist/ hoàn toàn tĩnh, host được ở bất cứ đâu.

Islands: phần mọi người hay bỏ lỡ

<Hero client:load />        <!-- hydrate ngay lập tức -->
<Chart client:visible />    <!-- hydrate khi cuộn tới -->
<Comments client:idle />    <!-- hydrate khi browser rảnh -->

Dùng client:visible cho mọi thứ dưới fold. Điểm Lighthouse của bạn sẽ cảm ơn.

Tiếp theo là gì

Thêm i18n với dynamic route [locale] — đó là bài học riêng.