项目介绍

• 使用 Gridsome 创建项目
• 模板参考 startbootstrap-clean-blog
• 使用 Strapi 管理内容，提供 API 和 GraphQL查询

Gridsome 是静态站点生成器，打包时可以通过 API 或 GraphQL 获取动态数据，生成对应的静态文件。

例如：获取一定数量的文章列表，生成每个文章的详情页。

Strapi 用于提供数据来源。

由于生成的是静态站点，当静态页面中的数据源发生变化，静态页面是不会自动更新的。

所以需要在部署时监听数据源变化，当数据发生变化时，通知Gridsome重新生成静态站点。

Strapi

介绍

Strapi （Bootstrap your API）是通用的CMS内容管理系统。

• 快速生成CMS管理面板
• 快速创建集合，例如文章、用户
• 提供 RESTFul API 和 GraphQL 轻松获取数据
• 内置用户系统，可以控制权限
• 插件 - 可以轻松搭配 Gridsome
• webhook - 可以关联钩子实现自动部署，例如 Vercel
• 可以使用任意数据库类型，例如：Sqlite Mysql Mongodb
• 等

安装

Strapi 依赖 sharp，所以需要考虑网络环境并配置 C++ 编译环境。

网络环境可以修改镜像：sharp - Chinese mirror

C++ 编译可以安装：node-gyp 和 相应系统的编译套件

静态网站部署到Vercel

Gridsome 生成的静态网站可以部署到任意支持静态资源托管的 web 服务器，例如 Vercel。

Vercel 需要注册 或 Github授权登录，可以参考 Vercel 部署 NuxtJS 应用。

登录后可以从Git仓库导入项目：Import Git Repository 或 Import Project：

或

填写Gridsome项目的仓库地址（注意不是分支地址）：

Continue 后继续配置：

如果编译过程失败，可以根据错误调整，重新 Deploy。

编译完成：

Strapi触发自动部署

Vercel 可以配置 Git Deploy Hooks。

Deploy Hooks 允许您触发给定分支的部署。

从项目的Settings进入：

填写自定义的钩子名称，和配置的Git分支，然后创建。

然后进入 Strapi 添加 webhook：

保存后，修改数据，例如新建一篇文章。

此时 Vercel 就会重新打包编译，最终生成新的静态页面。

可以进入 Vercel 项目的 deployments 面板查看。

至此 Gridsome + Strapi + Vercel 自动部署完成。