如何更改网站内容(SSG+HeadLessCMS的最佳实践：站点内容承载和渲染能力)

　　如何更改网站内容(SSG+HeadLessCMS的最佳实践：站点内容承载和渲染能力)

　　背景介绍

　　我们在搭建网站的时候，如果有动态的内容展示，我们首先想到的就是保存数据库，而保存数据库，需要后台维护数据库，而且需要写sql，我们需要建表，我们需要编写后端代码。那么这件事就变得复杂了。有的同学会想到使用cms。但是cms也有一定的问题（后面会解释）。

　　如果我们用 gatsby 或 hexo 构建一个 网站。那么我们如何管理我们的内容呢？在 IDE 中编写 md 文件并更改模板代码？当然，在IDE中写md对于研发来说是可以接受的。但它对产品或 md whites 不太友好。

　　所以我们的主要目的需要一套工具来管理这些网站的内容。它允许站点运营商自行管理这些站点的内容，而无需研发参与。

　　关于我自己，我找到了一个很好的解决方案，所以在这里我分享关于 SSG+ HeadLess cms 的最佳实践。

　　SSG作为站点内容承载和渲染能力。HeadLess cms 作为网站内容的管理。

　　什么是 SSG

　　SSG的全称是Static Site Generation。静态网站 *敏*感*词*是一个网站，它根据页面的模板和数据生成纯静态资源。

　　它的优点是：

　　大大减少了服务端渲染的资源负担，并且不需要额外的一套Node.js服务；因为 文章 的内容一直是​​静态的，所以对 SEO 很友好，很容易被搜索引擎抓取。用户可以通过CDN加载页面的核心内容，并缓存CDN的边缘节点，速度极快；因为每次都会渲染整个网站，所以网站的版本可以很好的对应Git的版本，甚至可以做Atomic release和rollback

　　它的问题：

　　细心的同学会发现。对于只有几十页的个人博客和小型文档站点，当数据发生变化时，运行整页构建的消耗是可以接受的。

　　但是对于百万、千万、亿页的大型网站页面，一旦数据发生变化，所有页面的构建和渲染可能需要几个小时甚至几天的时间。这是不可接受的。

　　为了解决这个问题，各种框架和平台都提供了不同的解决方案，这里有ISR（Incremental Site Rendering）和DPR（Distributed Persistent Rendering）两个概念。

　　什么是HeadlesscmsGridsome(SSG)+ Strapi(Headlesscms)能力介绍Gridsome介绍

　　Gridsome 是一个类似于 gatsby、hugo 的 SSG 工具。

　　它具有以下属性：

　　基于文件的路由支持，以及丰富的静态或动态路由插件机制，可以接入其他Headlesscms进行内容管理、本地开发、热更新、实时查看代码修改、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（默认）PostgreSQLMySQLMariaDB

　　数据库连接信息可以在config/database.js文件下修改

　　Strapi 是如何管理内容的 Schema 数据类型（ContentTypes） Stapi 主要分为三种数据类型 采集 类型——比如 User 或 Product 等 List 数据类型，在 Strapi 中统称为集合类型 Single types——比如页面如关于或首页，经常需要的是Info类型，相当于json中的Object类型。这种类型在 Strapi 中统称为单一类型组件类型——它是上述两种类型的扩展类型。例如，一个可以在页面上重复使用的块，我们可以将其定义为组件类型。例如，可以在上述两种类型中引入这种组件类型。

　　Strapi 提供了三种内置的集合类型（权限、角色、用户），不允许删除。这些类型都是权限功能所必需的。但是我们可以扩展内置类型来丰富其原有的权限功能。

　　Strapi 如何看待自己的接口并验证这个接口

　　Swagger :1337/documentation RestAPI接口（注意：需要安装strapi-plugin-documentation插件）

　　Graphql localhost:1337/graphql GraphQL 接口

　　Strapi 如何实时编辑和修改页面内容、管理静态资源和上传文件（见演示）

　　Strapi 如何调整内容的顺序？在单个类型中，我们添加了一个 Dynamic Zone 类型，它是一个动态区域，可以收录多个字段或多个组件。在SSG页面，可以按顺序调整该区块的内容。可以控制显示的数量。如果我们想调整内容的顺序，我们需要在 schema 中添加 Dynamic Zone 类型。Strapi 控制界面的权限。进入设置→角色→公共角色设置权限。Strapi 与 Gridsome 连接。Gridsome 提供 GraphQL Plugs 来连接 Strapi。安装Gridsome，使用CLI安装yarn global add @gridsome/cli安装GrqphQL扩展yarn add @gridsome/source-graphql 配置gridsome.config文件并指定GraphQL服务地址。修改模板内容，增加查询 Gridsome 官方提供了丰富的模板，以及与各种cms 平台的对接解决方案。/starters/ 解释Gridsome中Dynamic Zone类型的应用 在strapi中将Content字段设置为Dynamic Zone类型 使用graphql的meta field和fragment type处理动态区域，满足对内容顺序或模块的精确控制 Gridsome基于Strapi简单制作文档页面Strapi后台配置添加Articles集合类型（标题、类别、内容）FieldsGridsome添加templates/bolg.vue文件gridsome.sever.js添加createPage代码使用vue-markdown组件渲染markdown内容应用Strapi到普通VUE项目安装apollo（ graphql) vue add apollographql/queryHome.gql 新建查询文件 以及与各种 cms 平台的对接解决方案。/starters/ 解释Gridsome中Dynamic Zone类型的应用 在strapi中将Content字段设置为Dynamic Zone类型 使用graphql的meta field和fragment type处理动态区域，满足对内容顺序或模块的精确控制 Gridsome基于Strapi简单制作文档页面Strapi后台配置添加Articles集合类型（标题、类别、内容）FieldsGridsome添加templates/bolg.vue文件gridsome.sever.js添加createPage代码使用vue-markdown组件渲染markdown内容应用Strapi到普通VUE项目安装apollo（ graphql) vue add apollographql/queryHome.gql 新建查询文件 以及与各种 cms 平台的对接解决方案。/starters/ 解释Gridsome中Dynamic Zone类型的应用 在strapi中将Content字段设置为Dynamic Zone类型 使用graphql的meta field和fragment type处理动态区域，满足对内容顺序或模块的精确控制 基于Strapi的Gridsome简单制作文档页面Strapi后台配置添加Articles集合类型（标题、类别、内容）FieldsGridsome添加templates/bolg.vue文件gridsome.sever.js添加createPage代码使用vue-markdown组件渲染markdown内容应用Strapi到普通VUE项目安装apollo（ graphql) vue add apollographql/queryHome.gql 新建查询文件

　　query {

home{

title

}

}

　　index.vue下新引入

　　import QueryHome from "../graphql/QueryHome.gql"

export default {

apollo: {

home: QueryHome,

}

}

　　4. 在标签 {{home.title}} 中引用

　　总结

　　对于前端，我们可以使用 Strapi 快速搭建一个内容和数据管理工具，不依赖后端的参与。快速实现我们的想法，与SSG合作搭建一个简单易维护的站点。而且速度非常快。而且Strapi也可以作为模拟数据源来辅助我们的产品开发。好吧，最后，感谢您的阅读，我想给它竖起大拇指。