Re-creating my portfolio with Gatsby

You may have read Re-creating my portfolio with React where I talked about my experiences converting my simple static portfolio into a React website, turning reusable objects on the page into React components. This inspired me to learn Gatsby, a static site generator that uses React.

I was previously using my a category on my photography WordPress blog to host my blogs about web design and projects. This was a bit of a weird experience for users as if they chose to read more about a post on my portfolio, they’d be directed to my photography site. Gatsby allows me to pull in all the posts from WordPress and create a new site. This also allowed me to store all of my portfolio items as WordPress posts. I installed the Advanced Custom Fields plugin to handle the tech icons and button links.

The site is now insanely fast hosted on Netlify and using Server Side Rendering. Gatsby’s links also make navigating from page to page incredibly quick.

Whenever I want to add content to the site I just login to WordPress, create a new post under the relevant category, with a tag for if I want it to be displayed on the homepage of my portfolio. I hit publish and a new Netlify build is queued then deployed using the Jamstack deployments plugin.

I want to build every website this way in the future. It took me about 2 days to set up, so it’s incredibly quick to develop. Plus, sites are faster and more secure on the Jamstack.