Tags: integration, Shifter

Create a static site using Gatsby and the WordPress API

The Jamstack approach to creating websites has grown globally popular . One of the most popular frameworks for creating Jamstack sites is Gatsby. Gatsby makes it easy to import several data sources into your site from CMS, Markdown, CSV, and more all while using GraphQL to inject that data into your React application. 

In this blog post, we’ll walk you through the process of setting up a new Gatsby site and importing our WordPress site data from the WordPress API. 

Why Gatsby?

Gatsby allows you to quickly and easily add features and functionality to your site using plugins. Want to add PWA functionality to your site? Maybe optimize your images? That’s all part of the rich plugin ecosystem at the Gatsby’s core. This ecosystem goes a long way to making your site more useful and is very similar to WordPress in that approach. 

Gatsby will also convert your website into static HTML. Static HTML sites are much faster than PHP rendered sites because the conversion to HTML has already occurred when your customer visits your site, there’s no rendering necessary. 

Let’s try it out! 

Demo Site

We’ve already set up an example site with Gatsby and WordPress to use for this demo.

You can find the demo site here

https://shifter-gatsby-wp-example.netlify.app/

You can also check out the example site at our GitHub repo. You’ll also find this demo in the attached readme file.  

getshifter/gatsby-starter-wordpress-typescript

https://shifter-gatsby-wp-example.netlify.app/

Before you start

Make sure that you’ve installed Gatsby in your local environment and install it if you haven’t yet. Please note that NodeJS is required to install Gatsby.

Launch the example site

Create a new project with the following command. 

$ npx gatsby new gatsby-wordpress https://github.com/getshifter/gatsby-starter-wordpress-typescript
$ cd gatsby-wordpress
$ npm install

Set your WordPress URL

Open gatsby-config.js, and replace the following properties.

  • siteMetadata.postURLPrefix: Your WordPress Posts page URL prefix (default: news)
  • siteMetadata.pageURLPrefix: Your WordPress Pages page URL prefix (default: “)
  • plugins[].options.baseURL: Your WordPress URL (default: central.wordcamp.org)
module.exports = {
  siteMetadata: {
    postURLPrefix: 'news',
    pageURLPrefix: '',
  },
  plugins: [
    `gatsby-plugin-typescript`,
    {
      resolve: 'gatsby-plugin-graphql-codegen',
      options: {
        fileName: `types/graphql-types.d.ts`
      }
    },
    {
      resolve: "gatsby-source-wordpress",
      options: {
        /*
         * The base URL of the WordPress site without the trailingslash and the protocol. This is required.
         * Example : 'demo.wp-api.org' or 'www.example-site.com'
         */
        baseUrl: "central.wordcamp.org",

Run in your local

Gatsby provides a local server to in order locally customize your website.

$ npm run develop

Build and deploy

We can build the application for production with the following code.

$ npm run build

Now, the production application will be placed in your public directory.

The  production application is now placed in your public directory.

We can upload these files from the public directory to any server like a Netlify, AWS Amplify, or Firebase hosting.

Conclusion

Gatsby is one of the best  frameworks for creating static websites using React and WordPress or any other data source. 

Gatsby also has the ability to  import multi-data sources, allowing you to create mashup applications.

Related Posts