Building a Headless WordPress Website with GatsbyJS

Recently, we took a seek at the rising trend of “headless” WordPress configurations. The word describes the process of creating content within WordPress, then pushing it out for use in another application. In essence, this works to separate( or decouple) the figurehead and back ends.

One of the more exciting features of this setup is the ability to create content within the familiar confines of a CMS and use it to feed just about anything you want. Among the more common destinations for this content would be mobile apps, progressive web lotions and static websites.

Today, the focus will be on the latter. We’ll make you through the process of using a headless WordPress installation to create a static website. For this, we’ll utilize GatsbyJS, a React-based framework that can work in tandem with WordPress.

The result will be a basic static website that will run incredibly fast, while allowing us to keep the content management cleverness of WordPress. Let’s get started!

UNLIMITED DOWNLOADS: 500,000+ WordPress& Design Assets

DOWNLOAD NOW

A Quick Look at GatsbyJS

GatsbyJS has become a popular tool for rendering static websites. It offers a good deal of flexible, as well as a number of plugins and starters to help get your job departing rather quickly. This goes well beyond WordPress, with the ability to work with a number of different CMS and other data sources.

But for our purposes, WordPress compatibility is exactly what we’re looking for. And while there are some WordPress-specific starters accessible, we’re taking a very barebones approach. The starters are outstanding, but do have some dependencies which could trip up beginners.

The GatsbyJS home page.

Requirements

In order to use GatsbyJS, you’ll need to familiarize yourself with the bidding wrinkle. And you’ll need, among other things, to have Node.js, Git and the Gatsby CLI implement invested on your network server or regional machine( that’s where we’re building our demo ).

You may be wondering: How is a regional machine put in? While we won’t go into too much detail here, there are a number of ways to go about it. For pattern, XAMMP( which we’re exerting) is a great option and will work on Mac OS, Windows and Linux. In essence, it’s a matter of downloading the server you miss, lay it and then reaching the dictation line.

There’s a tutorial accessible that will walk you through the various software packages you need for your particular environment.

The other big requirement is, of course, an installation of WordPress. To push data from WordPress to your GatsbyJS static website, you can use the default REST API that comes built into the CMS.

Inside WordPress

Inside our WordPress site, we created a handful of measure sheets, along with a test blog post. You don’t need to do anything more than this when firstly experimenting.

In addition, we put our sheets in a menu announced “Main Menu”.

By default, WordPress menus aren’t available in the REST-API. Installing the WP REST API Menus plugin will do the trick. We’ll be using this as well to help auto-create menus on our static site.

Our headless WordPress website.

Creating a New GatsbyJS Website

So, we’ve invested the necessary command line software on our neighbourhood machine and developed a fresh invest of WordPress( with the WP REST API Menus plugin invested and triggered) on a remote network host.

According to the GatsbyJS documentation, we need to run a bid in order to create a new website. First, steer to a directory where you’d like to build( we’re utilizing C :\ gatsby on a Windows 10 machine ). We’ll deviate a little from their notes, as we’ll be using a custom-built area entitlement “1wd-static”( which will create a folder with the same name ).

Here’s the bidding for structure this new website 😛 TAGEND gatsby brand-new 1wd-static

The command takes a little time to run, as it installs the box. When the process finishes up, we can navigate to that brand-new site via the authority boundary. In our contingency, it’s 😛 TAGEND cd 1wd-static

Okay. We’re in the directory where our static website has been created.

Next, we’ll install the gatsby-source-wordpress plugin. This allows us to deliver data from WordPress 😛 TAGEND npm position gatsby-source-wordpress

In addition, gatsby-plugin-sitemap and gatsby-plugin-sass will be installed, as the issue is addictions for the demo system we’ll utilize later on 😛 TAGEND npm set gatsby-plugin-sitemap gatsby-plugin-sass

Now, it’s time to introduced GatsbyJS into development mode 😛 TAGEND gatsby develop

If everything get smoothly, you are able to now be able to view the area in your web browser by inspect http :// localhost :8 000

The site is nothing fancy so far, merely a basic page with default material. We still have to configure some registers to get GatsbyJS talking to our WordPress site.

The GatsbyJS starter home page.

Tip: If you need clarification on the process, check out this helpful tutorial on government officials GatsbyJS blog.

Pushing Site Content from WordPress to GatsbyJS

The next tread on our wander involves grabbing the content from our WordPress install and feeding it into our brand-new GatsbyJS static website.

The first part of the process is in customizing some GatsbyJS files.

Download and Replace the Files

Before we move along, you’ll want to download a transcript of the pattern GatsbyJS site and change the existing registers. Several of the registers have been changed from the default in order to grab sheets and uprights from a WordPress position. There existed a GitHub repository of the enters if you’d like to take a look around.

The original code is courtesy of Tim Smith, who wrote the GatsbyJS blog tutorial we referenced above.

Options to change:

Assuming you have downloaded the necessary enters above, there is only one place you’ll need to make changes. Open up gatsby-config.js, located along the spring folder of the static website.

Head to the section that speaks: solve: “gatsby-source-wordpress” and take a look at the following 😛 TAGEND baseUrl: “gatsbypress.iamtimsmith.com”, // Change to your WordPress URL, without the’ http :// ’. protocol: “https”, // Use https if you have SSL set on your WordPress website. Otherwise, use http. hostingWPCOM: inaccurate, // Keep as’ false’ UNLESS you are hosting with WordPress.com.

A little furthest down, “ve been looking for” 😛 TAGEND searchAndReplaceContentUrls: sourceUrl: “http :// gatsbypress.iamtimsmith.com”, // Replace with the full URL of your WordPress website. replacementUrl: “https :// localhost :8 000 “, // The regional URL of your GatsbyJS website- this should be fine as-is. , Testing

Now that we’ve customized gatsby-config.js, it’s time to research! In seek for GatsbyJS to recognize the updated records we’ve lay, we’ll it is necessary to 😛 TAGEND

Restart the local server; In the authority boundary, navigate over to the folder where our static website exists,/ 1wd-static/

Then, enroll the following command 😛 TAGEND gatsby develop

Once GatsbyJS starts up, the test site will be available once again at: http :// localhost :8 000

The Results

It designs! The static website now displays our blog announces on the front sheet, while a top navigation menu will address visitors to our secondary pages. Notice the site’s title too reflects what we set in WordPress.

The site is not ready for public uptake just yet, but we’ve have a great foundation to build on.

The GatsbyJS website, using content from WordPress.

Moving Forward

Now that we have the basics of a headless configuration, “theres plenty” of goodies to add. The most obvious of them is the design. Check out the documentation to see how to style a GatsbyJS website and use a theme.

Another thing missing from our demo are likeness, which is covered in Adding Images to a WordPress Site.

Finally, if you’re looking for a complete and thorough guide to the site building process, check out this step-by-step tutorial. It will take you through site put in, improvement and launch.

Final Estimations

The experience of construct a headless WordPress configuration is fraught with ups and downs- sometimes even a bit discouraging. That’s to be expected, as there is just about ever a learn bow when experimenting with new implements. However, once you get the process down and advantage a better understanding of what GatsbyJS is doing, things improve.

That being said, it’s worth taking the time to read the documentation. Setting up GatsbyJS is much more intricate than WordPress alone. It is just like one false move led to lots of error meanings. Each experience, some study was required to sort things out.

Once you get onto guiding, though, you can see why developers are adopting this approach. We’re exactly in the beginning stages, but the future searches immensely bright.

Read more: 1stwebdesigner.com.