Introduction to VitePress
VitePress là một công cụ tạo trang web tĩnh (Static Site Generator - SSG) thế hệ mới được phát triển trên nền tảng Vite và Vue 3. Đây là phiên bản hiện đại, gọn nhẹ và tối ưu hơn của VuePress.
1. Why VitePress for Hackathon 2026?
Trong môi trường hackathon đòi hỏi tốc độ phát triển và triển khai cực nhanh, VitePress mang lại nhiều lợi thế:
- Tốc độ khởi động (Cold Start) tức thì: Nhờ sử dụng Vite để biên dịch mã nguồn theo dạng Native ESM trong môi trường dev.
- Trải nghiệm Single Page App (SPA): Sau khi trang đầu tiên tải xong, các lượt chuyển trang tiếp theo diễn ra ngay lập tức nhờ cơ chế pre-fetching các trang liên kết.
- Hỗ trợ tối đa Markdown: Bạn có thể viết tài liệu bằng cú pháp Markdown đơn giản và chèn thêm các component Vue trực tiếp trong file
.md. - Giao diện mặc định đẹp mắt: Tích hợp sẵn thanh tìm kiếm (Search), chế độ Dark Mode chuyển đổi mượt mà, thanh điều hướng (Navbar) và thanh bên (Sidebar) đáp ứng tốt trên di động.
2. Directory Structure of VitePress Project
Một cấu trúc tối giản của dự án VitePress bao gồm:
hanoi-docs/
├── package.json # Khai báo dependency (vitepress)
└── docs/ # Chứa toàn bộ nội dung markdown
├── .vitepress/ # Thư mục cấu hình đặc biệt
│ └── config.js # Tập tin cấu hình chính (Routing, Sidebar, Navbar)
├── index.md # Trang chủ (Homepage)
└── introduction.md # Trang giới thiệu này3. How it Works & Local Development
Bạn có thể chạy các lệnh sau từ thư mục hanoi-docs để phát triển:
Khởi chạy môi trường Dev cục bộ:
npm run docs:devLệnh này sẽ khởi chạy một máy chủ cục bộ (thường là http://localhost:5173) giúp bạn xem trước trực tiếp các thay đổi khi sửa file Markdown (Hot Module Replacement).
Biên dịch dự án:
npm run docs:buildVitePress sẽ biên dịch toàn bộ các file .md thành các file HTML tĩnh được tối ưu hóa cùng mã CSS/JS tại thư mục docs/.vitepress/dist. Thư mục dist này chính là tài nguyên sẽ được deploy lên Cloudflare Pages.