VitePress官网：https://vitepress.dev/zh/guide/getting-started

VitePress介绍

VitePress 是由 Vue 官方团队（尤雨溪）推出的 静态站点生成器 (SSG)，专门用来快速搭建极速、美观、易维护的技术文档、知识库、博客。它是 VuePress 的继任者，基于 Vite + Vue 3 重写，解决了旧工具启动慢、热更新卡的痛点VitePress。

说白了，用 Markdown 写内容，自动生成专业、高速、可直接上线的静态网站。

Vercel介绍

Vercel 是面向现代前端 / 全栈应用的云端部署与托管平台，核心优势是零配置自动部署、全球 CDN 加速、Git 原生集成，特别适合快速上线静态站点、SSR 应用与文档站。https://vercel.com/

说白了，我们可以白嫖部署的Node服务器。

核心定位

• 官方定位：AI Cloud，一站式构建、部署与扩缩容 AI 与 Web 应用。
• 前身：Zeit（2020 年更名），与 Next.js 同团队，对 React/Vue/Svelte 等框架深度优化。

核心能力（为什么选它）

表格

VitePress启动

需要你本地有Node环境哦，官方说Node20起步哦

创建一个项目的文件夹，进入终端后执行初始化！

npx vitepress init

输出

zanglikun@zanglikundeMacBook-Pro-2 ffxi-introduce % npx vitepress init
Need to install the following packages:
vitepress@1.6.4
Ok to proceed? (y) y


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

在此位置安装必要的依赖用于后续的启动

npm install vitepress@latest --save-dev

输出：

zanglikun@zanglikundeMacBook-Pro-2 ffxi-introduce % npm install vitepress@latest --save-dev

added 126 packages in 21s

38 packages are looking for funding
  run `npm fund` for details

启动服务

npx vitepress dev docs

输出

  vitepress v1.6.4

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

成功后，Github创建仓库到你的账号。记得在项目的根目录添加一个 vercel.json

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Vercel启动

创建账号与登录系统

https://vercel.com/login

找到添加新项目

关联Github账号

导入与部署

选到我们的项目后。如果你项目根目录有此 vercel.json ，就会自动识别这个项目，你直接点击Deploy就可以。

部署完成后，就可以访问了：

点击链接（必要时候可开启 代理访问 ），就可以访问了：

后续你更新代码，提交到Github后，就会自动部署。触发机制是push！

注意事项，你本地提交的 git user 与 git email 会影响能不能执行构建。建议将你Github账号绑定多个邮箱。这样你就可以使用公司邮箱与私人的邮箱提交与构建，省得切换了。