Moving Personal Website from ReactJS to GatsbyJS

Personal website successfully moved to GatsbyJS!

The initial site was built in ReactJS about a few years ago. I wanted to exercise the ReactJS skills that I picked up at my first job. Everything worked fine. But the one thing lacking about my site was routes. I couldn't point potential recruiters to the About page directly where they could find download links to the resumes.

For a long time, I wanted to learn GatsbyJS, but couldn't find the time due to my day job. Finally found some time this weekend to get started. The site is deployed on Netlify.

For the most part, transferring of the site was simple as GatsbyJS is built on ReactJS. The one issue I struggled with was getting FontAwesome Pro icons to work. After some Googling, I managed to get it working. Apparently, I had to use the FontAwesome's react component to render the icons.

After that I ran into some issues getting the site deployed. This was when I learned how to read the deployment logs on Netlify.

The first errors I encountered was some libraries were missing from the build process. I realised that I had to add an .npmrc file. The next error I encountered was:

"window" is not available during server side rendering

I was using window in two places: for the back-to-top button and for extracting the query string. I resolved the back-to-top button by using an anchor tag over a button and modifying some styles. I then researched on alternatives to extracting query string values. I was led to this StackOverflow post. I went with using the query-string package. The errors were resolved and the site was published successfully.

Later on, I had issues with broken images. Since the projects I've published were little, I didn't want to maintain an API and a DB. I may do it in the future. So I decided to load the projects as static data on the site. After some debugging, I fixed the image urls by adding a ../ to all images under the /projects route.

From reading Netlify logs to using the console to debug the image urls, I've learned a lot from deploying this GatsbyJS site. I enjoy exploring and experimenting with new technologies. Hopefully I will have a new project idea for GatsbyJS again!