Build a Multi-Page Gatsby Site from JSON

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.

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.

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.

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.

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! :)