Intro to Building Websites with Gatsby and WordPress (Fast and Static)

Intro to Building Websites with Gatsby and WordPress (Fast and Static)

How does a typical dynamic website, like those based on WordPress, work? When a visitor enters the URL on a browser or visits your website through a link, a request is sent to your web server.

The server gathers the required data through necessary database queries and generates an HTML file for your browser to display. Static sites, on the other hand, store these responses into flat files on the server that are instantly delivered to a visitor.

Static site generators have been around for a long time, but they have grown in popularity recently. In this step-by-step guide, we look at the integration of WordPress with Gatsby, a static site generator.

What’s Gatsby?

WordPress creates dynamic websites, which need a stack of PHP, MySQL, and Apache or Nginx on the server to run. It is possible to create a static version of WordPress by generating a list of HTML pages for all the content on your site.

This static version of WordPress is called headless WordPress or serverless WordPress. This conversion process is done just once so that the same page can be served to visitors multiple times. How do you convert your WordPress site to a static version? This is where Gatsby comes into the picture.

Gatsby, or GatsbyJS, is a static site generator built with ReactJS and powered by GraphQL. Gatsby allows anyone to create feature-rich, engaging websites and applications. Gatsby fetches data for your site from a variety of sources including existing websites, API calls and flat files through GraphQL, and builds the static site based on configuration settings specified by you.

Gatsby was developed only a year ago, but a large number of users are giving Gatsby a try. Gatsby has found acceptance in a variety of settings. The home page of Airbnb’s Data Science and Engineering Blog is powered by Gatsby, though the actual blog posts are hosted on Medium.

Airbnb’s Engineering & Data Science Blog

Braun is a brand of the consumer goods company P&G. Its Canadian site is hosted with Gatsby, while search function on the site is powered by React.

braun canada website 3

Braun’s Canadian Website

Additionally, Gatsby has tickled freelancer developers‘ interest for their portfolios too. Portfolio such as the one by Jacob Castro have primarily static content with links to works and contact through email, thus making a static site a perfect fit for his needs.

jacob castro portfolio 3



This article was written by shaumikdaityari and originally published on Blog – Kinsta Managed WordPress Hosting.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top