I Made A WordPress Site With Gatsby :)

I made a new website, to play with some cool new ways of working with WordPress – the most popular CMS. I’ve been building with JavaScript-powered interfaces for my plugins for years now. I have written and spoken a lot lot about how to use React, Vue and other frameworks with WordPress, but I have never actually had a real, headless/ decoupled WordPress site, until now.

This is a new blog, powered by WordPress and Gatsby. Gatsby is a free framework for developing really fast WordPress sites using React — the same JavaScript library that WordPress is using for the new Gutenberg UI that powers the WordPress 5.0+ post editor, that I am writing this post in. Gatsby is great for site visitors — it’s fast and light weight. It’s also great for SEO and offline capable sites.

I am using this site both to experiment with new technologies and to write about how to use them. This is how I learn, and I hope you enjoy. Gatsby does not have a CMS attached to it, but works with WordPress, Drupal, Shopify and more. For now, I am using a WordPress site for the CMS, I am going to expirment with other data sources as well.

How To Build A WordPress Site With Gatsby

This is a quick post, I will dive more into all of this and more in a future post. This site uses a port of the default WordPress theme Twenty Nineteen developed by Gatsby WP Themes.

Creating The Gatsby Site

I am not going to provide a detailed explanation of how I created this site. I basically followed what Muhammad Muhsin wrote in this post for the JavaScript for WordPress. My next posts will cover deployment and adding forms…

The WordPress Site

This deserves its own post. Here are the quick details.

The CMS is hosted on Pantheon. It’s hosted at cms.futurecapable.dev. If you go there, you will be redirected to the front-end. I blocked everything except wp-admin, wp-json and wp-graphql endpoints. When logged in, I can preview with the the old school, PHP Twenty Nineteen theme. I asked Jason Bahl from WP GraphQL for some guidance and editted a code snippet he had into a new plugin. You can see it here: https://github.com/Shelob9/headless-mode

I am using WP Pusher to install and update plugins from Github. Those plugins include one to set CORS headers by my friend Ahmad, WP GraphQL and Caldera Forms.

Front-End

I tried render.com for the first time today after reading a short tutorial. It was super simple to set up, automatically deploys from Github, and I like the featueres they have. I had intended to use Now, but I could not figure out an error. I like Now beacuse I can run serverless PHP and node, which I need for the next steps, I will try again.

This also needs it’s own post.

This Was Fun

Thanks to Zac Gordon, Jason Bahl, Muhammad Muhsin, Roy Sivan, Mike Corkum, and Dwayne McDaniels for their help getting this site setup and figuring out the DNS.

I am looking forward to learning, building and sharing more. Subscribe below to follow along with the fun 🙂

Be Notified When New Posts Are Published

A Caldera Form Will Replace This Form Soon