Website Astro thông qua Claude Code: Từ thư mục đến xuất bản

Ngay cả người chưa từng viết một dòng mã nào cũng có thể tạo website bằng Astro thông qua Claude Code. Tôi đã ngừng tự viết mã từ lâu; tôi làm mọi thứ bằng lời nói thông qua AI, và việc tạo website bằng Astro cũng hoạt động y hệt: bạn giải thích điều mình cần, Claude sẽ viết mã cho bạn.

Vấn đề thường không nằm ở bản thân việc xây dựng website, mà ở chỗ quy trình bị chia thành nhiều phần. Một bài viết giải thích cách cài đặt, bài khác nói về các lệnh, bài thứ ba nói về xuất bản, còn toàn bộ quy trình thì không bao giờ kết nối thành một bức tranh hoàn chỉnh trong đầu bạn. Ở đây, tôi sẽ hướng dẫn bạn từ một thư mục trống đến một website có thể mở trên internet bằng liên kết: cần cài đặt gì, dùng lệnh nào để bắt đầu dự án, cách tạo trang bằng Claude Code và cách xuất bản miễn phí. Tôi dựa trên tài liệu chính thức của Astro.

Thông tin về cách sử dụng dịch vụ — trong tài liệu Ailoot.

Cần chuẩn bị gì trước khi bắt đầu?#

Astro không yêu cầu bạn tải trước bất cứ thứ gì — lệnh ở bước tiếp theo sẽ tải nó về. Nhưng bạn cần môi trường để chạy mọi thứ. Astro mô tả việc bắt đầu như sau — bạn cần ba thứ:

Hãy cùng xem từng thứ này có ý nghĩa gì trong thực tế:

1. Node.js — chương trình cần thiết để chạy Astro và hầu hết các công cụ vibe-coding. Tải xuống từ nodejs.org và cài đặt như một ứng dụng thông thường. Số phiên bản trong tài liệu sẽ tăng theo thời gian, vì vậy trước khi bắt đầu, hãy truy cập trang cài đặt Astro và kiểm tra yêu cầu. Bạn cần phiên bản số chẵn (22, 24); tốt nhất nên tránh phiên bản số lẻ (23, 25).
2. VS Code — trình soạn thảo miễn phí của Microsoft. Bạn mở thư mục dự án trong đó, và Claude Code cũng hoạt động tại đây; công cụ sẽ viết mã.
3. Terminal — cửa sổ để nhập lệnh. Bạn không cần cài riêng: có thể mở terminal từ menu trong VS Code, và nhập tất cả các lệnh bên dưới tại đó.

Nếu bạn đã cài Claude Code và từng tạo bất cứ thứ gì, thì bạn đã có tất cả những thứ này và có thể bỏ qua bước này. Nếu chưa, tôi có hướng dẫn riêng về cách cài Claude Code.

Tạo dự án Astro bằng một lệnh như thế nào?#

Đây là lúc bắt đầu tạo dự án, và bạn chỉ cần một lệnh. Mở terminal và nhập:

npm create astro@latest

Trình hướng dẫn cài đặt sẽ khởi chạy. Tài liệu mô tả như sau:

Trình hướng dẫn sẽ đưa bạn qua các bước và hỏi một vài câu: đặt tên thư mục dự án là gì, bắt đầu bằng mẫu nào và có cài dependencies ngay không. Bạn có thể chọn các tùy chọn mặc định cho mọi câu hỏi — mẫu trống hoặc tối giản sẽ phù hợp cho website đầu tiên. Nếu bạn trả lời “no” cho câu hỏi về cài dependencies, hãy cài chúng thủ công sau bằng lệnh npm install bên trong thư mục dự án.

Khi hoàn tất, trình hướng dẫn sẽ cho biết dự án đã được tạo và đề xuất bước tiếp theo — chuyển vào thư mục dự án:

cd your-project-name

Chỉ vậy là đủ để tạo dự án. Bên trong đã có khung website hoạt động được: một số tệp và thư mục dùng để xây dựng trang. Bạn không cần tự chỉnh sửa chúng, nhưng biết vị trí của từng thứ sẽ hữu ích. Astro chỉ yêu cầu bắt buộc một thư mục:

Nói cách khác, src/pages là thư mục chứa các trang của website: trang chủ, trang “về chúng tôi” và trang liên hệ. src/components (các thành phần có thể dùng lại như đầu trang và nút), src/layouts (khung trang dùng chung) và thư mục public dành cho hình ảnh và tệp thường nằm gần đó. Bạn không cần ghi nhớ toàn bộ cấu trúc — chỉ cần nhớ các trang nằm trong src/pages và nhắc đến thư mục này khi yêu cầu Claude: “thêm trang liên hệ”.

Tạo chính website bằng Claude Code như thế nào?#

Khung dự án đã sẵn sàng; giờ bạn sẽ xây dựng website từ đó và Claude Code sẽ đảm nhiệm việc này. Mở thư mục dự án trong VS Code, khởi chạy Claude Code và mô tả bằng lời những gì bạn cần. Công cụ sẽ tự chỉnh sửa các tệp trong src/pages và những thư mục lân cận — bạn chỉ cần giao việc và xem kết quả.

Theo kinh nghiệm của tôi, làm từng bước nhỏ sẽ hiệu quả nhất. Một yêu cầu lớn như “làm cho tôi một website công ty” thường tạo ra một mớ hỗn độn khó sửa. Vì vậy, hãy chia công việc thành các nhiệm vụ ngắn, rõ ràng và lần lượt giao từng nhiệm vụ:

1. “Tạo trang chủ: một tiêu đề lớn, vài câu về công việc của tôi và nút liên kết đến trang liên hệ.”
2. “Thêm trang dịch vụ với danh sách gồm ba mục.”
3. “Thêm trang liên hệ có số điện thoại và liên kết đến Telegram.”
4. “Đổi kiểu trình bày: nền sáng và phông chữ lớn, dễ đọc.”

Kiểm tra từng bước trước khi tiếp tục — như vậy bạn sẽ dễ phát hiện lỗi và quay lại hơn. Lý do các nhiệm vụ nhỏ đáng tin cậy hơn và cách giữ AI đi đúng hướng là một phần của context engineering: nhiệm vụ và cấu trúc dự án càng rõ ràng thì kết quả càng dễ dự đoán.

Astro cung cấp cho AI một cấu trúc thuận tiện: nội dung trang tách biệt với kiểu dáng, và các trang được xây dựng theo những quy tắc chung. Với cấu trúc này, Claude ít nhầm lẫn hơn và ít có khả năng làm hỏng phần lân cận khi chỉnh sửa một chỗ. Nếu Claude đột nhiên không còn nhìn thấy tệp của bạn hoặc trả lời không liên quan, hãy xem hướng dẫn về lý do Claude Code không thể nhìn thấy các tệp dự án.

Astro chỉ là một thành phần trong cách làm việc với AI. Để giúp Claude luôn xây dựng đúng thứ bạn cần mà không quay lại những phỏng đoán nghe có vẻ hợp lý.

Xem trước website trước khi xuất bản như thế nào?#

Trước khi giới thiệu website cho mọi người, bạn có thể xem trước trên máy tính của mình. Astro có máy chủ phát triển để làm việc này — máy chủ hiển thị website trực tiếp trên máy tính. Khởi chạy bằng lệnh trong terminal, bên trong thư mục dự án:

npm run dev

Astro sẽ khởi chạy bản xem trước cục bộ và in địa chỉ ra terminal. Theo mặc định, địa chỉ là localhost:4321. Sao chép địa chỉ, mở trong trình duyệt và bạn sẽ thấy website. Lúc này, chỉ bạn mới mở được địa chỉ này — người bên ngoài không thể truy cập; đây là bản nháp của bạn.

Điểm tiện lợi là bản xem trước được cập nhật trực tiếp: Claude chỉnh sửa tệp, trang trong trình duyệt tự cập nhật; bạn không cần tải lại thủ công. Mọi việc diễn ra nhanh chóng — yêu cầu Claude, xem trong trình duyệt, sửa lại, xem tiếp, và đây là giai đoạn bạn hoàn thiện website. Khi hài lòng với kết quả, hãy xuất bản website lên mạng.

Xuất bản website Astro lên mạng miễn phí như thế nào?#

Bạn cần đặt website đã hoàn thiện ở đâu đó để người khác có thể mở bằng liên kết. Cách miễn phí dễ nhất là thông qua GitHub: trước tiên tải mã dự án lên repository, sau đó kết nối với một dịch vụ hosting có thể build và xuất bản website. Trình tự như sau:

1. Tạo repository trên GitHub. Repository là nơi lưu trữ mã trực tuyến để bạn gửi các tệp dự án lên đó. Claude Code có thể giúp bằng chỉ dẫn ngôn ngữ tự nhiên: yêu cầu “tải dự án lên một repository GitHub mới”, rồi công cụ sẽ gợi ý các lệnh. Nếu bạn chưa từng dùng GitHub, hãy chuẩn bị sẵn hướng dẫn đăng ký và đăng nhập.
2. Kết nối hosting. Truy cập một trong các dịch vụ (Netlify, Vercel), đăng nhập bằng tài khoản GitHub và chọn repository của bạn. Tài liệu Astro mô tả phương thức này như sau: dịch vụ hosting theo dõi repository, build website và xuất bản website.
3. Kiểm tra cài đặt build. Thông thường dịch vụ hosting sẽ nhận diện Astro và tự điền các thông tin cần thiết. Nếu dịch vụ yêu cầu bạn nhập thủ công, lệnh build trong tài liệu là astro build (hoặc npm run build), còn website hoàn thiện được đặt trong thư mục dist.
4. Nhấp “Publish”. Dịch vụ sẽ build website và cung cấp liên kết như site-name.netlify.app. Bất kỳ ai cũng có thể mở website tại địa chỉ đó.

Đây là nguyên văn tài liệu nói về việc kết nối repository với dịch vụ hosting:

Sau đó, việc xuất bản sẽ tự động: gửi thay đổi mới lên repository, website được build lại và tự cập nhật; bạn không cần nhấp thêm gì nữa.

Ngoài ra còn có một lựa chọn miễn phí thứ hai — GitHub Pages, nơi website được xuất bản trực tiếp từ repository bằng các công cụ của GitHub. Astro có sẵn một mẫu khởi đầu chính thức cho dịch vụ này:

Với lựa chọn này, website sẽ mở tại địa chỉ như your-name.github.io/repository-name, và sau đó bạn có thể kết nối tên miền riêng. Bạn cũng có thể thiết lập bằng Claude Code: mô tả nhiệm vụ bằng lời, và công cụ sẽ chuẩn bị tệp cần thiết.

Tạo một website Astro tốn bao nhiêu tiền?#

Giờ hãy nói về chi phí. Astro là công cụ miễn phí, mã nguồn mở; không có mức giá riêng. Các dịch vụ hosting cơ bản cũng có gói miễn phí: GitHub Pages cùng các gói khởi đầu của Netlify và Vercel, thường đủ dùng cho một website Astro nhẹ (gói miễn phí có giới hạn lưu lượng truy cập, nhưng thường vẫn đủ cho website giới thiệu doanh nghiệp hoặc landing page đơn giản).

Trên thực tế, có hai thứ bạn có thể phải trả tiền, và đôi khi cũng không cần trả. Thứ nhất là công cụ AI bạn dùng để tạo website. Thứ hai là tên miền riêng thay cho địa chỉ như name.netlify.app; đây là tùy chọn và chi phí hằng năm không cao. Bạn có thể hoàn thành quy trình “tạo website và xuất bản lên mạng” chỉ với khoản phí dành cho Claude.

Mọi người còn hỏi gì về website Astro và Claude Code?#

Tìm hiểu về Ailoot.