This is honestly been something that I’ve put off for a long while and i’m sure a lot of coding monkeys out there can relate. A Personal Blog and Website seems like a daunting task, especially when you’re honestly not confident in your own skills and abilities. Despite being told for years and years that you have talent and skill, one of the hardest things to do is to actually believe it yourself. To actually take a step back and go “It’s time i did something” is a feat a lot of people struggle with.

With this Website, i intend to do just that.

The Plan

The plan was simple. I needed a platform and a place to call my own. To showcase some of the fun and fancy little projects i’ve done either professionally or for fun. From Discord Bots to full on react front and backends, i’ve tried and tested a lot of different things over the years. I wanted to showcase some of the things i’m most proud of. Programs and software that have been used to great success either among a group of friends or for companies i’ve done work with.

Looking at all the tools i’d played with over the last year, i quickly fell into the need to build this with Gatsby JS. The ability to generate static pages built using React, GraphQL and any data source sounded like a great idea. Having used GatsbyJs before for documentation, i was quite entertained by just how much time could be saved.

Having chosen how i was going to generate the site, and already owning the domain names i would need, i looked into the other three important aspects. Hosting, Deployment and the Data Itself.

Having my own Digital Ocean Droplet i use for a number of different projects , i was quite happy to use it to host a simple Headless WordPress Server to deal with the data.

In regards to the hosting and deployment, i decided to give Netlify a chance. Having never used it before and only really dabbled with heroku, i thought it would be a great chance to try out something new.

Spoiler: It absolutely was.

Getting Started – Gatsby Teething

The first thing i needed to do was decide what kind of layout i wanted to go for. Gatsby is a wonderful piece of tech in that it allows you to pick a starting repo to work from. There were a good few options in their started library. Unfortunately for me i made quite a few mistakes at the starting gate.

The one thing i found out after a few hours of poking a prodding: Almost every theme is built upon a base from another. Initially, i went straight for Gatsby Casper. It seemed to tick all the boxes i needed, and looked absolutely fantastic to boot. However, the more i looked into it the more i realised just how much work would need to go into this theme to meet my criteria.

Firstly: This theme was built from the ground up to use the GHOST CMS Platform. I initially thought it would be very straight forward to just play around a bit and just swap it from GHOST to WordPress. This, however, was a lot more time consuming and fiddly than i originally thought it would be. There we GraphQL calls everywhere to things i wasn’t fully in understanding of.

Secondly: There was also markdown being used in this, and while i love the use of markdown to quickly write things up, this project was not something i needed it with.

After putzing around, re-cloning and failing miserably for a few hours, i went back to the starter themes and found, to my amusement, a replica theme based specifically for WordPress. With so little inside it, and it (almost) being ready out of the box i was flabbergasted at all the time i had wasted.

Pulling in WordPress Data

After seeing that this was the starter for me, i went to my droplet and set up a Headless WordPress Install. This is just a fancy way of saying that wordpress was installed, however you cannot access it like a website. It specifically only works via authentication and API calls. A very simple backend for a very simple blog. I won’t go too much into the details of this, but just know that i set up a basic wordpress install, set up authentication with one of the many JWT authentication plugins and made a theme which would lock out being able to access the site directly.

After setting this up, i made sure gatsby-wordpress-source was installed correctly and all settings required were included in the gatsby-config.js and gatsby-node.js. This took a little trial and error on my part, but a few attempts later i was able to get my data coming in without issues.

Netlify

With everything set up and pushed to my repository on github, i dived straight into Netlify. Genuinely, if you are ever looking to host a static website, i highly recommend this. Their free tier covers so much including a free SSL certificate for custom domains using LetsEncrypt on their side. Can’t go wrong with that

Setup was almost too easy. I made an account, i attached my repo to my netlify account and told it to run a build and deploy every time i commited to master.

In addition to this, i added a small plugin called wp-netlift-deploy to my WordPress installation. Installation and setup involves created an incoming webhook for your site on Netlify. By doing this you can pass the link given to your plugin so that it triggers a build after every new post/page is created. Very handy.
Attaching the custom domain was also incredibly simple too, though it took a little bit to navigate through Netlify’s menus and find what i needed. There was also a small bug where i’d created the ssl certificate but netlify seemed to error. A simple refresh solved the issue.

I honestly thought setting up Netlify would be the hardest part of the whole thing, but it turned out to be the smoothest. You can see by this website itself that clearly it works incredibly well for hobbyist or small projects.

Conclusion

With a little time to look over this with some trial and error, i am honestly really happy with the results and how it’s turned out. As of the time of this post there’s still a lot of adjustments to be made to the overall feel and layout. But simply knowing everything i enjoy can have a small, nice looking writeup is a great plus for me. I’m hoping to hook a lot of new things into here and hopefully it’ll become a standard for myself to chip away at something for here.

You can view the source here: https://github.com/riezahughes/portfolio-nodejs-react

Thanks for reading. I hope to show you more things soon.