Ashlee standing in front of a brick wall looking up to her left and smiling. Her right hand is held up near her right shoulder with the palm facing upwards.

Ashlee M Boyer

You can find me talking about issues surrounding Disability, Accessibility, & Mental Health on Twitter, or you can find me regularly live-knitting or live-coding on Twitch. I'm @AshleeMBoyer on all the platforms I use.

Build a Multi-Page Gatsby Site from JSON

Sunday, May 12, 2019 — 2 minute read

#gatsby#web-development

I decided to take this approach when I made https://blackbirthdays.com. Originally, for the month of February, it showed a different person each day for their birthday. So, since there was very static data for the site, I decided to just feed the information into it with a JSON file. I wanted to practice something with Gatsby, so I got to practice programmatically creating pages from data and using GraphQL for getting data.

I couldn't remember exactly every step for doing this, so I made a new site for this post specifically. No worries, I plan on making it way better soon. I hope it can become a helpful tool for looking at text color/background color contrasts eventually. Anyways, here we go!

1. Create your project

The easiest step. :) Head over to the Gatsby tutorials if you have any issues or need help setting things up.

Terminal commands for setting up a new Gatsby project

2. Create the JSON file

Put a new JSON file in the root directory of your project. I had a little bit of issue with the data structure itself, but I think it just takes practice. It's easier to read data from GraphQL with arrays, so try to put your data into that sort of format.

How I formatted the color data

3. Create a template file

This template file defines how all of your dynamically created pages will be displayed. Cool, huh??! You can read a bit more about this on Gatsby's site.

Code for the template file

4. Make the gatsby-node.js file create all the pages

This file should already be in your root directory from the gatsby new command from step 1. This is where you implement the createPages API function and tell the site about the template file you created in the previous step. On the second line of the screenshot below, I specify the JSON file from step 2.

Code for the gatsby-node.js file

5. Restart the development server and preview your site

Everything should be good to go at this point and you can start styling. Have at it! Share your results if you give this a try, or let me know if something seems off in any of the steps. Enjoy! :)