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!
Top comments (3)
Thank you for sharing! I'm also planning to learn GatsbyJS for my portfolio site, but am putting it off because it seems like a lot to get into. You make it sound very do-able 🤗 I'll get back to making my plans soon. You have inspired me.
Your site looks really good and works well on my tablet 👍
Do you know ReactJS? Start with that first since GatsbyJS is based off ReactJS. You can read the docs. Or if you’re a hands-on person, you can play around with the Create-React-App starter project. It has everything setup for you for what a typical ReactJS app needs.
At work I actually recently got a couple of introduction presentations on how we work with ReactJS. And because of those as practiceI made a little app from a tutorial with the Create-React-App you also mention 😃 So I have seen react code a bit. And have a course purchased to learn more. And will get into GatsbyJS after I finish that course.
I'm happy to hear that the learning track I made is a logical one. Thanks for replying 🤗