Skip to content
Công Thức & Docs Cá Nhân - Duy

Cài đặt Astro Local

Cài đặt Astro Local

Section titled “Cài đặt Astro Local”

Astro là một static site generator hiện đại, tập trung vào performance và developer experience. Bài viết này hướng dẫn chi tiết cách cài đặt Astro trên máy tính local của bạn.

Yêu cầu hệ thống

Section titled “Yêu cầu hệ thống”

Trước khi cài đặt Astro, bạn cần đảm bảo máy tính đã có:

  • Node.js phiên bản 18.14.1 trở lên
  • npm (đi kèm với Node.js)
  • Một code editor (VS Code khuyến nghị)

Cách 1: Tạo project mới với CLI

Section titled “Cách 1: Tạo project mới với CLI”

Đây là cách đơn giản nhất để bắt đầu với Astro.

Bước 1: Chạy lệnh tạo project

Section titled “Bước 1: Chạy lệnh tạo project”
Terminal window
# Tạo project mới
npm create astro@latest my-astro-project


# Hoặc dùng yarn
yarn create astro my-astro-project


# Hoặc dùng pnpm
pnpm create astro@latest my-astro-project

Bước 2: Trả lờI các câu hỏi

Section titled “Bước 2: Trả lờI các câu hỏi”

CLI sẽ hỏi bạn một số câu hỏi:

Câu hỏiGợi ý
How would you like to start?Chọn “A few best practices” cho beginners
Install dependencies?Chọn Yes
Initialize a git repository?Tùy chọn, nên chọn Yes
TypeScript?Nên chọn Yes

Bước 3: Chạy dev server

Section titled “Bước 3: Chạy dev server”
Terminal window
cd my-astro-project
npm run dev

Truy cập http://localhost:4321 để xem kết quả.

💡 Pro Tip
Thêm flag -- --port 3000 để chạy ở port khác nếu 4321 đã bị chiếm:

Terminal window
npm run dev -- --port 3000

Cách 2: Tạo project thủ công

Section titled “Cách 2: Tạo project thủ công”

Nếu muốn hiểu rõ hơn cấu trúc project, bạn có thể tạo thủ công.

Bước 1: Tạo folder và init npm

Section titled “Bước 1: Tạo folder và init npm”
Terminal window
mkdir my-astro-project
cd my-astro-project
npm init -y

Bước 2: Cài đặt Astro

Section titled “Bước 2: Cài đặt Astro”
Terminal window
npm install astro

Bước 3: Tạo cấu trúc thư mục

Section titled “Bước 3: Tạo cấu trúc thư mục”
my-astro-project/
├── src/
│   ├── pages/
│   │   └── index.astro
│   └── components/
├── public/
├── astro.config.mjs
└── package.json

Bước 4: Tạo file cấu hình

Section titled “Bước 4: Tạo file cấu hình”

astro.config.mjs:

import { defineConfig } from 'astro/config';


export default defineConfig({
  // Cấu hình của bạn ở đây
});

Bước 5: Tạo trang đầu tiên

Section titled “Bước 5: Tạo trang đầu tiên”

src/pages/index.astro:

---
const title = "Astro của tôi";
---


<html lang="vi">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
  </head>
  <body>
    <h1>Chào mừng đến với Astro!</h1>
    <p>Đây là trang web đầu tiên của tôi.</p>
  </body>
</html>

Bước 6: Thêm scripts vào package.json

Section titled “Bước 6: Thêm scripts vào package.json”
{
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

Bước 7: Chạy server

Section titled “Bước 7: Chạy server”
Terminal window
npm run dev

Cấu trúc project Astro

Section titled “Cấu trúc project Astro”
my-astro-project/
├── src/                    # Source code
│   ├── components/         # UI components (có thể tái sử dụng)
│   ├── layouts/           # Page layouts
│   ├── pages/             # File-based routing
│   └── content/           # Markdown/MDX content (blog, docs)
├── public/                # Static assets (images, fonts)
├── astro.config.mjs       # Cấu hình Astro
├── tsconfig.json          # Cấu hình TypeScript
└── package.json           # Dependencies

Lệnh npm thường dùng

Section titled “Lệnh npm thường dùng”
LệnhMô tả
npm run devChạy dev server với hot reload
npm run buildBuild cho production
npm run previewPreview build production
npm run astro -- --helpXem tất cả options

Lỗi thường gặp và cách fix

Section titled “Lỗi thường gặp và cách fix”

Lỗi 1: Port đã được sử dụng

Section titled “Lỗi 1: Port đã được sử dụng”
Terminal window
Error: Port 4321 is already in use

Fix:

Terminal window
# Kill process đang dùng port
npx kill-port 4321


# Hoặc chạy ở port khác
npm run dev -- --port 3000

Lỗi 2: “Cannot find module”

Section titled “Lỗi 2: “Cannot find module””

Fix:

Terminal window
# Xóa node_modules và cài lại
rm -rf node_modules package-lock.json
npm install

Lỗi 3: TypeScript errors

Section titled “Lỗi 3: TypeScript errors”

Fix: Cài đặt types:

Terminal window
npm install --save-dev @types/node

Tích hợp với VS Code

Section titled “Tích hợp với VS Code”

Astro có extension chính thức cho VS Code:

  1. Mở Extensions (Ctrl+Shift+X)
  2. Tìm “Astro”
  3. Cài đặt extension của Astro

Extension cung cấp:

  • Syntax highlighting
  • IntelliSense
  • Auto-formatting

Next Steps

Section titled “Next Steps”

Next Steps

Section titled “Next Steps”

Sau khi cài đặt xong, bạn có thể:

  • Học cú pháp Astro (.astro files)
  • Tích hợp React/Vue/Svelte components
  • Thêm Tailwind CSS
  • Deploy lên Vercel/Netlify

Chúc mừng!

Bạn đã cài đặt thành công Astro! Giờ có thể bắt đầu xây dựng website tĩnh siêu nhanh của mình.

Tài liệu tham khảo

Section titled “Tài liệu tham khảo”