Cách cài đặt Astro

Posted on:17 tháng 12, 2022

Astro là một framework có tất cả những thứ bạn cần để xây dựng website một cách nhanh, tiện lợi giúp bạn tập trung vào xây dựng nội dung cho website.

Tìm hiểu thêm tại sao đáng để học và điều gì khiến Astro đặc biệt. ✨

Các yêu cầu

Installation

Dùng create-astro là cách nhanh nhất để cài đặt một dự án Astro. Nó sẽ hỏi bạn từng bước một để cấu hình dự án như bạn mong muốn. Nó còn cho phép chọn một mẫu từ các mẫu đã có sẵn hoặc bạn có thể tự thêm bằng cách thêm --template.

Nếu bạn chỉ muốn thử qua thì có thể dùng astro.new để xem các mẫu có sẵn rồi tạo dự án Astro mới ngay trên trình duyệt.

1. Khởi tạo dự án

Chạy lệnh tương ứng với package manager mà bạn đang dùng, create-astro.

npm

npm create astro@latest

yarn

yarn create astro

create-astro có thể dùng ở bất cứ đâu trên máy tính nên không cần phải tạo thư mục trống trước khi chạy lệnh này. Nó sẽ tự động tạo cho mình.

Khi chạy xong sẽ có thông báo “Ready for liftoff!”. cd vào thư mục Astro vừa tạo và bắt đầu nghịch thôi!

Nếu bạn bỏ qua bước npm install khi chạy create-astro thì phải tự chạy lại trước khi chạy các lệnh khác như start hay build

2. Bắt đầu code ✨

Astro đã hỗ trợ mọi thứ cần thiết để có thể triển khai code của bạn. Câu lệnh astro dev sẽ chạy development server trên máy bạn, lúc này bạn có thể thấy trang web mới của mình.

Các mẫu có sẵn cùng đều sử dụng câu lệnh astro dev. Dùng package manager tương ứng để chạy câu lệnh này.

npm

npm run dev

yarn

yarn run dev

Nếu mọi thứ đều ok, bạn sẽ thấy website mới của mình bằng cách truy cập http://localhost:3000

Astro sẽ lắng nghe các thay đổi trong thư mục src/, vì thế bạn không cần khởi động lại development server để xem các thay đổi.

Nếu bạn không vào được, quay lại chỗ bạn chạy lệnh dev và xem nó bảo lỗi gì, nếu không lỗi thì có thể nó đang chạy ở một port khác.

Mọi thứ đã xong.

Tổng kết

Việc tạo mới một dự án Astro cũng khá đơn giản phải không nào. Sau khi thực hiện một vài thay đổi thì bạn có thể chạy lệnh build để có thể triển khai trên cloud nếu bạn muốn

npm

npm run build

yarn

yarn run build

Một thư mục mới là dist sẽ được tạo ra và trong này chính là trang web bạn vừa tạo ra. Ném nó lên cloud thôi nào 😎

Trong các bài viết tiếp theo, mình sẽ hướng dẫn các cấu hình bổ sung để có thể có một dự án Astro hoàn hảo.

Chúc bạn thành công!