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!
The easiest step. :) Head over to the Gatsby tutorials if you have any issues or need help setting things up.
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.
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.
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.
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! :)
Did you know I have a newsletter? 📬
If you want to get notified when I publish new blog posts or make major project announcements, head over to https://ashleemboyer.com/newsletter.