-husskie Inurl:wp.com Fashion Blogger {midlife | Over40 | Over30 | Empty Nest}

With the growing popularity of JavaScript frameworks and tools for web development, information technology pays to look at engineering science that makes building sites easier. Gatsby is an open-source framework built using React, which is a great manner to create a static site. What'south more, a killer Gatsby feature is that it tin can pull in content from many different sources – including your WordPress site.

In this post, we'll go over what Gatsby is, why yous should retrieve near it for your next WordPress project, and how to ready it upwards.

What isGatsby?

In the simplest terms, Gatsby is a static site generator. If you lot want to create a bunch of fully-styled HTML pages without having to duplicate and manage all the repeating bits of HTML yourself, a static site generator is the tool for y'all.

For the unaware, this type of generator takes your dynamic PHP template files and data and turns them into static HTML pages. It'south a similar premise to publishing platforms from the early 2000s such as Movable Type, in that the static pages can be regenerated once the dynamic content changes. Back then it was known every bit the "broiled" (static) vs "fried" (dynamic) debate. "Fried" ultimately won out, but "broiled" is making a comeback, with Gatsby being at the forefront of this improvement. Withal, Gatsby approaches "baking" a site in a slightly dissimilar way.

Gatsby is part of a modern web development architecture blueprint known as Jamstack, which stands for Javascript, API, and Markup, the Markup section being the generated static HTML pages.

At that place are three key reasons why Gatsby should be on your 'spotter listing':

• It'south a pop platform among many Jamstack developers.
• Gatsby supports a broad multifariousness of data sources through plugins (such every bit WordPress, Drupal, and Shopify).
• React is a vital cog in Gatsby'due south cycle, which gives yous lots of power and flexibility. If you're unfamiliar with React, it'southward a JavaScript framework for edifice interfaces. Its ability and flexibility comes from the fact that React components not only accept input information and render the appropriate markup but can as well maintain internal state information and update the rendered markup based on the country changes.

The benefit of static sites is that they're fast (because the backend lawmaking isn't processed at every page request), mostly easier to maintain (even if something goes wrong with the source of the information, the static pages volition notwithstanding work), and because in that location aren't whatsoever server-side requests that crave input data to process, more secure. Yous generate the static files, deploy them to the server, and your site updates are alive.

Static site generators such equally Jekyll are longstanding tools for static web evolution. The difference between these and tools like Gatsby is that the Jamstack generators permit you lot specify content 'sources', such equally a WordPress installation.

This is near the literal definition of 'headless or decoupled WordPress'. While the Content Management Organization (CMS) powers the content and information, the static site generator handles the frontend.

As we've discussed, Gatsby uses React equally the JavaScript layer for templating but uses GraphQL as the API layer in the Jamstack. GraphQL is a newer, more flexible method to query data, and is often used as a replacement for a REST API. Finally, Instead of rendering React components at runtime, Gatsby creates HTML templates (the Markup) ahead of time using the Gatsby CLI.

If you're already familiar with React, setting upwards and using Gatsby is fairly straightforward. Gatsby has a adequately robust plugin community, and in that location is besides no shortage of tutorials and documentation on how to use WordPress equally your content provider.

Getting Fix Upwardly With Gatsby andWordPress

Throughout much of this commodity, we're going to develop a static site. Though, there are a few things you lot need to set upward Gatsby to utilize WordPress equally a data source. The Gatsby documentation has a good overview of what you'll need.

For clarity, here's the list:

• If you lot need to install Node, you should exercise this now.
• You'll as well demand to install Git on your figurer.
• You'll demand a live WordPress install, and if you don't you can fix up 1 inside minutes using SpinupWP.
• The gatsby-cli tool, which yous'll use to create your new Gatsby site.

If you lot need to install Git, Mac users can do this using Homebrew and the brew install git command. For Windows users, there's a dedicated installer. Ubuntu and Debian Linux users tin run sudo apt-become install git, while Fedora users can run sudo dnf install git.

It'due south likely that y'all already have Node installed, but there are installers available for all platforms if y'all don't. Mac users can also do this using brew install node. The only prerequisite hither is that y'all install Node commencement, as everything else is dependent on it.

To install the gatsby-cli, you can use the Node Package Manager (npm), with the post-obit shell command:

          npm install -g gatsby-cli                  

You might find that the install process will throw up some deprecated dependencies, but this isn't something to worry about here. Your goal is to see an analytics consent screen, as this indicates Gatsby and the Command Line Interface (CLI) is installed:

Notation that nosotros've had some success with the install process on Apple Silicon machines, although in some cases at that place seems to be an effect with Node and its related packages rather than Gatsby itself. If you receive errors such as gatsby: command not institute, y'all may need to delete your node_modules directory, and reinstall gatsby-cli.

At this point, you're fix to rock and scroll! There are many 'starters' for Gatsby – in other words, average themes and predefined settings for your Gatsby site.

You tin can see a full list in the Starter Library. There are fifty-fifty a couple pre-built for WordPress. The "gatsby-wordpress-starter" theme is perfect for our needs here, and to install it run the following:

          gatsby new /path/to/my-wordpress-gatsby-site https://github.com/gatsbyjs/gatsby-starter-wordpress-weblog                  

This initializes a new Gatsby example (using gatsby new), and specifies a target folder and starter theme. For the target binder, the path you requite here will be the location where you desire to build the local site on your computer. If the directory doesn't exist, Gatsby will create it for you.

Once Gatsby is done creating the local site, you'll desire to install two plugins on your live WordPress site, to plough it into a Gatsby data source:

• WPGatsby. This plugin will optimize your site to work as a Gatsby information source.
• WPGraphQL. This plugin provides GraphQL capabilities for your WordPress site, which Gatsby uses in place of the WordPress REST API.

You lot can install these plugins in the standard way inside WordPress. Together, these plow your site into a Gatsby information source, but you lot still demand to configure your local starter site.

The only alter is in the gatsby-config.js file within your new local Gatsby site directory. You can open up this up with any your favorite code editor is, and change the GraphQL URL for your alive WordPress website:

Once you're ready, y'all tin can switch to the local Gatsby site directory in the command line, and run the Gatsby develop command

          cd /path/to/my-wordpress-gatsby-site gatsby develop                  

Yous'll see Gatsby run through its process of generating the static site files. Y'all may see an error message noting that y'all need to install the Mitt bundle.

This is a tiny result emitter and observer that Gatsby requires, so one time you run npm install mitt, try gatsby develop over again, and the procedure should complete. If everything works, y'all tin browse to http://localhost:8000. This should show the local re-create of the Gatsby site, generated using the source information from WordPress, which needs deployment in gild to make information technology live:

Heady! Next, allow's look at the data sources in some more detail.

DataSources

Previous versions of Gatsby had more convoluted workflows to set WordPress up equally a data source. Now yous just install a couple of plugins and much of this work is done for you lot.

WPGatsby and WPGraphQL do all the heavy lifting here to get data for your site. This is ane of the cardinal selling points of using Gatsby over another static site generator. Hither are a couple of points to remember:

• Information in Gatsby sites can come from about anywhere: APIs, databases, CMSs, local files, and more.
• The plugins fetch information from its named source. In other words, the plugins know how to fetch information from the file arrangement and the WordPress APIs.

In this case, we're looking to make information from our WordPress site available to the static site generator process, which in turn generates your static site. This is what both plugins do in part. They will let WordPress piece of work as a information source, and set up the relevant GraphQL resources that Gatsby requires.

The Gatsby documentation has further details on the exact changes, merely given that the plugins work on this under the hood, nosotros don't need to comprehend the full details here.

GraphQL for themasses

For the unaware, GraphQL is an alternative to using a REST API, only with much more command over the flow of data. With Gatsby, we don't actually need to know everything near GraphQL every bit Gatsby abstracts a lot of information technology away. Withal, it's useful to empathize the nuts of GraphQL.

GraphQL is fairly straightforward: y'all ask for the data you want and get it in return.

          query WpPosts {   allWpPost(sort: { fields: [date], social club: DESC }) {     edges {     post: node {         id         uri         title         excerpt     }     }   } }                  

This will return JSON-similar data that'southward very specific and exact:

          {   "information": {     "allWpPost": {     "edges": [         {         "post": {             "id": "cG9zdDozODU0",             "uri": "/how-to-become-your-team-on-board-with-your-brand-strategy/",             "title": "How to Get Your Team on Lath with Your Brand Strategy",             "excerpt": "<p>"What a curious feeling!" said Alice; "I must be shutting up like a telescope." And so it was indeed: she was now merely ten inches high, and her face brightened up at the thought that she was at present the right size for going through the little door into that lovely garden. First, however, she waited [&hellip;]</p>\n"         }         },         {         "postal service": {             "id": "cG9zdDozODUx",             "uri": "/vii-reasons-to-host-wordpress-yourself-in-2021/",             "title": "7 Reasons to Host WordPress Yourself in 2021",             "excerpt": "<p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to become out of that dark hall, and wander about amongst those beds of vivid flowers and those [&hellip;]</p>\n"         }         },         {         "post": {             "id": "cG9zdDozODQ4",             "uri": "/why-a-billboard-is-probably-the-last-matter-you-need/",             "championship": "Why a Billboard Is Probably the Concluding Thing You Need",             "excerpt": "<p>Down, downward, down. There was nothing else to do, and so Alice soon began talking again. "Dinah'll miss me very much to-nighttime, I should retrieve!" (Dinah was the cat.) "I hope they'll remember her saucer of milk at tea-time. Dinah my honey! I wish you were down here with me! There are no mice in the [&hellip;]</p>\n"         }         },         {         "post": {             "id": "cG9zdDozODQ1",             "uri": "/how-to-pick-a-proper noun-thats-truely-memorable/",             "title": "How to Pick a Name That's Truely Memorable",             "excerpt": "<p>Alice was outset to get very tired of sitting by her sis on the banking concern, and of having nothing to do: once or twice she had peeped into the book her sister was reading, merely it had no pictures or conversations in it, "and what is the use of a volume," thought Alice "without pictures [&hellip;]</p>\n"         }         }     ]     }   },   "extensions": {} }                  

With a REST API, the render values are whatever the API endpoints contain:

          coil https://example.com/wp-json/wp/v2/posts                  

You'll become a lot more data, of which merely some volition be relevant to your needs:

          [   {     "id": 3854,     "date": "2021-08-04T20:09:58",     "date_gmt": "2021-08-04T20:09:58",     "guid": {       "rendered": "https://source.hellfish.media/?p=3854"     },     "modified": "2021-08-04T20:13:47",     "modified_gmt": "2021-08-04T20:13:47",     "slug": "how-to-become-your-team-on-board-with-your-brand-strategy",     "status": "publish",     "type": "mail",     "link": "https://source.hellfish.media/how-to-become-your-team-on-board-with-your-brand-strategy/",     "title": {       "rendered": "How to Get Your Team on Lath with Your Make Strategy"     },     "content": {       "rendered": "<p>"What a curious feeling!" said Alice; "I must be shutting upwardly like a telescope."</p>\northward<p>And and so it was indeed: she was now just ten inches loftier, and her face brightened up at the idea that she was now the right size for going through the trivial door into that lovely garden. First, however, she waited for a few minutes to encounter if she was going to shrink any farther: she felt a picayune nervous near this; "for it might end, you lot know," said Alice to herself, "in my going out altogether, like a candle. I wonder what I should be similar and so?" And she tried to fancy what the flame of a candle is like after the candle is blown out, for she could non call up always having seen such a affair.</p>\n<p>Subsequently a while, finding that cipher more happened, she decided on going into the garden at once; only, alas for poor Alice! when she got to the door, she found she had forgotten the little golden key, and when she went dorsum to the tabular array for information technology, she constitute she could not possibly reach information technology: she could see it quite apparently through the glass, and she tried her all-time to climb up one of the legs of the table, only it was likewise slippery; and when she had tired herself out with trying, the poor little matter sabbatum down and cried.</p>\n<p>"Come, there's no use in crying like that!" said Alice to herself, rather sharply; "I advise y'all to leave off this minute!" She generally gave herself very good advice, (though she very seldom followed it), and sometimes she scolded herself so severely as to bring tears into her optics; and once she remembered trying to box her own ears for having cheated herself in a game of croquet she was playing against herself, for this curious child was very fond of pretending to exist two people. "Simply information technology's no employ at present," idea poor Alice, "to pretend to be two people! Why, at that place'south hardly plenty of me left to make one respectable person!"</p>\north<p>Soon her eye fell on a niggling glass box that was lying under the table: she opened it, and found in information technology a very small-scale cake, on which the words "EAT ME" were beautifully marked in currants. "Well, I'll eat it," said Alice, "and if it makes me grow larger, I can attain the key; and if it makes me grow smaller, I can creep under the door; so either manner I'll go into the garden, and I don't care which happens!"</p>\n",       "protected": false     },     "excerpt": {       "rendered": "<p>"What a curious feeling!" said Alice; "I must be shutting up like a telescope." And so information technology was indeed: she was now but ten inches high, and her confront brightened up at the idea that she was now the right size for going through the little door into that lovely garden. Beginning, even so, she waited&hellip; <a form=\"more-link\" href=\"https://source.hellfish.media/how-to-get-your-team-on-lath-with-your-brand-strategy/\">Continue reading <span class=\"screen-reader-text\">How to Get Your Team on Board with Your Brand Strategy</span></a></p>\n",       "protected": faux     },     "author": 2,     "featured_media": 3856,     "comment_status": "open",     "ping_status": "open",     "sticky": simulated,     "template": "",     "format": "standard",     "meta": [],     "categories": [       1     ],     "tags": [],     "_links": {       "self": [         {           "href": "https://source.hellfish.media/wp-json/wp/v2/posts/3854"         }       ],       "drove": [         {           "href": "https://source.hellfish.media/wp-json/wp/v2/posts"         }       ],       "about": [         {           "href": "https://source.hellfish.media/wp-json/wp/v2/types/post"         }       ],       "writer": [         {           "embeddable": true,           "href": "https://source.hellfish.media/wp-json/wp/v2/users/two"         }       ],       "replies": [         {           "embeddable": true,           "href": "https://source.hellfish.media/wp-json/wp/v2/comments?post=3854"         }       ],       "version-history": [         {           "count": 1,           "href": "https://source.hellfish.media/wp-json/wp/v2/posts/3854/revisions"         }       ],       "predecessor-version": [         {           "id": 3855,           "href": "https://source.hellfish.media/wp-json/wp/v2/posts/3854/revisions/3855"         }       ],       "wp:featuredmedia": [         {           "embeddable": true,           "href": "https://source.hellfish.media/wp-json/wp/v2/media/3856"         }       ],       "wp:attachment": [         {           "href": "https://source.hellfish.media/wp-json/wp/v2/media?parent=3854"         }       ],       "wp:term": [         {           "taxonomy": "category",           "embeddable": true,           "href": "https://source.hellfish.media/wp-json/wp/v2/categories?post=3854"         },         {           "taxonomy": "post_tag",           "embeddable": truthful,           "href": "https://source.hellfish.media/wp-json/wp/v2/tags?post=3854"         }       ],       "curies": [         {           "proper noun": "wp",           "href": "https://api.west.org/{rel}",           "templated": true         }       ]     }   },                  

That's just one mail service!

This can pb the REST API to over and/or nether fetch information.

As well with a Rest API, yous'll often demand to make multiple requests to different endpoints to get all the data yous need. With GraphQL you ask the server for the specific data you're looking for in one request.

As well, the format of the asking and the response are the same, considering of a standard schema and type arrangement shared betwixt the server and client.

Gatsby includes a tool called GraphiQL running on http://localhost:8000/___graphql. By the way, that is a triple underscore (nosotros're going to money it a "tunder"). This is like phpMyAdmin for GraphQL, allowing you to test out queries.

While yous're able to type straight into the code area, you tin besides choose different query functions from the left-hand "Explorer". If yous practise this, the query area will car populate with the updated query and acquit out some initial query formatting.

You tin can also choose the data types from the "Explorer", and this will also come with pre-applied formatting:

From hither, it's not a stretch to put together a full query. As an example, here's the query in the gatsby-node.js file (we'll talk about this more than in the next department), used to query the WordPress posts from the source site:

          query WpPosts {   # Query all WordPress weblog posts sorted past date   allWpPost(sort: { fields: [date], order: DESC }) {     edges {     previous {         id     }      # notation: this is a GraphQL alias. Information technology renames "node" to "mail" for this query     # We're doing this because this "node" is a mail service! It makes our code more than readable farther downward the line.     post: node {         id         uri     }      next {         id     }     }   } }                  

If you run this query in your local GraphiQL tool, it will render a JSON response from your WordPress website:

You'll notice that the id in the response doesn't correspond to the WordPress post ID, but rather a unique identifier that the WP GraphQL plugin assigns to posts. When using Gatsby to generate static pages from your source site, you'll want to run a query similar this (or let Gatsby do information technology) to grab the right data.

The GraphiQL tool is fun to use, and can help you test out the queries you demand to return the correct data. However, this highlights another advantage of using Gatsby with a WordPress starter theme, Gatbsy does everything you need under the hood anyway.

How to Convert WordPress data to Gatsbypages

At this betoken, let'southward look at the gatsby-node.js file nosotros were using in the last section. This file is where we transform our WordPress information into Gatsby pages.

In past versions of Gatsby, you'd need to add queries in order to convert information into pages. The current setup procedure is slicker than before, so lots of this work is washed for you.

The file itself is structured with lawmaking to create the site's web log posts, then gets into the GraphQL queries. As we mentioned, the query from the final department is verbatim from the gatsby-node.js file.

The code preceding it – specifically the createPages method volition take the results of these queries and turn them into site weblog posts.

          exports.createPages = async gatsbyUtilities => { // Query our posts from the GraphQL server const posts = expect getPosts(gatsbyUtilities)  // If there are no posts in WordPress, don't practise anything if (!posts.length) { render }  // If there are posts, create pages for them await createIndividualBlogPostPages({ posts, gatsbyUtilities })  // And a paginated archive await createBlogPostArchive({ posts, gatsbyUtilities }) }                  

Y'all'll detect that Gatsby already has a blog mail template in place – y'all can find them all in /src/templates/ – and it turns the named template into a defended component to work with further:

          component: path.resolve(`./src/templates/blog-post.js`),                  

Once more, because Gatsby does a skillful job of setting upward templates and layouts, we won't get also far into the process (although there are good tutorials elsewhere).

The output of the GraphQL query is injected equally a property (here using context) so we can use information technology in our component.

Whenever you make changes to your installation, you lot'll take to run gatsby develop again to run into them. With this we have the basics of our site going. Though, there are some caveats to note, specially with styling – allow's look at this at present.

Caveats

If we were betting people, we'd put a wager on the dynamic aspects of WordPress being a big draw for development. This brings about a few caveats when it comes to your new Gatsby site that volition require you to get stuck into the code.

For case, yous'll notice early on that Gatsby doesn't replicate (or even pull in) the layout and style of the parent site. While the source web log isn't full of bleeding-edge styling…

…it doesn't become implemented into the Gatsby site at all.

In these cases, y'all'll want to use something like React Way Components to straighten out the look of your new site. This should exist familiar to React users, although it's worth summing upwards the process:

• Create a page or reusable component.
• Apply CSS (or use a suitable scripting linguistic communication such every bit Sass or Less) to that component to style it in the fashion you need.

Nosotros're going to apply CSS Modules here, as this is a recommendation within the official documentation. Nevertheless, Gatsby gives you flexibility to use the arrangement you're most comfortable with.

To use CSS Modules, create a file in your components directory with the suffix module.css in order for Gatsby to recognize them (e.m. src/components/layout.module.css). Inside the module file, you can create your style class.

          .container {   margin: motorcar;   max-width: 500px;   font-family: sans-serif; }                  

Once you have your style classes set in your module, you and then import them back into any layout component (the default layout for the "gatsby-wordpress-starter" theme is src/components/layout.js) and utilize them using the className property on the element you desire the fashion applied to:

          import React from "react" import { Link, useStaticQuery, graphql } from "gatsby" import parse from "html-react-parser" import { container } from './layout.module.css'  const Layout = ({ isHomePage, children }) => {   const {     wp: {     generalSettings: { championship },     },   } = useStaticQuery(graphql`     query LayoutQuery {     wp {         generalSettings {         title         description         }     }     }   `)    return (     <div className="global-wrapper" data-is-root-path={isHomePage}>     <header className="global-header">         {isHomePage ? (         <h1 className="main-heading">             <Link to="/">{parse(title)}</Link>         </h1>         ) : (         <Link className="header-link-home" to="/">             {title}         </Link>         )}     </header> <div className={container}>     <principal>{children}</primary>     </div>     <footer>          © {new Date().getFullYear()}, Congenital with         {` `}         <a href="https://world wide web.gatsbyjs.com">Gatsby</a>         {` `}         And <a href="https://wordpress.org/">WordPress</a>     </footer>     </div>   ) }  export default Layout                  

On the face of it, Gatsby is a pure static site generator, but it does have a play a joke on up its sleeve for dynamic-like content. Although it uses server-side APIs to generate static content, you can use 'React hydration' to bridge the gap.

Detailing how the hydrate() method operates is beyond the scope of this article. Information technology's just worth noting that Gatsby supports it and it's the 'official' style to hook in dynamic content if you lot need to.

Also, it's piece of cake to forget that lots of WordPress plugins don't back up GraphQL. Of form, y'all take to rely on this to be in place, and if information technology isn't, you won't be able to pull in all of the data from your site. This limits Gatsby'south telescopic and awarding in some circumstances, and it's something you lot'll have to counterbalance up.

Deploying a GatsbySite

At some point, you'll desire to deploy your site to a live server. There are a few ways to practice this, and because your site will be static, all of them are straightforward to implement.

For a total integration and virtually nigh-perfect deployment, Gatsby Cloud is the tool for you lot. It'due south not open up source like its parent framework, but it does offering a host of great features specifically tailored to deploying a Gatsby site using WordPress as the data source. First and foremost, it offers the ability to configure build webhooks. These permit you to automatically deploy your site when the WordPress data is updated by calculation something like the following lawmaking to a plugin on your WordPress site:

          add_action( 'publish_post', function () {     wp_remote_post( 'https://webhook.gatsbyjs.com/hooks/data_source/publish/{gatsby-deject-site-id}', [] ); } );                  

It also has live previews, back up for all the major Git hosts, and automated checks to gear up errors before they're published.

Netlify is another pop static site host. The primary do good of Netlify is that it's been around longer and is therefore more feature rich, and it supports all major modern static site generators, not simply Gatsby.

Netlify also supports build webhooks, and you tin can utilize the aforementioned plugin code, the only departure being the webhook URL:

          add_action( 'publish_post', function () {     wp_remote_post( 'https://api.netlify.com/build_hooks//{netlify-site-id}, []); });                  

Y'all don't need to use either of these though. You can also use regular web hosting, peculiarly if your spider web host supports Git repositories, and Git push-to-deploy. For example, SpinupWP is more than than capable of hosting your Gatsby powered static site.

To start, you can change the Git origin of your evolution project to a newly created Git repository, and push the code to the new repository (we're using a fresh GitHub repo as an example):

          git remote set-url origin git@github.com:githubusername/githubreponame.git git push origin main                  

Before you deploy the site, the SpinupWP server needs Node.js and the Gatsby CLI, much like your development server. The next office of the process requires that you have sudo SSH access to the server. First, install Node.js on the server:

          ringlet -sL https://deb.nodesource.com/setup_14.10 | sudo -E bash - sudo apt-get install -y nodejs                  

Then run the familiar Gatsby command to install the CLI:

          sudo npm install -g gatsby-cli                  

At this point, you can gear up up a new SpinupWP site. Once you go to the installation step, we can Clone a Git Repository, and enter the repo URL and branch.

You lot'll as well want to add together the deploy script:

          npm install gatsby build                  

One time the code has been fetched from the Git repository, these commands will install any required packages, and build the static site from the WordPress information source.

While SpinupWP volition bank check whether it can access the Git repository (and you may demand to configure information technology), nosotros don't need to provide annihilation else. Of course, we don't demand a database, and then this is one less moving part.

From here, SpinupWP takes over with its Push to Deploy characteristic. Before you're washed and dusted, make certain to update the "Public Folder" in the site's settings within SpinupWP. Yous'll desire to modify it to /public, equally the build process creates the static files in this directory.

The disadvantage of this approach is when you add together data to your WordPress site, which is acting equally your Gatsby data source. You'll have to manually trigger a deployment from the SpinupWP dashboard, which would get any new lawmaking changes from the Git repository, and run the deploy script to get the updated data and rebuild the site.

Ane fashion you could automate this is to configure your WordPress site to update a file in your Git repository, whenever a new mail is published, using the publish_post action hook and the GitHub REST API. Alternatively, you lot could just update that aforementioned file manually, by committing and pushing the change from your local Gatsby development site.

This is where Gatsby Cloud and Netlify might suit you better, although using SpinupWP in this way is a solid alternative, especially if you don't publish new content regularly.

ConcludingThoughts

A postal service similar this can simply cover the bare minimum of what Gatsby can do. It's a total spider web awarding framework for creating websites, much like a full-stack framework similar Laravel or Ruby on Rails.

Of grade, Gatsby is perfect for headless CMS applications, every bit you tin pull multiple data sources into one site. What's more, you lot can utilize your React knowledge from WordPress and employ it alongside a dedicated theme, bridging both platforms.

We likewise recall Gatsby is super-fast, especially if you self-host with a solution such equally SpinupWP. In fact, with a Content Delivery Network (CDN), you could host a lot more sites than we'd usually recommend on i server.

Though, if yous need dynamic functionality for aspects such equally forms and due east-commerce, Gatsby is going to be more than work for less benefit. On the flip side, you can pull in content from multiple sources to build a 'dynamically-backed' static site. It'due south a powerful combination.

On the whole, if you or your developers don't want to build a WordPress theme, and you lot also desire a fast site without having to set caching, Gatsby could fit the bill.

Do yous think Gatsby is a good solution for headless WordPress applications? Share your thoughts with us in the comments department below!

Share this post