跳转到内容
搜索文档

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。要开始使用其他框架,请参阅框架指南列表。

这篇文档对您有帮助吗?