格子表单GRID-FORM ｜ 文档网站搭建（VitePress）与部署（Github Pages）

格子表单/GRID-FORM已在Github 开源，如能帮到您麻烦给个星🤝

GRID-FORM 系列文章

• 基于 VUE3 可视化低代码表单设计器
• 嵌套表单与自定义脚本交互
• 文档网站搭建（VitePress）与部署（Github Pages）
• 必填项检验 BUG 修复实录

格子表单/GRID-FORM 文档站点已上线：https://0604hx.github.io/grid-form/，效果如下： 本文将介绍如何使用 VitePress、GithubPages 搭建静态网站，相关源码请查阅GRID-FORM。

VitePress，由 Vite 和 Vue 驱动的静态站点生成器，基于 markdown 文件混搭 Vue 组件构建成 HTML，提供开箱即用的模板，特别适合做组件文档😄。下面是一些线上的实例：

VitePress 目录包含以下内容：

从上面几个官网就能看出，首页布局如出一辙😀，这是因为使用了 VitePress 默认的首页模板。

VitePress 默认兼容移动端浏览（如下图），通过简单的定义，一个有模有样的首页就出来了👍。如果需要引入静态图片，可以将文件放置到目录（构建时底下内容将被拷贝至根目录），然后直接通过 使用。 除此之外，还能自行定义首页（如引入组件、增加更多元素），有待各位看官自行探索。

一个 md 文件默认为（文档）布局，在大屏下文档页呈左中右三区（见下图），中等屏幕则左中（右侧目录藏于内容顶部），移动端则是只有中间内容区域。

有时候，我们需要完全自定义页面，没有自带的导航栏、底部横幅，此时可以通过设置，然后引入自己的组件即可。比如我配置的在线体验页面：

文档网站打包完成后，需要部署到互联网才能被更多的人看到。通常有两种方式，一是使用各类厂家的服务（收费、免费），二是自行搭建服务器，如需 https 还得购买证书，相对门槛较高。

我使用的是 Github 提供的静态资源免费部署服务。对国内环境友好的码云（Gitee）也有类似的服务，但是需要实名验证（审核过程比较久）。

GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 Javascript 文件，（可选）通过构建过程运行文件，然后发布网站。

有三种类型的 GitHub Pages 站点：项目、用户和组织。 项目站点连接到 GitHub 上托管的特定项目，例如 Javascript 库或配方集合。 用户和组织网站已连接到 GitHub.com 上的特定帐户。

若要发布用户站点，必须创建名为 的个人帐户拥有的存储库。 若要发布组织站点，必须创建名为 的组织帐户拥有的存储库。 除非使用的是自定义域，否则用户和组织站点在 或 中可用。

项目站点的源文件与其项目存储在同一个仓库中。 除非使用的是自定义域，否则项目站点在 或 中可用。

我的站点源文件跟项目代码为同一仓库，故访问的 URL 为：https://0604hx.github.io/grid-form/

1. 首先我们本地构建站点（通过 vitepress build）
2. 将 的内容提交到代码仓库的 分支（对于具有项目网站的存储库）
3. 登录 github 仓库，参考下图进行配置 更多细节可查看：VitePress-Deploying a Static Site

此部分为可选😄 通过接入百度统计平台，能够分析网站的流量。

1. 进入百度统计首页，登录（如无账号请先注册）
2. 新建站点（填写 github 分配好的 url）
3. 得到代码，插入到网站即可