创建并运行 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 提供的功能来管理和访问您的项目。