Deploy a WordPress-powered Gatsby site to Netlify using the Netlify CLI
We can set up our WordPress-powered Gatsby site to automatically deploy to Netlify whenever our code on GitHub changes. In this video, we’ll use the Netlify CLI to configure and deploy our Gatsby site to Netlify.
Jason Lengstorf: [0:00] When we're ready to deploy our site, we need to get it up on GitHub, so we've created a GitHub repo, github.com/jlengstorf/egghead-WordPress-jamstack, and we're going to push our changes up there.
[0:17] Let's git add -A. We're going to git commit and say it's a feature. We'll say that our message is migrated WordPress to the Jamstack. We're going to push those changes up to master. When we go look at our site, we can see now that it is all up here, up-to-date, and ready for us to use.
[0:51] We want to now deploy this to Netlify. I'm going to use the Netlify CLI which I've already installed. If you don't have it installed, you can install it by running npm install -g netlify-cli.
[1:06] I'm going to run netlify init. We're going to create and configure a new site. I'm going to put this into my personal one site by Blitz Jackson, and I'm going to give this a name. We're going to call this egghead-WordPress-jamstack.
[1:25] Our build command is going to be npm run build. Our deploy directory is public. That's where Gatsby builds all the files. We can run netlify open to see our site. We can see the Site deploys in progress. We click through to that. We'll see that it's building.
[1:53] It's done building. Our site is live, and we can see that finished in about one minute. If we go back to our Deploys here, we can see that this site is now live. If we click over to it, there it is. Here is our Jamstack site powered by WordPress live on the Internet.
@alex happy to hear it!
I have everything in this tutorial working but I have an additional question. Some of the posts on my Wordpress site have inline images. When I source from Wordpress, then build with gatsby, on my localhost version, the images show up. But when I deploy to netlify, the images do not show up. When I inspect the space on the page where they should be I can see the code that says they should be there but they don't ever show up. Any ideas?
FOLLOW UP: Solved - My Wordpress was running on HTTP not https so the images were still hosted on http but netlify is https so the browser was blocking content from mixed sources