Hello World from Gatsby

September 25, 2020

New Website

After many years of Drupal and Wordpress websites I finally migrated over to a Gatsby website. Hopefully all the site updates and worries of a Wordpress hack will be over.

Gatsby is a static site generator based on Node.js and React. Setting it up took some time and was a great learning process. I used the Gatsby Starter Blog as a base and modified it to meet my needs.

I am still very new to Gatsby and have only built one other site at work with it. The project at work I hosted using the Gatsby S3 Plugin which worked well. This website is setup on a private Github repository and is deployed through a free Netlify account. The code pipeline and hosting was effortless to setup, and is 100% FREE!

New Website

The site structure that I came up with is closely follows Wordpress’s posts and pages model. The pages content type is a Markdown content type that is loaded out of content/pages and routes to the root folder path. That is how I am able to make the /about, /resume and /uses pages. The blog content type is setup to parse Markdown files out of the content/blog folder and has /blog as the root. Gatsby is very flexible and I had a fun time adapting it to what I needed.

Setting up the photo galleries was also really easy. The image files are in folders like content/assets/photography and content/assets/homepage which allows GraphQl to access them. From there all I had to do was create a simple React component that uses the GraphQl query to collect the images and parse them out on the page. The gallery lightboxes are made with Simple React Light-box (SRL) which is so easy to use.

The next step on my Gatsby journey will be to build out photo pages for the images and use node-iptc to scrape the captions and meta-data out of the JPG files.

Overall the site is still a work in progress. It has been a fun learning adventure though that will hopefully come in handy on some other projects.

Written by Erik Hedin, Web Developer at New Relic.

© 2022, Erik Hedin. Built with Gatsby