前言

现如今，前端开发和网站建设已经成为了许多人的新选择。但是，在大多数情况下，网站建设都需要涉及到所谓的“CMS（内容管理系统）”。因为这些系统可以让你拥有更好的管理和维护自己网站内容的能力。

然而，大多数 CMS 都是“全栈”的思路，也就是说，它们负责控制网站的输出，以及页面的显示和数据存储，这些都集中在一个系统中。这使得这些 CMS 的繁重成为了使用它们的主要问题之一。因此，Headless CMS 开始了“微服务”的趋势。Headless CMS 可以将它们的逻辑和管理员工具，与网站前端的设计和构建分开。它们只是提供数据。

什么是 Headless CMS？

Headless CMS 的基本思想是将数据与形式分离。这意味着管理界面和操作接口都不与网站用户界面关联，并且网站用户界面也不会向 CMS 发出请求。Headless CMS 只会提供可用的 JSON API，供静态网站、框架或其它前端显示层使用。

目前最受欢迎的 Headless CMS 包括 Contentful、Strapi 和 Prismic 等系统。使用 Headless CMS 的主要优点是：

独立于技术堆栈
更好的性能
更好的安全性
更大的可扩展性
更好的开发体验

如何创建自己的 Headless CMS

在本文中，我们将探索如何创建自己的 Headless CMS，以及如何使用它来创建网站。

步骤1：安装所需工具

为了创建自己的 Headless CMS，我们需要一些工具。首先，我们需要 Node.js 和 NPM，它们将使我们能够构建和运行我们的 CMS。

确保你已经在电脑上安装了它们。安装方法非常简单。只需打开终端并输入以下命令即可。

node -v
npm -v

如果上述命令都成功运行并显示版本，那么你已经安装好了这两个工具。

步骤2：安装 Strapi

在本文中，我们将使用 Strapi 来创建我们的 Headless CMS。它是一个开源的、基于 Node.js 的 CMS，可为我们提供各种用于管理网站数据的功能。

我们可以使用 NPM 安装 Strapi。只需要在终端里输入以下命令即可：

npm install strapi@beta -g

步骤3：创建一个新的 Strapi 项目

现在我们已经安装了 Strapi，我们可以创建一个新的 Strapi 项目。以及我们将在这个项目中创建数据模型。

strapi new my-project --quickstart

这个命令将创建一个新的 Strapi 项目，并且在安装过程中将提供一些基本信息，例如数据库选择。你只需按照提示操作即可。

步骤4：创建模型

在 Strapi 中，模型是描述数据的方式。我们要使用它来描述我们网站的数据。在这里，我们将创建一个简单的模型，并在其中添加属性。

在这个例子中，我们将创建一个“文章”模型，它将有“标题”和“内容”属性。要创建模型，只需打开“./api/article/models/article.js”文件，输入以下代码即可：

// javascriptcn.com 代码示例
module.exports = {
  attributes: {
    title: {
      type: 'string',
      required: true,
    },
    content: {
      type: 'string',
      required: true,
    },
  },
};

步骤5：创建一个 API

现在我们已经定义了数据模型，我们需要创建一个 API 来服务这个模型。API 将与我们的前端静态站点进行通信。Strapi 的 API 创建器可让我们快速创建 API，而无需编写任何代码。

strapi generate:api article

在这里，我们生成了一个名为“article”的 API，这个 API 将会代表我们所有的“文章”。你需要执行上面这个命令，并在提示中完成参数配置。

步骤6：添加数据

现在我们已经创建好了在新的 Headless CMS 中使用的 API，并在 API 上定义了数据模型。下一步我们需要提供一些数据，这样我们就可以在我们的静态网站上使用 Strapi API 来获取它们了。在我们的 Strapi 项目中，可以使用 Content-Type 页面，手动添加内容。

步骤7：创建静态站点

现在我们可以开始构建我们的静态站点了。你可以使用 React、Vue 或者 Angular 等框架来构建它。在这里，我们将使用 Create React App 来创建我们的站点。

npm install -g create-react-app
create-react-app my-site

这会在你的计算机上创建一个新的 React 项目。现在编辑 my-site/src/App.js 文件。这个文件是主要的站点文件。我们稍后将在这里添加 Strapi API。

// javascriptcn.com 代码示例
import React, { useEffect, useState } from 'react';

function App() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch('http://localhost:1337/articles')
      .then(response => response.json())
      .then(data => setArticles(data));
  }, []);

  return (
    <div>
      <h2>Articles</h2>
      <ul>
        {articles.map(article => (
          <li key={article.id}>
            <h3>{article.title}</h3>
            <p>{article.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

步骤8：运行并测试

现在我们已经完成了所有工作，可以进入你的 Strapi 项目并运行它，然后转到你的 React 应用程序并启动它，以确保一切都能正常工作。

# 在 Strapi 中
npm run develop

# 在 React 中
npm start

你现在应该可以访问“http://localhost:3000/”并看到一个简单的 React 网站，其中包含了由 Strapi 提供的文章数据。

总结

在本文中，我们探讨了什么是 Headless CMS，以及如何使用 Strapi 来创建我们自己的 Headless CMS。然后，我们学习了如何使用 Strapi 的 API 创建器来生成 API，并如何在我们的 React 前端站点上使用这些 API。

尽管 Strapi 是我们构建 Headless CMS 的一种方式，但事实上还有很多其他选择可供选择。无论你选择了哪种，使用 Headless CMS 可以大大增强在前端设计和构建项目的能力。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653342887d4982a6eb6c3ca5

独立 Headless CMS 创建静态网站，你有这个能力吗？

前言