VitePress
VitePress是一款 静态网站生成器 (SSG),专为快速构建以内容为中心的网站而设计。VitePress 可获取以 Markdown编写的源内容,为其应用主题,并生成可轻松部署到任何地方的静态 HTML 页面。
在本指南中,你将创建一个新的 VitePress 项目,并使用 Cloudflare Pages 进行部署。
建立一个新项目
VitePress 随附一个命令行设置向导,可帮助你构建一个基本项目。
在终端运行以下命令,创建一个新的 VitePress 项目:
除其他问题外,设置向导还会询问你将新项目保存在哪个目录中,请确保
目录中,然后使用以下命令安装 vitepress
依赖项:
最后创建一个内容如下的 .gitignore
文件:
这一步可以确保项目的 git 仓库(我们将在下一步进行设置)不会包含不必要的文件。
在你继续之前
所有框架指南都假定你已经对 Git 有了基本了解。如果你是 Git 的新手,请参考这本 Git 手册摘要,了解如何在本地机器上设置 Git。
如果使用 SSH 克隆,则必须在每台用于从 GitHub 推送或拉取的计算机上 生成 SSH 密钥。
创建 GitHub 仓库
访问 repo.new,创建一个新的 GitHub 仓库。创建新仓库后,进入新创建的项目目录,准备并在终端运行以下命令将本地应用程序推送到 GitHub:
使用 Cloudflare 页面部署
将网站部署到页面:
- 登录 Cloudflare 仪表板 并选择你的账户。
- 在账户主页,选择 工作者和页面> 创建应用程序> 页面> 连接到 Git。
- 选择你创建的新 GitHub 仓库,在设置构建和部署部分,将提供以下信息:
Configuration option | Value |
---|---|
Production branch | main |
Build command | npx vitepress build |
Build directory | .vitepress/dist |
配置好网站后,你就可以开始首次部署了。Cloudflare Pages 将安装vitepress
、你的项目依赖项,并在部署前构建你的网站。
部署你的网站后,你将在 *.pages.dev
上为你的项目获得一个唯一的子域。每次你向 VitePress 项目提交和推送新代码时,Cloudflare Pages 都会自动重建你的项目并进行部署。你还将在新的拉取请求中访问 预览部署,这样你就可以在部署到生产环境之前预览网站的更改效果。
了解更多
完成本指南后,你已成功将 VitePress 网站部署到 Cloudflare Pages。要开始使用其他框架,请参阅框架指南列表