WordPress gained a lot of recognition in the past few years due to its easy and free of coding web development. But there are few downsides to WordPress that can kill your website within seconds. you can try WordPress static HTML pages for your website
When your website has more users, WordPress traffic handling capacity is not up to the mark. the server slows down, and your website isn’t functional for a while. Even seconds can bring down and kill the performance.
WordPress is a slow platform due to the all the plugins, databases
However, those are not the only things that can slow down your website. Heavy images, a lot of content, and untrustworthy hosting can impact the website.
Loading speed is crucial to any software, be it a desktop application, a mobile application, or a website. You want a fast-loading software so the users don’t have to wait and choose an alternative, which will reduce your viewers because they won’t stick around to see the content no matter how good it is.
In this article, we will cover how to connect and create WordPress static HTML pages.
Table of Contents
Hosting plans of WordPress
hosting plans of wordpress is another matter to investigate. You need to choose a hosting plan according to the website requirements and the way you have designed it.
The minimum hosting cost is $3.75/month. Of course, that doesn’t compensate for the plugins, themes, and the domain. You need to pay almost $15 to $40 per month. But even after you agree to pay that much there are still limits and let’s not forget the speed can also be compromised after the users increase.
The premium pricing plan can be even more expensive to pay per month. Even after the payment, a few seconds of your website going down will kill its business.
Therefore, building your website on WordPress and generating static pages of your website is a far much better plan. The hosting would become extremely cheap or even free.
Rendering static pages never really cost much from the beginning and not to mention how fast they are.
Step 1: Install Gatsby
You need to install and set up your Gatsby project before you start. For that, you can go ahead and click here if you don’t have it set up yet.
Step 2: Connecting WordPress with Gatsby
Install the plugin to connect WordPress and Gatsby. Run the following command to do so
npm install gatsby-source-wordpress Step 3: Configure gatsby.config
Add the following code to configure your Gatsby.config
plugins: [
{
resolve: `gatsby-source-wordpress`,
options: {
baseUrl: `http://localhost/wordpress/2020/11/13/hello-world/`,
protocol: `http`,
minimizeDeprecationNotice: true,
// Indicates if a site is hosted on WordPress.com
hostingWPCOM: false,
// Specify which URL structures to fetch
includedRoutes: [
'**/posts',
'**/tags',
'**/categories'
],
},
},
npm install --save gatsby-source-graphql 
After installing and you need to access the graphql of the Gatsby. Run the following link to enter in the graphql editor.
http://localhost:8000/___graphql.
If this works then, everything is going fine, but if you come across any error, then it might be possible you need to add a script in your package.jason file and run the server again.
"start": "npm run develop && NODE_ENV=production node ./app", import React from "react"
import {graphql} from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
export default ({ data }) => {
return (
<Layout>
<SEO title="home" />
<h4>CODELEAKS</h4>
{data.allWordpressPost.edges.map(({ node }) => (
<div>
<Link to={node.slug}>
<p>{node.title}</p>
</Link>
<div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
))}
</Layout>
)
}
export const pageQuery = graphql`
query {
allWordpressPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
slug
}
}
}
}`
const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return graphql(`
{
allWordpressPost (sort: {fields: [date]}) {
edges {
node {
title
excerpt
slug
date(formatString: "MM-DD-YYYY")
author
}
}
}
}
`).then(result => {
result.data.allWordpressPost.edges.forEach(({ node }) => {
createPage({
path: node.slug,
component: path.resolve(`./src/templates/posts.js`),
context: {
slug: node.slug,
},
})
})
})}
import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"
export default ({ data }) => {
const post = data.allWordpressPost.edges[0].node
console.log(post)
return (
<Layout>
<div>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
<p> By: {post.name} </p>
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String) {
allWordpressPost(filter: { slug: { eq: $slug } }) {
edges {
node {
title
content
slug
author
}
}
}
}` This file has been included in the index.js file and will render all the content in the browser.
These were the posts inside my WordPress site and they are being fetched and rendered on Gatsby at static pages.
Conclusion
You can convert you WordPress site into WordPress static HTML pages using Gatsby easily. Static pages provide faster and better performance of a website. It requires few steps as discussed in the article, but Gatsby make sure that through graphQL is the data is fetched and rendered in static pages.
