Two years ago I was a novice WordPress Developer and a Gatsby skeptic. I scoffed at Gatsby’s claims of enabling “fast and secure” websites, because even as a beginner to PHP (and baby at developing WordPress themes) I knew how to make my sites fast enough.
I didn’t become open to Gatsby’s power until I experienced a media-rich Gatsby site for myself. I remember visiting a demo project, “GatsbyGram” on my mobile phone and being blown away by how the pages loaded instantly as I navigated the site.
This UX is awesome!, I thought. How do I deliver this for my clients?!
Quickly — and without knowing a lick of React — I started creating my own “blazing fast” Gatsby sites. I used Gatsby plugins, starters, and themes, plus beautiful React component libraries to assemble sites like Lego models. It reminded me of my experience with WordPress. I spent years as a marketer, using it to launch sites using configurable and visual tools, before growing the mental model needed to jump over the user-builder line as a WordPress developer. I experienced driving a car before building a car, which was great because it sped up my dev learning curve.
If you are new to React, I want to give you the same Wow! feeling that pulled me into the Gatsbyverse. My foolproof plan: putting a complete project in your hands that doesn’t require any prior React knowledge. Start with this project, then remix and expand it as your knowledge of React, GraphQL, and the Gatsby ecosystem grows!
What we are building: a mobile photoblog
The project I have for you is a simple photo blog that you can update from your mobile phone. This is the first project I personally built when test driving a new WordPress integration that Gatsby happened to be building, and it’s a fantastic way to acquaint yourself with the stack.
Again, the key to this project is that no React or PHP coding is required! However, you will need to install and configure packages in a Node project and manage your version control in Github or Gitlab. But no worries: if you are new to Node and git you will familiarize yourself with that tech as you follow the directions below.
Step 1 – Spin up a WordPress site
The first question people ask me when they want to play with Gatsby’s WordPress integration is:
“Where should I host my headless WordPress site?”
The short answer is “anywhere”. You can use WordPress.com (a paid plan), Bluehost, GoDaddy, or many, many other services. Gatsby’s docs for the source plugin have some considerations and more specific recommendations for hosting that you should check out. We suggest Flywheel or WPEngine because of how well it works with Local, a WordPress development tool.
When I made this project I personally used Amazon’s Lightsail hosting for WordPress because it was free. However, the setup is confusing, and the support is non-existent. If I did it again I would use Flywheel or WPEngine, just like Gatsby’s docs recommends. The lowest paid plan should be fine.
Step 2 – Develop locally with Gatsby’s WordPress blog starter
Here’s where the magic starts. Gatsby’s starter WordPress blog ships with the main Gatsby WordPress configuration files you might need to get up and running. The starter expects the default post data from your WordPress site, so any plain WordPress site will work just fine. Plus the starter is built using best practices for React, GraphQL, and Gatsby projects, so it’s perfect to use, study, and build upon.
If you’ve ever used Underscores to kick off a WordPress project, then this Gatsby starter’s utility will be familiar to you.
Start building using this step-by-step tutorial. It will walk you through installing the needed plugins on the WordPress side of your project, and then getting the starter going on the Gatsby side. As promised, no React or GraphQL coding is needed. The default components and setup are all you need to start seeing content flow from WordPress to your Gatsby front-end.
Step 3 – Build for free with Gatsby Cloud
Next, you’ll need to build your site using a CI/CD service.
Gatsby Cloud is perfect for this because, in addition to fast builds that are purpose built for Gatsby/WordPress projects, you’ll also get content previews right with your WordPress interface. Just click “preview” in WordPress, and you’ll see how your content will look before you publish and kick off a site build. The flow is pretty seamless.
Sign up for Gatsby Cloud and point the service to the GitHub or GitLab repo that contains your clone of the Gatsby/WordPress starter. There is a free tier for small projects like this photoblog you’re assembling.
Gatsby Cloud will walk you though the rest of your site setup. You’ll have the option to choose between popular CDNs for “hosting” the static files Gatsby generates. I recommend using Netlify because of the awesome user experience.
Step 5 – Connect the WordPress mobile app
WordPress maintains official Android and iOS apps that work with any WordPress install. I recently rediscovered this app and I was impressed that it just works.
Best of all, when you snap a photo on your phone, and click “share”, the WordPress mobile app will be one of your options. You can easily have a photo kick off a new blog post, or start a post and add one or more photos.
The Gatsby source plugin is pretty smart – it will optimize photos published as “featured photos” or photos that are within the HTML or your blog post!
Bonus – Make your site work offline
One of the baller features of Gatsby is that you can turn your site into a Progressive Web App (PWA) just by installing two plugins. And one of them, you’ve already got: The Gatsby / WordPress starter already has gatsby-plugin-manifest installed, so you’re set there.
Now install gatsby-plugin-offline. This means your users will be able to continue navigating your photoblog during conditions where their internet connection is flaky or nonexistent, like on a plane or underground in a subway.
Follow these directions if you’re installing a Gatsby plugin for the first time.
Step 6: Level Up
So what now? You’ve rapidly assembled a React-based photoblog that sources data through a GraphQL API, served by a WordPress install. Click around your site and you’ll see how amazingly fast each page loads. Put your phone on “airplane mode” and see how well your site works, even while your browser is offline!
I suggest branching your Gatsby project in git and creating a new site for it in your Gatsby Cloud workspace. Use your new branch to experiment with your Gatsby site. Start by adding an “About page” using “page” content in WordPress. Use the templating patterns the starter gives you for post content.
If you’re brand new to React, I suggest the excellent “10 Days of React” series on YouTube. And if you need to brush up on vanilla Javascript, try the “10 Days of Javascript” series from the same teacher. He doesn’t assume any prior knowledge, which makes him a great teacher.
Every new concept you learn can immediately be applied to your photoblog, which is a truly satisfying way to learn. Your site will help you learn Javascript deeply — and rapidly.
During your building and learning journey, if you need help or want to share your project, post on our GitHub Discussion forum. We can’t wait to see what you build!
Ready for a deep dive into using Gatsby’s WordPress integration? Join our free workshop led by Gatsby WordPress Lead Engineer Tyler Barnes and WPGraphQL creator Jason Bahl, on March 3rd.
The workshop is part of GatsbyConf, free and virtual, March 2-3. Two days of speakers, workshops, and some really cool launches and announcements. And don’t miss our special event, Gamer vs. Gatsby. Watch live as David Livingston, a.k.a. Kosmic, tries to beat his world record Super Mario Bros speed run time of 4:55 while Gatsby engineer Kyle Gill races to spin up and deploy a live site! Thrills! Chills! See you there!