18868949445

襄阳企业网站建设:用GatsbyJS构建一个无头WordPress网站

日期:2020-03-07 阅读:1011   作者:襄阳网站设计开发公司

最近,我们襄阳企业网站建设看了看在“无头”WordPress配置的上升趋势。该术语描述了在WordPress中创建内容的过程,然后将其推送到另一个应用程序中使用。在本质上,这是为了分离(或解耦)前端和后端。

这种设置的一个更令人兴奋的特点是能够在CMS的熟悉范围内创建内容,并使用它来提供您想要的任何东西。其中最常见的目的地将是移动应用程序,渐进的Web应用程序和静态网站。

今天,重点将放在后者。我们将带您完成使用无头WordPress安装来创建静态网站的过程。为此,我们将利用GatsbyJS一个基于反应的框架,可以与WordPress协同工作。

结果将是一个基本的静态网站,将运行令人难以置信的快速,同时让我们保持内容管理能力的WordPress。让我们开始吧!

快速查看GatsbyJS

GatsbyJS已经成为生成静态网站的流行工具。它提供了很多灵活性,同时也提供了大量的灵活性。插件开胃菜帮助你的项目进行得相当快。这远远超出WordPress,具有与许多不同的CMS和其他数据源一起工作的能力。

但是为了我们的目的,WordPress兼容性正是我们所要寻找的。还有一些WordPress专用初学者,我们正在采取非常严厉的方法。初学者是优秀的,但确实有一些依赖性会让初学者感到意外。

襄阳企业网站建设

要求

为了使用GatsbyJS,您需要熟悉命令行。而且,除其他事情外,你还需要J.N. ,吉特以及盖茨比安装在Web服务器或本地机器上的工具(这是我们正在构建演示的地方)。

您可能想知道:本地机器是如何建立的?虽然我们这里不会涉及太多细节,但有很多方法可以解决。例如,XAMMP(我们正在使用)是一个伟大的选择,并将在Mac OS,Windows和Linux上工作。本质上,这是一个下载你想要的服务器,安装它然后点击命令行的问题。

有一个教程可供您通过您所需的各种软件包为您的特定环境。

另一个大的要求是,当然,安装WordPress。若要将数据从WordPress推到GATSBYJS静态网站,可以使用默认REST API这是建立在CMS中的。

内部WordPress

在WordPress网站内部,我们创建了一系列测试页面,以及一个测试博客帖子。当第一次试验时,你不需要做更多的事情。

另外,我们把我们的页面放在一个名为“主菜单”的菜单中。

默认情况下,在Rest-API中没有可用的WordPress菜单。安装WP休息API菜单插件会起作用。我们也将使用它来帮助在静态站点上自动创建菜单。

襄阳企业网站建设

创建一个新的GATSBYJS网站

因此,我们在本地机器上安装了必要的命令行软件,并在远程Web主机上创建了一个新安装的WordPress(WP REST API菜单插件被安装和激活)。

根据GATSBYJS文档我们需要运行一个命令来创建一个新的网站。首先,导航到您想构建的目录(我们正在使用)C:\gatsby在Windows 10机器上。我们将偏离它们的注释,因为我们将使用自定义站点标题。“1WD静态”(这将创建一个同名的文件夹)。

下面是建立这个新网站的命令:

gatsby new 1wd-static

这个命令需要一点时间运行,因为它安装了包。当进程结束时,我们可以通过命令行导航到新的站点。在我们的例子中,它是:

cd 1wd-static

可以。我们在创建静态网站的目录中。

接下来,我们将安装盖茨比源-WordPress插件这允许我们从WordPress获取数据:

npm install gatsby-source-wordpress

此外,Gatsby插件-站点地图盖茨比插件将被安装,因为它们是我们稍后使用的演示代码的依赖关系:

npm install gatsby-plugin-sitemap gatsby-plugin-sass

现在,是时候让GatsbyJS进入发展模式 :

gatsby develop

如果一切顺利,您现在应该能够通过浏览访问Web浏览器中的站点。http://localhost:8000

到目前为止,这个网站并不是什么新奇的东西,只是一个默认内容的基本页面。我们仍然需要配置一些文件来让GatsbyJS和我们的WordPress站点交谈。

The GatsbyJS starter home page.

提示:如果你需要澄清这个过程,看看这个有用的教程在GATSBYJS官方博客上。

将网站内容从WordPress推到GatsbyJS

我们旅程的下一步是从我们的WordPress安装抓取内容,并把它放入我们的GATSBYJS静态网站。

这个过程的第一部分是定制一些GATSBYJS文件。

下载和替换文件

在我们襄阳企业网站建设前进之前,你会想要下载副本示例GATSBYJS站点并替换现有文件。为了从WordPress安装中抓取页面和帖子,一些文件已经从默认状态被更改。还有一个吉特库如果你想看看周围的文件。

这个原始代码感谢Tim Smith,他写了我们上面提到的GatsbyJS博客教程。

改变的选择:

假设您已经下载了上面所需的文件,只有一个地方需要进行更改。打开gatsby-config.js,位于静态网站的根文件夹中。

头到阅读部分:resolve: "gatsby-source-wordpress"看看下面的内容:

Baseull:“GassByPress。IAMTimSmith.com”,/ /更改到您的WordPress URL,没有“http://`协议:http://httpPS,如果您在您的WordPress网站上安装了SSL。否则,使用HTTPHOSTION WPCCOM:FALSE,/ /保持为“false”,除非您与WordPress网站托管。

再往前一点,寻找:

searchAndReplaceContentUrls: {
sourceUrl: "http://gatsbypress.iamtimsmith.com", // Replace with the full URL of your WordPress website.
replacementUrl: "https://localhost:8000", // The local URL of your GatsbyJS website – this should be fine as-is.
},

测试

既然我们已经定制了gatsby-config.js是测试的时候了!为了让GatsbyJS认识到我们安装的更新的文件,我们需要:

  1. 重新启动本地服务器;
  2. 在命令行中,导航到我们的静态网站存在的文件夹中,

    /1wd-static/

然后,输入以下命令:

gatsby develop

一旦GatsbyJS启动,测试站点将再次提供:http://localhost:8000

结果

它起作用了!静态网站现在在首页显示我们的博客文章,而顶部导航菜单将引导访问者进入我们的辅助页面。注意站点的标题也反映了我们在WordPress中设置的内容。

这个网站还没有准备好公开消费,但我们有一个很好的基础。

The GatsbyJS website, using content from WordPress.

向前移动

现在我们有了一个无头配置的基础,有很多好吃的东西要补充。其中最明显的是设计。检查文档,看看如何风格GatsbyJS网站使用主题 .

我们的演示中缺少的另一件东西是图像,它被覆盖在向WordPress站点添加图像 .

最后,如果您正在寻找网站建设过程的完整和全面的指南,请查看此网站。循序渐进的教程. 它将带您通过网站的建立、开发和推出。

最后的想法

襄阳企业网站建设建立一个无头WordPress配置的经验充满了起伏,有时甚至有点令人沮丧。这是意料之中的,因为在使用新工具时几乎总是有学习曲线。然而,一旦你把过程弄下来,更好地了解GatsbyJS正在做什么,事情就会改善。

也就是说,值得花时间去阅读文档。单独设置GatsbyJS比WordPress复杂得多。好像一个错误的举动导致了大量的错误信息。每次都需要进行一些研究来解决问题。

一旦你运行它,你就会明白为什么开发人员采用这种方法。我们只是处于起步阶段,但未来看起来非常光明。