GatsbyJs and Headless WordPress

GatsbyJs and Headless WordPress

As I let you know the last post I was going to be going over in a little more detail about how I’ve set up my site to use GatsbyJs and a headless WordPress CMS. So here you go! By no means is this a how-to, but if you have questions leave them below and I can respond.

What is GatsbyJs?

From the official GatsbyJs Site, “Gatsby is a free and open-source framework based on React that helps developers build blazing fast websites and apps”. And yes it is indeed a blazingly fast static site generator. I personally have not dug into all of the features that Gatsby offers, however, the basics allow you to take your data from either markdown files, a content management system such as WordPress, or your own API. Their claim is that “You can pull data from anywhere”. Then you need to run the Gatsby build process which sets up a GraphQL API which is used to build the static pages from your data source. Then end result really is a fast site. Gatsby is also considered a Progressive Web App, or PWA, which basically allows for the site to only load what is needed, or in their words “Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.” Which is absolutely awesome, especially if you are trying to download pages on a slow connection.

I really like the fact that I was able to learn a little more about React in the process of porting my site over to use this Gatsby as my front end, as well as I found many existing Gatsby plugins that made getting me up and running a fairly straightforward process. I ended up going with this theme and modified it slightly. It’s a port of the WordPress Tabor theme and I like the clean feel that the site offered.

Headless WordPress

I knew I wanted to stick with a WordPress backend, for creating new posts, as this allows me to not necessarily have to use a markdown editor, as well as it allows me to upload images so that I have somewhat of a file server as well. This blog is a little over a year old now and previously was a WordPress site. So for me it made sense to keep my WordPress setup and use Gatsby as the front end (Although, I did consider a markdown implementation). This is commonly referred to as a headless WordPress install. WordPress does have a built-in REST Api. For the Gatsby theme I went with I needed to install a GraphQL plugin on my WordPress API site, which you can read more about here. This plugin basically allows the WordPress site to serve up it’s own GraphQL, which by the way I have had no previous experience with, however, it is fairly intuitive in the way you query schema and data structures, and I may be covering this more in the future as I have feeling that GraphQL will be gaining more attention in the near future.

GitLab CI/CD and Nginx for Build and Hosting

From what I have gathered too, is the majority of users love to use this setup with a static pages host provider, or in other words Netlify or GitHub pages (I prefer GitLab). You could do the same with Gitlab as well, and I really do love GitLab for the simple fact that they have had a CI/CD integration for a long while now, as well as private repositories. GitHub is following suit, but I still think that GitLab is awesome as an opensource project and as a resource for developers. Now, I currently don’t have any unit tests written for my site, but most likely will in the future, so I do have a way to implement this using GitLab.

However I didn’t want to mess around with migrating my domain over to Netlify or GitLab pages, so I went with setting up a small instance of Ubuntu 18.04 on DigitalOcean, where I also have my WordPress CMS on a droplet, and actually the day I went live with the new site, I simply added some new records for my domain, so if you go to api.fundamentalsofcode.com you’ll be directed to my WordPress site, and if you go to fundamentalsofcode.com you are directed to my static page site.

Following the build process, I have an Nginx Ubuntu 18.04 server which is hosting my site, which is secured with a LetsEncrypt SSL Certificate. I have all of this configured and setup using Digital Ocean, which by the way I love and if you want you can too if you want to use my code here you can get a slight discount and help me with my own hosting fees. Right now this blog is a labor of love, although someday hoping to turn this into something more.

Challenges…

There were a few, and mainly it was getting a few of the plugins configured correctly, which by the way there are many and you can search for them in the Gatsby documentation, but this was not really a major hurdle. A couple that I have used are gatsby-plugin-google-analytics, gatsby-plugin-mailchimp and disqus-react. Basically, I needed the limited functionality for subscriptions, analytics and as I’ve been using Disqus previously this one was a no brainer.

Also, to be honest, I went briefly over the documentation for hosting on Netlify, but I decided not to go that route as I could not get the build process to work correctly the first couple of attempts, and I ended up just throwing it onto my own server, which in many ways is comforting to me but I do also understand using something like Netlify.

I need to figure out a way to create webhook so that when I publish on my WordPress site, it automatically stages a new build and deployment on my GitLab repository. Right now this is a manual process and it’s just me so not a huge deal at the moment, but any good developer will tell you that automation will help make these small mundane tasks accident-proof.

More to Come

I need to add a contact page, as well as add some additional search functionality for the site, which currently is still small enough and there is the ability to go to a page based on category or tag, but I want something a little more intuitive as well. But otherwise, I have truly enjoyed this setup and hope to have many more posts to come on this site! Please leave any questions or comments you may have below.

Cheers and happy coding.

Next On FoC

New Role and New Responsibilities

New Role and New Responsibilities
Finished the Migration of the Site Today!
Previously On FoC

Finished the Migration of the Site Today!

Finished the Migration of the Site Today!