Tạo và chạy một dự án VitePress

VitePress là gì?

VitePress là một trình tạo trang web tĩnh dựa trên Vite, được thiết kế đặc biệt để viết tài liệu. VitePress được thúc đẩy bởi Vue, mang lại tốc độ xây dựng và trải nghiệm phát triển cực kỳ nhanh chóng. Nó cung cấp một API đơn giản nhưng mạnh mẽ, giúp tạo và duy trì tài liệu trở nên rất dễ dàng.

Các tính năng và lợi ích chính của VitePress

• Trải nghiệm phát triển nhanh chóng: VitePress sử dụng Vite như công cụ xây dựng cơ bản, cung cấp cập nhật nhanh và tốc độ xây dựng nhanh chóng.
• Cấu hình đơn giản: Với tệp cấu hình đơn giản, người dùng có thể nhanh chóng thiết lập và tùy chỉnh trang web tài liệu của mình.
• Mở rộng Markdown mạnh mẽ: Hỗ trợ các thành phần Vue và plugin Markdown tùy chỉnh, làm cho việc viết tài liệu trở nên linh hoạt và mạnh mẽ hơn.
• Tối ưu hóa SEO tích hợp: Tạo bản đồ trang web tự động và cấu trúc HTML tối ưu, nâng cao độ thân thiện với công cụ tìm kiếm.
• Kích thước gói nhỏ: Sử dụng công nghệ Tree-shaking, các tệp tĩnh được tạo ra rất nhỏ, tải nhanh.

Sử dụng VitePress có thể giúp các nhà phát triển nhanh chóng xây dựng trang web tài liệu hiệu suất cao.

Sử dụng ServBay để tạo và chạy dự án VitePress

Trong bài viết này, chúng ta sẽ sử dụng môi trường Node.js do ServBay cung cấp để tạo và chạy một dự án VitePress. Chúng ta sẽ sử dụng tính năng Host của ServBay để thiết lập máy chủ web và thông qua proxy ngược và dịch vụ tệp tĩnh để truy cập dự án.

Tạo dự án VitePress

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

   Đầu tiên, hãy đảm bảo bạn đã cài đặt môi trường Node.js do ServBay cung cấp. Sau đó, sử dụng các lệnh sau để khởi tạo một dự án VitePress mới:

   cd /Applications/ServBay/www
   mkdir servbay-vitepress-app
   cd servbay-vitepress-app
   npm add -D vitepress
   npx vitepress init

   Nhập thông tin dự án theo hướng dẫn và chọn các tùy chọn khác theo nhu cầu:

    ┌  Welcome to VitePress!
    │
    ◇  Where should VitePress initialize the config?
    │  ./docs
    │
    ◇  Site title:
    │  ServBay VitePress Demo
    │
    ◇  Site description:
    │  A ServBay VitePress Demo Site
    │
    ◇  Theme:
    │  Default Theme
    │
    ◇  Use TypeScript for config and theme files?
    │  Yes
    │
    ◇  Add VitePress npm scripts to package.json?
    │  Yes
    │
    └  Done! Now run npm run docs:dev and start writing.

Sửa đổi nội dung dự án VitePress

1. Chỉnh sửa tệp docs/index.md

   Mở tệp docs/index.md, chỉnh sửa nội dung để trang web hiện "Hello ServBay!"

   # Hello ServBay!
   
   Chào mừng bạn sử dụng ServBay để chạy trang web tài liệu VitePress.

Vào chế độ phát triển

1. Chạy máy chủ phát triển

   Khởi động máy chủ phát triển và chỉ định cổng (ví dụ: 8585):

   npm run docs:dev -- --port 8585

   Điều này sẽ start một máy chủ phát triển cục bộ và mở cổng 8585.

2. Cấu hình ServBay reverse proxy

   Sử dụng tính năng Host của ServBay, thông qua reverse proxy để truy cập máy chủ phát triển. Trong cài đặt Host của ServBay, thêm một proxy ngược mới:

   • Tên: My first VitePress dev site
   • Tên miền: servbay-vitepress-test.dev
   • Loại host: Reverse Proxy
   • IP: 127.0.0.1
   • Cổng: 8585

   Các bước cấu hình chi tiết, tham khảo thêm trang web phát triển Nodejs.

3. Truy cập vào chế độ phát triển

   Mở trình duyệt, truy cập https://servbay-vitepress-test.dev để xem dự án theo thời gian thực. Vì ServBay hỗ trợ tên miền tùy chỉnh và chứng chỉ SSL miễn phí, bạn sẽ được hưởng độ bảo mật cao hơn.

Xây dựng phiên bản sản phẩm

1. Xây dựng phiên bản sản phẩm

   Khi hoàn thành phát triển, sử dụng lệnh sau để xây dựng phiên bản sản phẩm:

   npm run docs:build

   Sau khi xây dựng xong, các tệp tĩnh sẽ nằm trong thư mục docs/.vitepress/dist.

2. Thiết lập dịch vụ tệp tĩnh

   Sử dụng tính năng Host của ServBay, thông qua dịch vụ tệp tĩnh để truy cập phiên bản sản phẩm. Trong cài đặt Host của ServBay, thêm một trang web tĩnh mới:

   • Tên: My first VitePress production site
   • Tên miền: servbay-vitepress-test.prod
   • Loại host: Static
   • Thư mục gốc của trang web: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Truy cập vào chế độ sản phẩm

   Mở trình duyệt, truy cập https://servbay-vitepress-test.prod để xem phiên bản sau khi xây dựng. Với tên miền tùy chỉnh và chứng chỉ SSL miễn phí của ServBay, trang web của bạn sẽ có độ bảo mật và tin cậy cao hơn.

Chạy ở chế độ Clean URLs

Nếu VitePress của bạn chạy ở chế độ Clean URLs (tức là cleanUrls: true), hãy cấu hình như sau tại Host của ServBay:

• Tên: My first VitePress production site
• Tên miền: servbay-vitepress-test.prod
• Cấu hình tùy chỉnh: Đánh dấu
• Cấu hình Caddy:

encode zstd gzip
import set-log servbay-vitepress-test.prod

tls internal

try_files {path} {path}/ {path}.html

root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

file_server

Sau khi lưu, bạn có thể truy cập VitePress mà không cần .html. Ví dụ https://servbay-vitepress-test.prod/path

Bằng cách thực hiện các bước trên, bạn đã tạo và chạy thành công một dự án VitePress, và sử dụng các tính năng của ServBay để quản lý và truy cập dự án của mình.