使用 Gatsby 和 Strapi 构建网站 - 简介

想象一下，你想建立一个功能强大且快速的网站。例如，一个公司网站，包含一个博客。你会使用什么？Wordpress？Laravel？Drupal？

嗯，这些都是不错的选择。

如果我们看一下网络上最常用的 CMS 图表（根据 Wappalyzer），Wordpress 显然是最常用的 CMS

如果我们看一下最常用的 Web 框架，我们会发现有很多东西可以玩。

但如果我们有不同的想法呢？

我的意思是，上一次有人这样做时，他创造了一个价值 1.3 万亿美元的苹果。

好吧，在本教程中我们将学习不同的思维方式。

管理数据的另一种方式

如果你看一下CMS图表，我们会看到Wordpress和Drupal。它们有什么共同点？

它们都管理前端内容。目前来说，它们没什么新意，只是一些普通的CMS。

事实上，Wordpress 和 Drupal 都有前端和后端。

我们项目的关键词是灵活性和力量。

无头 CMS 来了

无头 CMS 是指没有表现层的 CMS。它只是一个后端。

我不会详细解释什么是无头CMS，因为已经有很多很棒的文章了。如果你想的话，可以看看这篇。

无头 CMS 非常适合前端开发人员，因为它们在设计 UI 时具有更大的灵活性。

我不是前端开发人员，但是当我构建我的网站时，我想要一些简单而强大的东西。

我们将要构建的数据（文章和页面）将通过 API 访问。我们只需使用 GraphQL 的 API 查询来获取这些数据即可。

我们应该使用哪一个 CMS？

市面上有很多 Headless CMS，比如 Netlify、Ghost、Contentful 等等。但我们将要使用的 CMS 叫做Strapi。Strapi是一款在法国构建的全新强大的 Headless CMS。

你可以在这里查看我关于发现 Gatsby 和 Strapi 的文章

我选择 Strapi 是因为它很新而且非常容易使用。

好的，现在我们有了无头CMS。但是只有后端的网站是什么呢？

我们现在需要一种构建前端的方法。为此，我们发明了一种叫做静态站点生成器的东西。你听说过它吗？

让我们快速浏览一下最常用的静态站点生成器的 wappalyzer 图表：

看看第一个结果。它叫做Gatsby，我们将用它来做这个网站。

我邀请您查看 Gatsby 的网站来了解这个非常强大的工具。

Gatsby 基于 Javascript，更具体地说，它是一个基于 Reactjs 的框架。

这对我们来说非常完美，React.js 使我们能够构建强大的 Web 应用（PWA → Progressive Web App）。React.js 也非常适合用户体验设计。再次强调，我不会写太多关于 React 的文章，我鼓励你去看看其他关于 React 的博客文章。

React 还允许我们在与 UI 相同的文件中实现逻辑。

现在我们知道我们将使用Gatsby和Strapi。

部署和生产

当我们建立我们的网站时，我们需要部署它以便在网络上访问。

为此，我们将了解如何使用 Now 服务器在 heroku 上部署我们的 CMS，并在 Vercel（以前称为 ZEIT）上部署我们的网站。

对于本系列教程，我将每周至少上传一篇文章。我们将了解创建一个简单网站所需的一切。除了这些文章之外，我还会尽快上传视频，以便完成整个项目，并让大家对这个项目有一个完美的了解。

教程将在我的网站（主要）和此帐户上提供。

很快会看到你并继续编码！

托马斯