跳转到内容
搜索文档

VitePress

最后更新 查看 MarkdownAgent 设置

VitePress 是一个静态站点生成器 (SSG),专为构建快速、以内容为中心的网站而设计。VitePress 接收用 Markdown 编写的源内容,应用主题,并生成可轻松部署到任何位置的静态 HTML 页面。

在本指南中,你将创建新的 VitePress 项目并使用 Cloudflare Pages 部署。

设置新项目

VitePress 附带命令行设置向导,可帮助你搭建基础项目。

在终端运行以下命令创建新的 VitePress 项目:

npx vitepress@latest init

设置向导会询问(除其他问题外)将新项目保存在哪个目录,请确保位于项目目录中,然后使用以下命令安装 vitepress 依赖:

npm i -D vitepress@latest

最后创建包含以下内容的 .gitignore 文件:

node_modules
.vitepress/cache
.vitepress/dist

此步骤确保不必要的文件不会包含在项目的 git 仓库中(我们接下来将设置)。

继续之前

所有框架指南都假定你已具备 Git 的基础知识。如果你是 Git 新手,请参阅这份精简 Git 手册,了解如何在本地设置 Git。

如果你使用 SSH 克隆,则必须在每台用于向 GitHub 推送或拉取的计算机上生成 SSH 密钥

更多信息请参阅 GitHub 文档Git 文档

创建 GitHub 仓库

访问 repo.new 创建新的 GitHub 仓库。创建新仓库后,进入新创建的项目目录,在终端中运行以下命令,准备并将本地应用推送到 GitHub:

git init
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin main

使用 Cloudflare Pages 部署

要将站点部署到 Pages:

  1. 在 Cloudflare 仪表板中,前往 Workers & Pages 页面。

    Go to Workers & Pages ↗
  2. 选择 Create application(创建应用程序)

  3. 选择 Pages 选项卡。

  4. 选择 Import an existing Git repository(导入现有 Git 仓库)

  5. 选择你创建的新 GitHub 仓库,然后选择 Begin setup(开始设置)

  6. Build settings(构建设置) 部分,选择 VitePress 作为 Framework preset(框架预设)。你的选择将提供以下信息:

Configuration optionValue
Production branchmain
Build commandnpx vitepress build
Build directory.vitepress/dist

配置站点后,即可开始首次部署。Cloudflare Pages 将安装 vitepress、项目依赖,构建站点,然后部署。

部署站点后,你将在 *.pages.dev 上获得项目的唯一子域名。每次向 VitePress 项目提交并推送新代码时,Cloudflare Pages 都会自动重新构建并部署项目。你还可以在新 pull request 上获得预览部署,在部署到生产环境之前预览更改效果。

了解更多

完成本指南后,你已成功将 VitePress 站点部署到 Cloudflare Pages。要开始使用其他框架,请参阅框架指南列表

这篇文档对您有帮助吗?