Làm quen với Astro - Static Site Generator thế hệ mới

Astro là một framework mới nổi trong thế giới web development, đặc biệt phù hợp với các trang web tĩnh (static site). Nó được thiết kế để giúp bạn xây dựng website nhanh hơn, nhẹ hơn và dễ dàng tích hợp với nhiều framework khác như React, Vue, Svelte…

Table of contents

Vì sao chọn Astro?

Gần như không cần JavaScript

Một điểm nổi bật của Astro là khả năng loại bỏ hoàn toàn JavaScript khỏi client nếu không cần thiết. Điều này giúp trang tải nhanh hơn, nhẹ hơn và cải thiện hiệu suất đáng kể.

Khả năng kết hợp framework

Bạn có thể sử dụng các component từ React, Vue, Svelte hay Solid trong cùng một project Astro. Điều này đặc biệt hữu ích nếu bạn đang chuyển dần từ hệ thống cũ hoặc muốn thử nghiệm nhiều công nghệ.

Built-in Markdown và MDX

Astro hỗ trợ viết nội dung bằng Markdown và MDX một cách tự nhiên, rất lý tưởng cho blog, documentation hoặc bất kỳ trang nội dung nào.

Cấu trúc một dự án Astro

Một project Astro cơ bản sẽ có các thư mục chính như:

• src/pages: Nơi chứa các route và page chính.
• src/layouts: Định nghĩa layout dùng chung.
• public: Chứa hình ảnh và tài nguyên tĩnh.
• astro.config.mjs: File cấu hình chính của Astro.

Cài đặt Astro

# Dùng npm
npm create astro@latest

# Hoặc dùng yarn
yarn create astro

# Sau đó làm theo hướng dẫn để chọn template phù hợp.

Triển khai sản phẩm

Astro hỗ trợ build static HTML rất tốt. Sau khi build, bạn có thể dễ dàng deploy lên Vercel, Netlify, Cloudflare Pages hoặc bất kỳ hosting tĩnh nào khác.

npm run build

Khi nào nên dùng Astro?

• Khi bạn cần một website nhẹ, tốc độ cao.
• Khi nội dung chính là tĩnh: blog, documentation, portfolio…
• Khi bạn muốn tận dụng UI component từ nhiều framework khác nhau.

Tổng kết

Astro là một lựa chọn đáng cân nhắc nếu bạn đang tìm kiếm một giải pháp hiện đại để xây dựng website tĩnh. Nó đơn giản, dễ học, và rất linh hoạt.

🔗 Tham khảo thêm tại: https://astro.build