創建並運行 VitePress 專案
什麼是 VitePress？
VitePress 是一個基於 Vite 構建的靜態網站生成器，專為編寫文檔而設計。VitePress 由 Vue 驅動，具有極快的構建速度和開發體驗。它提供了一個簡單而強大的 API，使得創建和維護文檔變得非常容易。
VitePress 的主要特性和優勢
- 快速的開發體驗：VitePress 使用 Vite 作為底層構建工具，提供了極速的熱更新和構建速度。
- 簡單的配置：通過簡單的配置文件，使用者可以快速設定和定制自己的文檔網站。
- 強大的 Markdown 擴展：支持 Vue 元件和自定義 Markdown 插件，使得文檔編寫更加靈活和強大。
- 內建的 SEO 優化：自動生成的站點地圖和優化的 HTML 結構，提升了搜尋引擎的友好度。
- 極小的包大小：通過 Tree-shaking 技術，生成的靜態文件非常小，載入速度快。
使用 VitePress，可以幫助開發者快速搭建高性能的文檔網站。
使用 ServBay 創建並運行 VitePress 專案
在這篇文章中，我們將使用 ServBay 提供的 Node.js 環境來創建並運行一個 VitePress 專案。我們將使用 ServBay 的『主機』功能來設置 Web 伺服器，並通過反向代理和靜態文件服務來實現專案的訪問。
創建 VitePress 專案
初始化專案
首先，確保您已經安裝了 ServBay 提供的 Node.js 環境。然後，使用以下命令初始化一個新的 VitePress 專案：
bashcd /Applications/ServBay/www mkdir servbay-vitepress-app cd servbay-vitepress-app npm add -D vitepress npx vitepress init1
2
3
4
5按照提示輸入專案資訊，並根據需要選擇其他選項：
┌ 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.
修改 VitePress 專案內容
修改
docs/index.md文件打開
docs/index.md文件，修改內容使網頁輸出 "Hello ServBay!"markdown# Hello ServBay! 歡迎使用 ServBay 來運行 VitePress 文檔網站。1
2
3
進入開發模式
運行開發伺服器
啟動開發伺服器並指定埠（例如：8585）：
bashnpm run docs:dev -- --port 85851這將會在本地啟動一個開發伺服器，並暴露埠 8585。
配置 ServBay 主機反向代理
使用 ServBay 的『主機』功能，通過反向代理來訪問開發伺服器。在 ServBay 的『主機』設定中，添加一個新的反向代理：
- 名字：
My first VitePress dev site - 域名：
servbay-vitepress-test.dev - 主機類型：
反向代理 - IP：
127.0.0.1 - 埠：
8585
詳細設置步驟請參考添加Nodejs開發的網站。
- 名字：
訪問開發模式
打開瀏覽器，訪問
https://servbay-vitepress-test.dev，實時查看專案。由於 ServBay 支持自定義域名以及免費的 SSL 證書，您將享受到更高的安全性。
構建生產版本
構建生產版本
當開發完成後，使用以下命令構建生產版本：
bashnpm run docs:build1構建完成後，生成的靜態文件將位於
docs/.vitepress/dist目錄中。設置靜態文件服務
使用 ServBay 的『主機』功能，通過靜態文件服務來訪問生產版本。在 ServBay 的『主機』設置中，添加一個新的靜態網站：
- 名字：
My first VitePress production site - 域名：
servbay-vitepress-test.prod - 主機類型：
靜態 - 網站根目錄：
/Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist
- 名字：
訪問生產模式
打開瀏覽器，訪問
https://servbay-vitepress-test.prod，查看構建後的生產版本。通過 ServBay 的自定義域名和免費的 SSL 證書，您的網站將具有更高的安全性和可信度。
運行在簡潔 URL模式
如果你的 VitePress 運行在簡潔 URL模式（也就是cleanUrls: true），請在 ServBay 的『主機』中進行以下配置
- 名字：
My first VitePress production site - 域名：
servbay-vitepress-test.prod - 自定義配置：
勾選 - 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_server2
3
4
5
6
7
8
9
10
保存後，你就可以通過沒有.html的方式訪問VitePress了。比如https://servbay-vitepress-test.prod/path
通過以上步驟，您成功創建並運行了一個 VitePress 專案，並使用 ServBay 提供的功能來管理和訪問您的專案。