背景介绍
我们在建设网站都时候，如果有动态内容的展示，我们第一想到是要存数据库，存数据库那么就需要一个后台来维护这个数据库，还要写sql还需要建表还要写后端代码。那么这件事情就变复杂了。有些同学会想到用CMS。但CMS也会有一定的问题（后面阐述）。
如果我们用gatsby 或 hexo搭建了一个网站。那么我们的内容怎么管理起来？IDE里面写md文件，改模版代码？当然IDE里面写md对于研发来说可以接受。但是对于产品或md小白来说就比较不友好了。
所以我们主要目的需要一套工具能够将这些站点的内容管理起来。能够让站点运营人员自己管理这些站点的内容，不需要研发参与。
那么关于我自己找到了一个很好的解决方案，所以在此分享一下关于SSG+ HeadLess CMS的最佳实践。
SSG做为站点内容承载和渲染能力。 HeadLess CMS做为对站点内容的管理。
什么是SSG
SSG全称是Static Site Generation 。 静态网站生成器，是根据页面的模版和数据，生产纯静态资源的网站。
它的优点在于：
- 大大减轻了服务端渲染的资源负担，不需要额外做一套 Node.js 服务；
- 由于文章内容已经被静态化了，所以它是 SEO 友好的，能被搜索引擎轻松爬取
- 用户可以通过 CDN 加载页面核心内容，CDN 的边缘节点有缓存，速度极快；
- 由于每次都是全站渲染，所以网站的版本可以很好的与 Git 的版本对应上，甚至可以做到原子化发布和回滚
它的问题：
细心的同学会发现。 对于只有几十个页面的个人博客、小型文档站而言，数据有变化时，跑一次全页面构建的消耗是可以接受的。
但对于百万级、千万级、亿级页面的大型网站而言，一旦有数据改动，要进行一次全部页面的构建渲染，需要的时间可能是按小时甚至按天计的，这是不可接受的。
为了解决这个问题，各种框架和平台都提供了不同的方案，这里又孪生出 ISR （Incremental Site Rendering）和 DPR（Distributed Persistent Rendering）两种概念。
什么是Headless CMS
- Headless CMS 叫无外设内容管理系统。
- Headless CMS 重点是关注内容和页面的数据结构。传统CMS是将内容和展现层放在一起的（紧耦合）。Headless CMS是不关心您的表现层的（松耦合）。
- Headless CMS 每个页面有独立内容结构， 每个页面会对一份schema。用来描述你view层上的数据。
- Headless CMS 系统会对外提供 API（GraphQL）数据支持，您的SSG应用的主题或模版里面的内容来源于这些数据。
Gridsome(SSG)+ Strapi (Headless CMS) 能力介绍
Gridsome介绍
Gridsome是类似于 gatsby, hugo 这类 SSG工具。
它具有以下特性：
- 基于文件的路由支持，也支持静态或动态路由
- 丰富的插件机制，可以通过插件接入其他的Headless CMS用于内容管理
- 本地开发支持热更新，实时查看代码修改
- GraphQL数据层的支持，集成了很方便的组件来接入GraphQL数据
当然Gridsome只是我的选择，你们也可以选择用gatsby或者其他的SSG工具
Strapi介绍
Strapi是一款 基于API之上的 CMS的工具。它支持RestApi和GraphQL这两种数据获取方式。
它具有以下的特点：
- 丰富的数据类型支持，支持文本，图片，媒体，富文本，markdown，集合类型，数值，文件等等
- 在线内容管理，实时修改内容，数据库支持。
- 支持私有化部署，支持多种类型数据。
- 对权限控制支持。
- 提供插件能力，可以扩展工具能力。
整体运行流程
Strapi使用
Strapi是我们内容管理的核心应用，首先我们先简单介绍一下，如何安装和演示一下主要的功能。
它提供了多种安装方式：
- 采用create-strapi-app CLI工具安装
- 采用Docker compose安装，官方提供了docker-compose.yaml文件来安装
CLI运行步骤如下
yarn create strapi-app my-project-name #创建strapi应用
yarn develop #运行strapi应用
复制代码Strapi 支持4种数据库：
- SQLite （默认方式）
- PostgreSQL
- MySQL
- MariaDB
在config/database.js 文件下可以修改数据库连接信息
Strapi如何管理内容的Schema数据类型（ContentTypes）
Stapi分三种主要的数据类型
- 集合类型 - 比如User 或Product 这种List数据类型，在Strapi中统称为集合类型
- 单一类型 - 比如 About 或 Home 这种页面， 往往需要的只是Info类型 ,相当于 json中的Object类型，这种类型在Strapi中统称为单一类型
- 组件类型 - 它是做为上面两种类型的一种扩充类型。 比如页面上可以重复利用的块，我们可以此类定义为组件类型。 比如在上面这两种类型内可以引入这个组件类型。
在Strapi 提供了3种内置的集合类型（Permission, Role,User )，是不允许删除的。这些类型都属于权限功能需要的。但我们可以对内置类型做扩充，来丰富它原有权限功能。
Strapi如何查看自己的接口并验证此接口
Swagger http://localhost:1337/documentation RestAPI接口 （注：需要安装strapi-plugin-documentation 插件）
Graphql http://localhost:1337/graphql GraphQL接口
Strapi如何实时编辑修改页面内容，如何对静态资源的管理，文件上传（见演示）
Strapi如何内容的顺序进行调整
在单一类型中，我们增加一个Dynamic Zone 类型， 这个类型是一块动态区域，可以包含多个字段或多个组件，在SSG页面上，这块的内容可以调整顺序，也可以对显示的数量做控制。 如果我们要对内容的顺序获得调整，我们需要在schema中增加Dynamic Zone 类型。
Strapi 对接口进行权限控制
- 进入 Settings → Roles → public role
- 设置 Permissions
Strapi与Gridsome对接
Gridsome提供了GraphQL的Plugs用来对接Strapi 。
- 安装Gridsome , 采用CLI安装
yarn global add @gridsome/cli - 安装GrqphQL扩展
yarn add @gridsome/source-graphql - 配置 gridsome.config 文件，指定GraphQL服务地址。
- 修改模版内容，增加查询
Gridsome官方提供了丰富的templates，还有与各种CMS平台的对接方案。gridsome.org/starters/
讲解Dynamic Zone 类型在Gridsome中的应用
- 在strapi中将Content字段设置为Dynamic Zone类型
- 利用graphql的元字段和片段类型处理动态区域，来满足对内容顺序或模块的精准控制
Gridsome基于Strapi 制作简单的document page
- Strapi后台配置增加Articles 集合类型 （title, category , content）Fields
- Gridsome增加templates/bolg.vue文件
- gridsome.sever.js 增加 createPage代码
- 采用vue-markdown组件来渲染 markdown content
将Strapi应用在普通的VUE项目上
- 安装apollo (graphql)
vue add apollo - graphql/queryHome.gql 新建查询文件
query {
home{
title
}
}
复制代码- index.vue 下新增引入
import QueryHome from "../graphql/QueryHome.gql"
export default {
apollo: {
home: QueryHome,
}
}
复制代码4 . 在标签中引用即可 {{home.title}}
总结
对于前端来说，我们可以利用Strapi快速构建一个内容和数据的管理工具，这个是不依赖后端参与的。快速实现我们的想法，配合SSG可以构建一个简单可维护的站点。并且速度是很快的。而且Strapi也可以作为mock数据源，协助我们的开发产品。好了，最后谢谢大家的阅读，喜欢点个赞呗。