典型的动态网站（例如基于 WordPress 的网站）如何工作？当访问者在浏览器上输入URL或通过链接访问您的网站时，会向您的Web服务器发送请求。 服务器通过必要的数据库查询收集所需的数据，并生成一个HTML文件供您的浏览器显示。另一方面，静态站点将这些响应存储到服务器上的平面文件中，这些文件会立即传递给访问者。 静态站点生成器已经存在了很长时间，但它们最近变得越来越流行。在本分步指南中，我们将了解如何将WordPress与静态网站生成器Gatsby集成。 什么是Gatsby？ 第1步：设置Gatsby 第2步：如何将Gatsby连接到WordPress 第3步：创建基本页面模板 第4步：高级迁移任务 什么是Gatsby？ WordPress创建动态网站，需要在服务器上安装一堆PHP、MySQL和Apache或Nginx才能运行。可以通过为您网站上的所有内容生成HTML页面列表来创建WordPress的静态版本。 这个静态版本的WordPress称为无头WordPress或无服务器WordPress。此转换过程只需执行一次，以便可以多次向访问者提供同一页面。您如何将您的WordPress网站转换为静态版本？这就是Gatsby出现的地方。 Gatsby或GatsbyJS是一个使用ReactJS构建并由GraphQL提供支持的静态站点生成器。Gatsby允许任何人创建功能丰富、引人入胜的网站和应用程序。Gatsby通过GraphQL从各种来源（包括现有网站、API调用和平面文件）为您的站点获取数据，并根据您指定的配置设置构建静态站点。 Gatsby是一年前才开发出来的，但大量用户都在尝试Gatsby。Gatsby在各种环境中都得到了认可。Airbnb的数据科学与工程博客的主页由Gatsby提供支持，但实际的博客文章托管在Medium上。 Airbnb的工程与数据科学博客 BRAUN（博朗）是消费品公司宝洁的品牌。它的加拿大站点由Gatsby托管，而站点上的搜索功能由React提供支持。 博朗品牌的加拿大网站 此外，Gatsby还激发了自由职业者开发人员对其作品集的兴趣。诸如Jacob Castro的作品集主要包含静态内容，其中包含作品链接和电子邮件联系方式，因此静态网站非常适合他的需求。 Jacob D. Castro的作品展示站 为什么选择Gatsby？ 快速网站： 使用Gatsby构建静态网站的主要好处是速度，自从Google宣布在网络搜索排名中使用网站速度以来，网站管理员一直在努力优化速度。加载时间也会影响页面浏览量和转化率。据估计，网站加载时间延迟一秒会导致转化次数减少7%。 安全性： 您还可以通过静态站点获得额外的安全性。由于提供的是一堆静态文件，因此没有什么可破解的。此外，如果静态文件丢失，您始终可以重新生成它们。 服务器成本：托管动态站点需要您的服务器与您的技术堆栈兼容。如果您使用的是静态站点，则几乎可以在任何服务器上托管它，这也降低了与托管相关的成本。 在每次更改时使用Gatsby生成静态站点确实需要JavaScript，这也可以在将静态文件传输到站点之前在本地计算机上完成。 为什么要避开Gatsby？ 没有内置动态内容： 如果你想使用Gatsby，你需要重新考虑如何控制和提供动态内容，即你需要创建静态/动态的混合来实现这一点（更多关于这个以下）。 例如，评论需要通过像Disqus这样的服务在外部托管。 联系表格还需要通过Google表格等外部合作伙伴重新发送。简而言之，您将失去对此类动态内容的直接控制，因为它们的响应未存储在您的服务器上。 频繁构建不方便： 静态站点也存在频繁重新转换的问题。只有在重新生成页面并将其重新上传到服务器后，您在网站上所做的任何更改才会反映出来。 技术专长： Gatsby建立在ReactJS和GraphQL之上。因此，需要一些JavaScript知识和GraphQL的基本概念来处理网站并将其移植到Gatsby。 静态网站非常适合那些正在寻找具有高安全性的低成本解决方案的人。一些用例是自由职业者的投资组合网站和产品演示网站。 如果您认为好处大于缺点，那就太好了！我们现在将尝试设置Gatsby以与我们的WordPress站点集成。 我们在本教程中构建的Gatsby站点的最新版本在GitHub上可供您使用。 第1步：设置Gatsby 在本节中，我们将了解如何安装Gatsby并使用Gatsby创建一个基本的静态站点。 先决条件 开始使用Gatsby的第一步是检查其先决条件。Gatsby通过npm（NodeJS包安装程序）提供服务。因此，在安装Gatsby之前，您的环境中需要NodeJS和npm。此外，Gatsby要求您安装源代码管理系统Git。 如果您运行的是Windows，您可以通过下载页面上的安装程序安装NodeJS和Git。在Mac上，您可以下载他们的安装程序或使用自制软件。 brew install nodejs brew install git 如果您运行的是Linux操作系统，则可以通过apt之类的包安装程序安装NodeJS。 sudo apt update sudo apt […]
