文章摘要
GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结
投诉

前置准备

  • Node.js 18 及以上版本。
  • 通过命令行界面 (CLI) 访问 VitePress 的终端。
  • 支持 Markdown 语法的编辑器。

设置新项目

在终端中运行以下命令来创建一个新的 VitePress 项目：

1
npx vitepress@latest init
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme + Customization
│
◇  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.

Tips:
- Since you've chosen to customize the theme, you should also explicitly install vue as a dev dependency.

除其他问题外，安装向导还会询问您在哪个目录中保存新项目，请确保位于项目目录中，然后 vitepress 使用以下命令安装依赖项：

1
npm add -D vitepress

最后创建一个.gitignore 包含以下内容的文件：此步骤确保不必要的文件不会包含在项目的 git 存储库中。

1
2
3
node_modules
.vitepress/cache
.vitepress/dist

创建完成后将本地应用程序推送到 GitHub 仓库

使用 Cloudflare Pages 部署

要将您的网站部署到 Pages：

  1. 登录 Cloudflare 仪表板↗ 并选择您的帐户。
  2. 在 Account Home 中，选择 Workers & Pages > Create application > Pages > Connect to Git。
  3. 选择您创建的新 GitHub 存储库，在 “设置构建和部署” 部分中，将提供以下信息：
    • 特别注意构建命令 npm run docs:build(博主踩过坑)
Configuration option Value
Production branch main
Build command npm run docs:build
Build directory .vitepress/dist

cf部署vitepress.jpg

部署成功截图

cf部署成功截图.jpg

使用 Vercel 部署

同上使用 Cloudflare Pages 部署

Vercel 官方文档

Vercel 部署参考文档

Vitepress 命令

docs:dev 脚本将启动具有即时热更新的本地开发服务器。使用以下命令运行它：

1
npm run docs:dev

参考文章