What is Gatsby?

The Jamstack approach to creating websites has grown globally popular and Gatsby is one of the most popular frameworks for creating these type of sites.

Gatsby has the ability to import data from several sources into your site such as a CMS, Markdown, CSV, and more; all while using GraphQL to add that data into your application.

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

Why Gatsby?

Gatsby allows quick access to 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 Gatsby’s core. This ecosystem goes a long way, making your site more useful and manageable. In that aspect, Gatsby is similar to WordPress.

Gatsby will also convert your website into static HTML. Static HTML sites can be 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. In addition to pre-rendering, static sites can be hosted on environments built for speed, scalability, and reach. Traditional WordPress sites must scale in order to meet high traffic demands while static sites require no scaling when hosted on a service like Amazon’s Amplify (S3 + CloudFront), Netlify, or Vercal (formally ZEIT),

Gatsby also happens to pair very well with Shifter Headless. Shifter Headless is a new product that allows you to develop modern Jamstack sites using WordPress as a headless CMS. We’ve built Shifter Headless to support any JavaScript framework and decoupled the front and back ends. That means there’s no WordPress development experience required, but your end-users will still get the WordPress experience they know and love along with the performance of a static site.

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

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

Before you start

If you haven’t installed Gatsby yet, go ahead and do so. You can find full installation instructions here. 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: with your WordPress Posts page URL prefix (default: news)
• siteMetadata.pageURLPrefix: with your WordPress Pages page URL prefix (default: “)
• plugins[].options.baseURL: with 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
trailing slash and the protocol. This is required
      * Example : 'demo.wp-api.org' or 'www.example-site.com'
        */
        baseUrl: "central.wordcamp.org",

To link your Shifter Headless site, log in to Shifter and navigate to your Headless site. Go to the Overview tab and copy your WordPress URL. Back in gatsby-config.js, replace central.wordpress.org with the URL you just copied.

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

The  production application is now placed in your public directory.

We can upload these files from the public directory to any hosting service. This time, we’ll deploy our site with CLI using Netlify CLI, but another service like AWS Amplify or Firebase will work as well.

Install Netlify CLI

Netlify CLI can be installed from the browser, but this time we’ll be using the CLI.

$ npm install -g netlify-cli 

You can confirm installation and check the version info with this command.

$ netlify -v

Login to Netlify

When you run this command, your browser will launch. Click “Authorize” to enable operation with netlify-cli.

$ netlify login

Setting a Custom Domain

After logging in, you are able to set a custom domain in the browser.

Link your Site

Connect your local site to Netlify with the following command.

$ netlify link
Site Name,
Site ID (API ID)

Publish your work

Hit the deploy command and check the Live Draft URL.

$ netlify deploy 

If there are no problems, you are ready to deploy to the production environment.

$ netlify deploy --prod

That’s it!

We were now able to publish the content provided by Shifter Headless using Netlify with a Gatsby front end.

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 easily create mashup applications.

If you’d like to try this tutorial for yourself, please sign up for a free trial and let us know how it goes.

We look forward to your feedback.