All Articles

Make fast static websites with Wordpress and GatsbyJS

Speed is the most important factor Google uses to rank websites. Make blazingly fast sites by combining the speed of GatsbyJS with the powerful back-end CMS features of Wordpress.

In this course we cover:

  • Setting up your Wordpress site
  • Creating a GatsbyJS site that sources its data from Wordpress
  • Deploying your finished GatsbyJS site to Netlify

Also covered:

  • Configuring a custom domain name for your site
  • Setting up SSL for secure browsing via https://
  • Creating custom pages, posts, and menus
  • SEO optimization best practices

I’ve spent countless hours playing with different CMS options (headless, Git-backed, etc.) Combining Wordpress with GatsbyJS is the most powerful and delightfully easy solution for creating websites that I’ve come across in my 15 years of web dev. Here I’ll share the best practices the step-by-step process of creating a blazingly fast website with GatsbyJS and Wordpress.

Here are the steps we will be covering together in this training:

  1. Provision droplet on Digital Ocean to host Wordpress
  2. Install an Ubuntu Wordpress premade droplet
  3. Configure Ubuntu Wordpress
  4. Add necessary Wordpress plugins
  5. Configure our custom domain name and SSL
  6. Clone a Gatsby starter site
  7. Configure Gatsby with the Wordpress-source plugin
  8. Configure gatsby-node.js file to make pages from Wordpress posts and pages
  9. Create a GatsbyJS index.js template
  10. Create GatsbyJS pages and posts templates
  11. Connect site to Netlify and deploy
  12. Add webhooks so our GatsbyJS site rebuilds and deploys any time a change is published on our Wordpress site

Let’s go build it!