Built with Gatsby

wordpress-gatsby

Gatsby + WordPress Website

This website has been built with Gatsby and WordPress. WordPress has been used as a CMS, and data has been passed to the frontend using GraphQl.

The idea is to get fast website with great UX. We don't want users to wait for content/new page to load which is happening with other WordPress website.

Why WordPress as a CMS option? WordPress is the most popular CMS these days, and that's the only reason why I used it. I wanted to make it easier for others to create new page and to publish new post. There are other great CMS options but maybe one day I will recreate this project using Strapi or something similar.

How to install

Before we proceed with installing this, we will need hosting and domain with a subdomain. On a subdomain you will install WordPress.

These are the steps:

1. Step:

Download WordPress copy and import on your hosting. It is important that you use this one since there are some custtom fields I created as a settings for like slider etc...

2. Step:

• Download this github project, and in gatsby-config.js change siteUrl. Here goes the link of your Gatsby domain. Also update title & description.

• After that create two files: .env.development & .env.production. There you will create:

• WP_URL = https://YourWordPressDomain.com/graphql

• GA_TRACKING = Your Google Tracking Code For GA

Run npm install and after that gatsby build so you can build public folder with all generated files that you will upload on your hosting.

If you would like to run this project on your local host run gatsby develop.

3. Step:

• Update Custom Settings page on WordPress.
• If you go to /utils/utils.js you may change itemsPerPage and that will control how many posts are going to be displayed on a category page before showing the pagination. Default value is 3.

Note: Please Do Not Change Permalink For This Page!

WordPress Features

There are some built in features, and those are:

• Custom Settings Page:
• Update Logo
• Update Favicon
• Update Featured Image - this one is used as a OpenGraph image (also for other pages/posts)
• Update About Me image
• Update About Me text
• Update Disclaimer widget
• Add Your Social (Facebook, Twitter, YouTube)
• Update Meta Title and Meta Description - This one is used for a homepage (index.js)
• Post Settings - You may select which post is going to be featured (visible on the slider)
• Pros/Cons plugin styled for Gatsby

If you are using your own hosting instead of Netlify, after every change you make on the WordPress side you need to run gatsby build and to upload to your hosting everything from public folder.

Run this project on localhost:

• npm install
• gatsby develop
• gatsby build

Live demo

Click here to see live demo