Sleekweb = Gatbsy + WordPress

Gatsby + WP
Gatsby + WordPress = Sleekweb

You may have noticed this, but this website has changed a lot recently. It now runs on GatsbyJS, and uses WordPress’ REST API as a data source.

Gatsby lets you build blazing fast sites with your data, whatever the source. Liberate your sites from legacy CMSs and fly into the future.

GatsbyJS

Not only that, but it is almost fully CMS driven. The main content for every page is now coming from WordPress, including this post you are reading now.

With the release of WordPress 5.0 and “Gutenberg”, the latest WYSIWYG content editor, I felt it was a good combination to go along with Gatsby to allow me to update the website content from anywhere with an internet connection, without manually editing the code.

A preview of me using Gutenberg from WordPress 5
A screenshot of this very post being edited in Gutenberg from WordPress 5

This is not a new feat in web development, as any WordPress site has had this ability for over a decade.

But don’t think of this as a WordPress site with a React frontend, which technically it is… Think of it as a React website with a WordPress backend, which is a really powerful thing.

If a client would require a React powered website, in the past they would struggle as the content would either be hard-coded, and to edit it you would have to know a little bit about code, or, the content would be published by CMS and then brought in by an API call.

This is actually happening here, but instead of an API call on the client side, this call happens at build time, transforming all of the data recieved into a static HTML output.

return graphql(`
    {
      allWordpressPost {
        edges {
          node {
            id
            slug
            status
          }
        }
      }
    }
  `).then(result => {
    if (result.errors) {
      result.errors.forEach(e => console.error(e.toString()))
      return Promise.reject(result.errors)
    }

    const postTemplate = path.resolve(`./src/templates/post/index.js`)

    // In production builds, filter for only published posts.
    const allPosts = result.data.allWordpressPost.edges
    const posts =
      process.env.NODE_ENV === 'production'
        ? getOnlyPublished(allPosts)
        : allPosts

    // Iterate over the array of posts
    _.each(posts, ({ node: post }) => {
      // Create the Gatsby page for this WordPress post
      createPage({
        path: `/post/${post.slug}/`,
        component: postTemplate,
        context: {
          id: post.id,
        },
      })
    })
  })

There are many benefits of static HTML for your website, but I will just list a few in this post.

  • It is incredibly efficient and quick to serve
  • It can be parsed by all web crawlers, resulting in great SEO
  • It can be downloaded as a Progressive Web App and used without an internet connection
  • There is no backend call every time someone views a post. The backend is called once at build time to generate the HTML for each page, and that’s it.

In conclusion: There are many avenues you can take in order to get dynamic content onto your React app, but there are pros and cons to each. I feel Gatsby + CMS with a build step is one of the best. It is not easy to set up, but once it has been, the benefits are endless.

My goal is to be able to create a static React website for any of my clients which allows them to be as autonomous as if they were using a plain WordPress site. They can update the content as they please without the need of a developer to edit the code or run any build processes.

If you are interested in delving into your own Gatsby and WordPress project, I highly recommend the Gatsby plugin gatsby-source-wordpress as it streamlines the process and was made for this very purpose. Good Luck.