Hướng Dẫn VitePress: Từ Cài Đặt Đến Triển Khai

Giới Thiệu Về VitePress

VitePress là một trình tạo trang tĩnh (SSG) dựa trên Vite và Vue 3. Nó chuyển đổi các tệp Markdown thành HTML tĩnh, cho phép bạn xây dựng một trang web một cách nhanh chóng.

VitePress được sử dụng rộng rãi cho các trang tài liệu. Ví dụ, tài liệu chính thức của Vue.js và Vite đều được xây dựng bằng VitePress.

Ngoài tài liệu, nhiều người cũng sử dụng VitePress để tạo blog cá nhân. Bởi vì nó biến đổi các tệp Markdown thành các trang web, nó cho phép bạn tập trung vào việc tạo nội dung mà không phải lo lắng quá nhiều về các chi tiết kỹ thuật.

Sự Khác Biệt Giữa VitePress và VuePress

Mặc dù tên chỉ khác nhau một chữ cái, VitePress và VuePress lại khá khác biệt.

VuePress là một trình tạo trang tĩnh được phát hành trước đó bởi nhóm Vue, được thiết kế đặc biệt cho Vue 2.x. Ngược lại, VitePress được thiết kế dành riêng cho Vue 3.x.

Khi Vue 3 đã trở thành tiêu chuẩn, hiện tại đã được khuyến nghị sử dụng phiên bản mới nhất của VitePress để tận hưởng một hệ sinh thái và hỗ trợ cộng đồng tích cực hơn.

Khởi Đầu Nhanh

Thực hiện các lệnh sau để tạo một dự án VitePress mới:

Copy

# Tạo một thư mục dự án mới và vào đó
mkdir vitepress-blog && cd vitepress-blog

# Thêm VitePress
npm add -D vitepress@next

# Chạy trình hướng dẫn khởi tạo
npx vitepress init

Sau khi chạy các lệnh trên, VitePress sẽ hướng dẫn bạn qua việc cấu hình cơ bản với một loạt câu hỏi, chẳng hạn như vị trí nội dung của bạn, tiêu đề trang web và giao diện. Đối với người mới bắt đầu, bạn có thể đơn giản nhấn Enter để chấp nhận các tùy chọn mặc định cho tất cả câu hỏi.

Copy

┌  Chào mừng bạn đến với VitePress!
│
◇  VitePress nên khởi tạo cấu hình ở đâu?
│  ./
│
◇  VitePress nên tìm các tệp markdown của bạn ở đâu?
│  ./
│
◇  Tiêu đề trang web:
│  Dự Án Tuyệt Vời Của Tôi
│
◇  Mô tả trang web:
│  Một Trang VitePress
│
◇  Giao diện:
│  Giao diện Mặc Định
│
◇  Sử dụng TypeScript cho cấu hình và tệp giao diện?
│  Có
│
◇  Thêm các tập lệnh npm VitePress vào package.json?
│  Có
│
◇  Thêm một tiền tố cho các tập lệnh npm VitePress?
│  Có
│
◇  Tiền tố cho các tập lệnh npm VitePress:
│  docs
│
└  Hoàn tất! Bây giờ hãy chạy npm run docs:dev và bắt đầu viết.

Sau khi hoàn tất trình hướng dẫn, dự án của bạn đã được khởi tạo. Cấu trúc thư mục dự án của bạn sẽ trông như sau:

Copy

.
├── .vitepress
│   └── config.mts  # Tệp cấu hình VitePress
├── api-examples.md
├── markdown-examples.md
├── index.md      # Trang chính của trang web
└── package.json

Chạy lệnh sau để khởi động máy chủ phát triển:

Copy

npm run docs:dev

Truy cập http://localhost:5173 trong trình duyệt của bạn, và bạn sẽ thấy trang VitePress của mình.

Thêm Bài Viết Đầu Tiên

Tạo một tệp Markdown mới trong thư mục gốc, ví dụ, my-first-post.md. Viết một số nội dung trong đó:

Copy

---
title: "Bài Viết Đầu Tiên Của Tôi"
date: 2025-09-21
---

# Xin Chào, VitePress!

Đây là bài viết đầu tiên trên blog cá nhân của tôi.

@Được tạo bằng VitePress

Sau khi viết bài, bạn sẽ nhận thấy rằng nó không xuất hiện trên trang của bạn. Điều này là do VitePress không tự động phát hiện thay đổi tệp để cập nhật điều hướng. Bạn cần cập nhật thủ công tệp cấu hình để thêm bài viết vào VitePress.

Mở tệp .vitepress/config.mts, tìm tùy chọn cấu hình sidebar, và thêm bài viết mới của bạn:

Copy

import { defineConfig } from 'vitepress';

export default defineConfig({
  // ... các cấu hình khác
  themeConfig: {
    // ... các cấu hình giao diện khác
    sidebar: [
      {
        text: 'Bài Viết Của Tôi', // Đây là tiêu đề nhóm
        items: [{ text: 'Bài Viết Đầu Tiên Của Tôi', link: '/my-first-post' }],
      },
    ],
  },
});

Sau khi lưu tệp, làm mới trang trình duyệt. Bạn sẽ thấy liên kết đến bài viết của mình trong thanh bên. Nhấp vào nó để xem bài viết mới của bạn.

Có cách nào để tự động cập nhật thanh bên không?

Việc cập nhật thanh bên thủ công mỗi khi bạn tạo một bài viết mới có thể tẻ nhạt. Tuy nhiên, hiện tại không có giải pháp tự động hóa nào được cung cấp bởi nhóm chính thức.

Bạn có thể sử dụng các plugin cộng đồng để giải quyết vấn đề này, chẳng hạn như VitePress Sidebar.

Cách Thay Đổi Trang Chính?

Trang chính mặc định nằm ở index.md. Tuy nhiên, nội dung của nó có vẻ khá kỳ lạ: nó dường như chỉ bao gồm một loạt các cấu hình, mà không có Markdown hay HTML.

Làm thế nào mà một khối cấu hình trở thành một toàn bộ trang web?

Trang chính thực sự được tạo ra bởi giao diện VitePress. Trang web mà chúng ta tạo ra bằng cấu hình mặc định cũng bao gồm một giao diện.

Khi bạn chỉ định layout: home trong Frontmatter (khu vực cấu hình ở đầu tệp) của index.md, VitePress sẽ sử dụng mẫu trang chính tích hợp của giao diện để kết xuất trang. Tiêu đề, câu slogan, nút và các nội dung khác cần thiết cho mẫu đều được lấy từ các trường hero, actions và các trường khác mà bạn cấu hình trong index.md.

Cách trực tiếp nhất để thay đổi kiểu dáng của trang chính là thay đổi hoặc tùy chỉnh giao diện của trang web.

Bạn có thể viết lại trang chính hoàn toàn hoặc sử dụng một giao diện do cộng đồng cung cấp. Bạn có thể tìm thấy nhiều giao diện cộng đồng trong các danh sách "tuyệt vời" như Awesome VitePress.

Cách Làm Giàu Thêm Cho Blog Của Bạn?

Khi bạn đã thiết lập cơ bản, bạn có thể tiếp tục học để làm cho blog của mình phong phú và cá nhân hóa hơn theo những cách sau:

Học Vue.js: Bằng cách học Vue, bạn có thể tạo các thành phần tùy chỉnh trong các tệp Markdown của mình để làm phong phú nội dung web, chẳng hạn như biểu đồ, trượt hình, hoặc thậm chí các ứng dụng phức tạp hơn.
Nghiên cứu Tài Liệu VitePress: Dành thời gian để đọc tài liệu chính thức để biết cách cấu hình thanh điều hướng, chân trang, quốc tế hóa (i18n), và cách tận dụng tối đa các mở rộng Markdown tích hợp.
Khám Phá Các Giao Diện và Plugin Cộng Đồng: Bằng cách sử dụng các giao diện và plugin được đóng góp bởi các nhà phát triển cộng đồng, chẳng hạn như những cái tìm thấy trong Awesome VitePress, bạn có thể nhanh chóng thêm các tính năng và kiểu dáng nâng cao cho blog của mình.

Triển Khai Trang Web VitePress Của Bạn

Bây giờ blog của bạn đã được thiết lập, đã đến lúc triển khai nó trực tuyến để chia sẻ với bạn bè và thế giới.

Khuyến nghị sử dụng Leapcell cho việc triển khai.

Leapcell là một nền tảng lưu trữ ứng dụng web cung cấp giao diện rất đơn giản và dễ sử dụng, cho phép bạn triển khai trang VitePress của mình trực tuyến chỉ trong vài bước đơn giản.

Ngoài ra, Leapcell có tính năng Phân Tích Lưu Lượng Tích Hợp, rất tiện lợi để xem thông tin truy cập trang web của bạn, chẳng hạn như tần suất truy cập của người dùng và nguồn gốc người dùng, giúp bạn hiểu rõ hơn về độc giả của mình.

Các Bước Triển Khai Cụ Thể

Trong thư mục gốc của dự án, tạo một tệp có tên Caddyfile với nội dung sau:
Copy
```
:8080 {
  root * ./.vitepress/dist
  file_server
}
```
Cam kết dự án của bạn lên GitHub. Bạn có thể tham khảo tài liệu chính thức của GitHub để biết các bước. Leapcell sẽ kéo mã từ kho GitHub của bạn sau này.
Nhấp vào "Tạo Dịch Vụ" trên trang Leapcell.

Chọn "nodejs20" làm runtime, và điền các trường triển khai:

Lệnh Xây Dựng:

Copy

apt update && apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | tee /etc/apt/sources.list.d/caddy-stable.list
chmod o+r /usr/share/keyrings/caddy-stable-archive-keyring.gpg
chmod o+r /etc/apt/sources.list.d/caddy-stable.list
apt update && apt install -y caddy

npm install && npm run docs:build

Lệnh Khởi Động:

Copy

caddy run

Cổng: 8080

Nhấp vào "Gửi" ở dưới cùng để triển khai. Việc triển khai sẽ hoàn tất nhanh chóng và đưa bạn trở lại trang chủ triển khai. Tại đây chúng ta có thể thấy rằng Leapcell đã cung cấp một miền. Đây là địa chỉ trực tuyến của blog của bạn.

Bây giờ bạn đã có một blog có thể truy cập trực tuyến. Hãy cho bạn bè xem nhé!

Theo dõi chúng tôi trên X: @LeapcellHQ

Đọc trên blog của chúng tôi

Bài Viết Liên Quan:

Cách Lưu Trữ Dự Án Golang Miễn Phí (Ví Dụ Gin)
Cách Lưu Trữ Dự Án Rust Trên Đám Mây Miễn Phí
Cách Chạy Puppeteer Trên Đám Mây Miễn Phí: So Sánh Các Giải Pháp
Giải Pháp Tốt Nhất Thay Thế Vercel Để Lưu Trữ Dự Án Next.js

Hướng Dẫn VitePress: Từ Cài Đặt Đến Triển Khai

Giới Thiệu Về VitePress

Sự Khác Biệt Giữa VitePress và VuePress

Khởi Đầu Nhanh

Thêm Bài Viết Đầu Tiên

Có cách nào để tự động cập nhật thanh bên không?

Cách Thay Đổi Trang Chính?

Cách Làm Giàu Thêm Cho Blog Của Bạn?

Triển Khai Trang Web VitePress Của Bạn

Các Bước Triển Khai Cụ Thể

Bình luận