Heureka's blog

Appearance

04. 部署上线 ​

VitePress 部署可以到各种静态托管平台。

一、构建项目 ​

bash
# 开发模式
npm run docs:dev

# 构建
npm run docs:build

# 预览
npm run docs:preview

二、部署到 GitHub Pages ​

1. 新建仓库 ​

创建 GitHub 仓库，例如 my-vitepress-site

2. 配置 base ​

typescript
// .vitepress/config.ts
export default defineConfig({
    base: "/my-vitepress-site/", // 你的仓库名
});

3. 推送代码 ​

bash
git add .
git commit -m "Initial commit"
git push origin main

4. GitHub Pages 设置 ​

  • 进入仓库 Settings → Pages
  • Source 选择 Deploy from a branch
  • Branch 选择 main/docs/.vitepress/dist

三、部署到 Vercel ​

1. 安装 Vercel CLI ​

bash
npm install -g vercel

2. 部署 ​

bash
vercel

四、部署到 Netlify ​

1. 连接仓库 ​

在 Netlify 中导入 GitHub 仓库

2. 配置构建命令 ​

bash
Build command: npm run docs:build
Publish directory: docs/.vitepress/dist

总结 ​

VitePress 部署简单，多种托管平台可选。