在本系列文章的前三篇中,我们已经搭建了 Gatsby 环境,并通过渲染本地 Markdown 文件来生成页面,我们的网站也已经成功进行了部署。如果你的要求只是想要搭建一个渲染本地 Markdown 生成的静态网站,依靠目前的内容已经完全足够,剩下的就是编写样式,以及通过 Gatsby 的插件实现一些其他功能。 但本系列文章的目标远不止此,我们想要的是让 Gatsby 与 Strapi 强强联合,给我们的网站添加内容后台管理系统,甚至借助于某些特性实现准动态网站的效果。从本篇开始,我们就将一起体验 Strapi 的强大功能。
前言
在本系列文章的前三篇中,我们已经搭建了 Gatsby 环境,并通过渲染本地 Markdown 文件来生成页面,我们的网站也已经成功进行了部署。如果你的要求只是想要搭建一个渲染本地 Markdown 生成的静态网站,依靠目前的内容已经完全足够,剩下的就是编写样式,以及通过 Gatsby 的插件实现一些其他功能。
但本系列文章的目标远不止此,我们想要的是让 Gatsby 与 Strapi 强强联合,给我们的网站添加内容后台管理系统,甚至借助于某些特性实现准动态网站的效果。从本篇开始,我们就将一起体验 Strapi 的强大功能。
为了让网站看起来不至于过于简陋,在正式开始进行样式撰写的学习之前,先行给网站添加了部分样式,网站样式主要参考了本人的 Ghost 博客和 Gatsby 的 Hello Friend Starter
Strapi 介绍
Strapi 是一款广受欢迎的 Headless CMS,主要有以下特点:
- 开源、免费
- 基于 Node.js
- 支持 SQLite、MongoDB、Postgres 等多种数据库
- 支持生成 GraphQL API
目前看来,如果不使用价格昂贵的商业软件(如 Contentful 等),Strapi 是目前的最佳选择。
Strapi 部署
本系列侧重于对 Strapi 的使用而非部署,因此在部署中采用 SQLite 作为数据库,读者可自行替换为 MongoDB 等。
非 Docker 部署
Strapi 是基于 Node.js 开发的,因此只需要在服务器上安装 Node 即可运行,借助于 pm2,就可以实现后台运行。
安装 Node 环境等
Node 环境的安装这里不再重复,可自行搜索
使用官方脚手架创建项目
根据 Strapi 官方网站提示,运行以下命令即可安装启动 Strapi:
|
|
之后脚手架就会下载代码,安装依赖并启动。
确保服务器 1337 端口开放,访问 http://服务器IP:1337 即可启动 Strapi。
使用 pm2 后台运行
我们需要使用 pm2
来在后台运行 Strapi,所以我们停止正在运行的 Strapi,先全局安装 pm2
:
|
|
安装之后,就可以使用 pm2
来启动 Strapi 了,进入 Strapi 目录,运行以下命令:
|
|
其中 APP_NAME 自行取名,不出意外的话,Strapi 就能成功运行在后台了:
如果需要进一步了解
pm2
的使用,请自行搜索资料
Docker 部署
请参考官方 Docker Hub 页面
Docker 部署非常方便,如果使用 SQLite 数据库,直接运行以下命令即可:
|
|
如果需要使用诸如 MongoDB 等数据库,推荐使用 docker-compose
来安装,我们创建 strapi
目录和 docker-compose.yml
文件,以下是 docker-compose.yml
的内容示范,请自行修改。
|
|
注意上方的
version
请根据docker-compose
版本调整为3
或者其他值
之后运行即可:
|
|
创建管理员账户
我们访问我们刚刚部署的 Strapi 应用:
初次访问,我们需要创建一个管理员账户,请访问 http://服务器IP:1337/admin
自行添加管理员账户。
创建内容类型(Content Type)
在接口开发中,需要进行数据模型的定义,这实际上也是数据库结构的外在表现形式。在 Strapi 中,我们一般会通过图形界面进行 Model 的定义,Strapi 对大部分处理逻辑进行了封装,使得传统的后端接口开发通过简单的配置即可完成,对前端开发人员非常友好。同时,对于高端用户,也可以通过查看 Strapi 所生成的代码进一步了解细节。
Strapi 已经为我们预先生成了 user
等内容类型,我们要做的是一个博客网站,未来可能需要的数据类型可能包括:
post
博客文章tag
文章标签page
博客独立页面
我们暂时只创建 post
和 tag
两种内容类型,page
待后期需要时再创建。
创建 Post 和 Tag 内容类型
在创建之前,我们需要思考,一篇博客文章需要哪些信息?在思考的同时,我们可以打开一些博客文章,看一看都包括哪些信息,可能会得到以下不完整清单:
- 标题
- 作者
- 摘要
- 内容
- 标签
再进一步可能还会包括:
- 封面图
- 访问地址
- 是否公开
- 是否推荐
- 访问数
- 创建时间
- 更新时间
针对特定需求,我们还可以继续添加其他字段。
不同的字段会有不同的数据类型,比如标题应当是一个字符串,而是否推荐则是一个布尔值,标签则应当是一个数组(一篇文章可以有多个标签)。除了一般数据类型之外,Strapi 中支持创建内容类型之间的关联,比如文章的作者应当是 user
类型,而标签数组中的值,应当来自于 tag
类型,这些都可以通过简单的配置进行指定。另外需要注意的一点是,创建时间和更新时间都会自动更新,无须我们关注。Strapi 支持的数据类型包括:
下面我们就根据上文所列清单,分别创建一个tag
内容类型和 post
内容类型:
字段名使用小写即可,生成内容类型中会显示为大写开头
内容类型的关联非常直观,下面是 post
类型中 author
的关联:
添加测试数据
在创建完内容类型后,我们需要添加部分测试数据以用于后续数据获取渲染等测试,请自行添加。
设置访问权限
我们通过访问 http://服务器IP:1337/posts 访问时,会发现报错:
这是因为默认所有数据的获取都必须通过认证,我们可以在管理后台进行调整开放部分数据的公开访问。
点击左侧的 Roles&Permissions
打开角色与权限功能,在角色列表中找到 Public
,点击进入后选中所需要的权限,我们将查询数据权限开放给 Public
角色:
Strapi 自身也支持 GraphQL 查询,可以访问 http://服务器IP:1337/graphql
查看,将来我们要实现准动态网站,就将直接查询 Strapi 自身的 GraphQL 接口:
总结
本部分我们主要搭建了 Strapi 环境,并一起创建了我们的博客网站所需的内容类型(Content Type),在 Strapi 的支持下,我们所添加的内容可以直接通过 GraphQL 查询获取到,下一篇我们就将使用 Gatsby 从 Strapi 中获取内容,并通过修改 gatsby-node.js
中的方法来使用 Strapi 数据渲染页面。