Hướng dẫn xây dựng website cá nhân với Astro framework

Astro là framework web hiện đại cho phép xây dựng website tĩnh cực nhanh. Khác với Next.js hay Nuxt, Astro mặc định không gửi JavaScript cho client trừ khi bạn yêu cầu.

Lợi ích:

• Tốc độ tải trang cực nhanh (zero JS mặc định).
• Hỗ trợ đa framework: React, Vue, Svelte, Solid trong cùng project.
• Content collections quản lý bài viết markdown dễ dàng.
• Deploy lên Vercel/Netlify miễn phí.
• Island Architecture chỉ load JS khi cần.

Phù hợp: blog cá nhân, portfolio, documentation site, landing page.

Yêu cầu: Node.js 18+

Bước 1: Khởi tạo project:

npm create astro@latest my-website

Chọn template 'Blog' hoặc 'Starter Kit'.

Bước 2: Cài các integrations cần thiết:

npx astro add tailwind (styling)

npx astro add react (nếu cần component React)

npx astro add sitemap (SEO)

Bước 3: Cấu trúc thư mục:

• src/pages/ chứa các trang .astro và .md
• src/content/ chứa blog posts (markdown)
• src/components/ chứa component tái sử dụng
• public/ chứa static assets

Bước 4: Chạy dev server:

npm run dev

Mở http://localhost:4321 xem kết quả.

Astro Content Collections giúp quản lý bài viết blog với type-safe frontmatter.

Cấu hình collection: Tạo file src/content/config.ts:

import { defineCollection, z } from 'astro:content'

export const collections = { blog: defineCollection({ schema: z.object({ title: z.string(), date: z.date(), tags: z.array(z.string()), draft: z.boolean().optional() }) }) }

Tạo bài viết mới: src/content/blog/bai-viet-dau-tien.md:

---

title: 'Bài viết đầu tiên'

date: 2026-07-13

tags: ['astro', 'web']

---

Nội dung viết bằng markdown hoặc MDX.

Hiển thị danh sách bài viết: Dùng Astro.glob hoặc collection query:

const posts = await getCollection('blog')

posts.sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())

Bước 1: Push code lên GitHub.

Bước 2: Vào vercel.com, import repository.

Bước 3: Vercel tự động phát hiện Astro framework.

Bước 4: Nhấn Deploy.

Sau 1-2 phút, website đã online.

URL mặc định: my-website.vercel.app.

Cấu hình custom domain (tuỳ chọn): Settings > Domains > nhập domain.

Muốn có RSS feed: npx astro add rss.

Muốn có blog search: thêm Pagefind integration.

Tối ưu:

• Dùng astro:assets để tự động tối ưu ảnh.
• Bật View Transitions cho chuyển trang mượt.
• Dùng npm run build để build static site, kiểm tra output ở dist/.