Last year’s pandemic increased the world’s reliance on technology and most of the business went from brick and mortar stores to online shops. This trend has been increasing over the last several years and will continue to grow over the years too.
WordPress now serves more than 40% of websites in existence, taking a lion’s share of the global infrastructure. In this article, we are going to show you how to make the most of it using Gatsby.
There are different types of websites and different methods of creating websites. You can create a website on simple HTML pages or using web builders like Wix or Squarespace or Shopify to name a few. WordPress offers you much more flexibility than a simple site while offering the complexity you need to run your online business.
With the increase in complexity, you have to provide more server resources, add layers of security, manage access to editors, and everything needs to be fast.
If only there was a way to create a dynamic complex site, and then convert it into a static version that is fast, secure, and easily editable for the ultimate experience.
So what is the difference between static and dynamic sites? How can we convert our WordPress sites to their static versions? And what’s this “Gatsby” thing mentioned in the article? If you have these questions in mind, please read on.
On the whole worldwide web, there are only two kinds of sites. Either they are static or they are dynamic.
Static
Static means “the same” or “constant”. In the website context, static websites are those which have the same content for all visitors and the content of the site doesn’t change much. Basically, these types of websites are built-in HTML, CSS, and other platforms. Static Websites do not need any type of database or any complex integrations. Normally static sites have a fixed number of pages.
Usually, people make their portfolios as static websites. Like https://nad.is/
Dynamic
On the other hand, Dynamic websites are those in which content and data change frequently or from time to time. These types of websites are built-on complex platforms using databases and complex integration. Data and content on these sites change accordingly.
A popular CMS for these types of sites is WordPress. WordPress is purely used for dynamic websites. In this article we will see how we can use this for static websites with Gatsby. Initially, people only created blogs with WordPress but now with plugins and themes WordPress is being used to create all sort of sites ranging from corporate sites to full-fledged eCommerce sites.
These dynamic websites are built to handle blogs, stores, and big sites. The CyberPanel site is itself a dynamic site, even though some page of our site doesn’t update often but blogs and documentation section is frequently updated.
Speed
As far as the speed of a website is concerned, obviously a static website is faster than a dynamic one. Static websites use very limited resources which can be served to every user as they are. Static sites are pre-rendered, requiring no database connectivity and no changes, so these are much faster than dynamic sites.
On the other hand, dynamic sites are loaded and have a lot of content that changes frequently. The content changes according to user requirements, so these type of sites are a bit slow. Dynamic sites are not pre-rendered, require database connectivity, the content changes dynamically, and sometimes each user has to see personalized content, thus caching also becomes hard.
Security
In the security perspective, static websites also have better security than dynamic. There are several reasons for this:
- Static sites don’t have database connectivity.
- Content doesn’t change it remains the same.
- The dynamic site depends upon user interaction so there will be the threat of attack.
- As content changes so there is more possibility to add more malicious things.
Server cost
Static sites are normally light weight and need very little space and resources. A static site can perform better on low resources. On the other hand, dynamic sites need high resources on the server. A dynamic site only provides you good performance when it is running on a high-resource server. So the cost for the server is very different between both.
Changing content
Somehow we always need to change the content. In static websites when you want to change or update content you have to hard code. This is a bit old and time consuming process. Every time we need to change or update the content we have to hard code it.
And in dynamic websites, content updating and changing does not need hard coding. You just have to provide data using any CMS, or any ready-made platform, and the site is updated accordingly.
So changing content on a dynamic site is rather easy and convenient compared to static sites.
Low Expertise
A CMS provides an easy-to-access interface to develop and deploy sites.
What is Gatsby?
Gatsby is a React-based open-source framework, used to generate static websites. Gatsby generates a static front-end for your website while using a faster API to access the backend. When someone visits your site, the static data from your server is served instead of showing a dynamic site to the visitor.
Using Gatsby you can create a feature-rich, simple, static, and engaging website. Gatsby gets data from different sources including existing websites, fetch data from API calls, and fetch files using GraphQL. Anyone can configure Gatsby’s website according to their requirements.
Why Gatsby?
Now the question is: why do we need Gatsby? The answer to this question is very simple and straightforward. Below you can read some reasons as to why would you deploy a Gatsby site when you already have WordPress.
Website Speed
Google gives priority to sites which load fast and provide a better user experience. As discussed above, static sites tend to load faster. According to research 40% of users will leave your site if it takes more then 3 seconds to load, you can read the full article here.
Security
The static website doesn’t have direct access to the database. Instead, all the content is accessible via API which is strictly protected and only called when needed. This makes it much more secure.
Low server cost
You can serve a static site through a CDN or even an S3 bucket, thus reducing overall infrastructure cost for your project.
There are a lot more reasons to use static sites and we have just mentioned a few above.
Start with Gatsby:
- Requirements
- Process
- Plugin
- Templates
Requirements
As mentioned in the introduction, Gatsby is a React-based framework. The frontend has to be rendered via Node.js once, or any time you want to make a change to the way it looks. However, you don’t have to make any modifications when you update your blogs or add new products to your site.
This is a pre-requirement to work with Gatsby. You must have WordPress installed, if you still don’t have a WordPress site, use this tutorial
To install Node.js on Windows you can follow this guide:
Once installation is dobe, run these commands to check the Node and NPM versios:
node –v
npm –v
On Mac, you can simply run these commands and install:
brew install Node.js
brew install git
On Linux like Ubuntu you can do it with these commands:
sudo apt update
sudo apt install Node.js git
Process
After installing Node.js your server or system is ok to install Gatsby. In this process part, we will go through some steps.
- Install Gatsby.
- Build and deploy Gatsby
- Connect Gatsby with WordPress
Install Gatsby
The installation process of Gatsby is very easy, and it is a one-command installation.
Run this simple command on the Windows terminal:
npm install -g gatsby-cli
You will see this once the installation is successfully done. Now everything is good to go.
Build and deploy Gatsby
To create a new Gatsby site just run this command:
gatsby new static-gatsby-wordpress
Gatsby creates a site using its templates. Now change the directory to the working where the site creates using gatsby. using this command:
cd static-gatsby-wordpress
And run the develop command to start development.
gatsby develop
After the completion of this process visit this URL, you check while it is running
View GraphiQL, an in-browser IDE, to explore your site’s data and schema
http://localhost:8000/___graphql
Here I am going on the WordPress configuration step, but if you want to build and deploy, you can use these two commands:
gatsby build
gatsby serve
Connect Gatsby with WordPress
The process of connecting Gatsby and WordPress consists of three steps:
- Install required Plugins in WordPress backend.
- Install required module in Gatsby
- Link gatsby to WordPress
Install required Plugins in WordPress backend
The first step is to install the required plugins on the WordPress backend. Two plugins are required to run the process smoothly.
Go to the plugin section in the WordPress admin dashboard and add these two plugins.
Install required module in Gatsby
Now on the Gatsby application, you need to install gatsby-source-wordpress to connect and run this properly.
Run the following cmd to install this:
npm install gatsby-source-wordpress
Now you just need to configure Gatsby to fetch everything from WordPress.
Link gatsby to WordPress
To configure WordPress and Gatsby, you just need to add this code in gatsby-config.js.
Plugin[
{
resolve: `gatsby-source-wordpress`,
options: {
// Specify the URL of the WordPress source
url:`http://the-link-of-your-web`,
baseUrl: `http://the-link-of-your-web`,
protocol: `http`,
// Indicates if a site is hosted on WordPress.com
hostingWPCOM: false,
// Specify which URL structures to fetch
}
},
]
If you get any errors, you can use this in Object to check the error in details.
debug: {
graphql: {
copyHtmlResponseOnError: true
}
}
If the link in the settings is like
http://your-domian/graphql
you must use this in the URL.
Once all the process is done now when you visit:
http://localhost:8000/__graphq
After getting this from graphQL, now it’s time to write a small code that gets our WordPress queries here on Gatsby. Here is the code. Just copy and add this in your index.js:
import React from "react"
import { Link } from "gatsby"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"
const IndexPage = ({ data }) => (
<Layout>
<SEO title="Home" />
<h4>Posts</h4>
{data.allWpPost.edges.map(({ node }) => (
<div>
<p>{node.title}</p>
<div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
))}
<Link to="/page-2/">Go to page 2</Link> <br />
<Link to="/using-typescript/">Go to "Using TypeScript"</Link>
</Layout>
)
export const pageQuery = graphql`
query {
allWpPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
}
}
}
}`
export default IndexPage
If it’s running smoothly you will see this page:
You can design this page in the way you like. You can also add any Gatsby theme to your app. The process of adding a theme is very simple if you have any existing site you can use this command:
npm install gatsby-theme-blog
If you want to create a new one:
gatsby new name-of-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
You have to add these lines in gatsby-config.js
plugins: [
{
resolve: `gatsby-theme-blog`,
options: {
basePath: `/your-blog`,
},
},
If you want to read more, visit this link.