As you will see deploying Gatsby to GitHub pages would be extremely easy if I didn't make some errors in the [previous episode](http://watch-learn.com/video-tutorials/gatsby-wordpress-displaying-images). Luckily those errors are pretty easy to fix. So we will be doing that in this episode.

In this final episode of Gatsby and WordPress tutorial series we are going to deploy our site and fix some errors that I made in previous episode.

Deploying and Fixing Errors

Now we are going to be displaying our images on our post list page and also on single post. You are also going to learn how to use gatsby-image component and how to use regular img tags with your images on Gatsby.js and Wordpress site.

Of course we are going to be creating GraphQL query so that the React.js would get the correct data.

In this episode you are going to learn how to display images on your Gastby.js and WordPress site.

Displaying images

Advanced Custom Fields is one of the essential WordPress plugins so it's fitting that Gatsby.js comes with it right out of the box. So in this episode I'm going to show you how to display your ACF fields on your Gatsby.js website. As you will see it is suprisingly easy.

In this episode I'm going to show you how you can use Advanced Custom Fields for WordPress with our Gatsby.js site.

Advanced Custom Fields

To do this we are going to use[gatsby-paginate](https://www.npmjs.com/package/gatsby-paginate) plugin, make some changes to `gatsby-node.js` and create a new Gatsby template for our posts that are coming from our WordPress instalation.

In this episode we are going to be creating simple pagination for our WordPress and Gatsby.js site.

Pagination

Now we are going to crate a new React.js component which will serve as sort of partial on our site. By making it a component we will be able to display our main menu anywhere we want on the site. And by using GraphQL we will have access to all our menu items and the information stored in them.

Also I'm going to fix two mistakes that I made in the [previous video](http://watch-learn.com/video-tutorials/listing-posts).

In this episode I'm going to try to import WordPress menu into our Gatsby.js site, using WP REST API and GraphQL

Creating Menus

Now we are going to create another React.js which is going to become Gatsby.js page, and on that page we are going to list all of our posts. Also we are going to make our `node-config.js`a bit more readable with some tweaks.

In this episode we are going to list all the posts coming from our WordPress REST API using Gatsby.js

Listing Posts

I say that I'm going to try to create a website using these technologies because I'm not familiar with any of them except for WordPress. Gatsby.js uses React and GraphQL as main driving engines behind it. Needless to say that I'm not familiar with either of these technologies, but this will be a great opportunity to learn with you guys.

In this particular episode we are going to setup our development environment and get posts and pages using Gatsby.js and WordPress REST API.

In this mini-series I'm going to try and create website using Gatsby.js and WordPress.

Tutorials tagged with: gatsby.js

Get in touch