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

---

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.

Comments

[omale-godwin]

that is greate and thanks for your wonderful post.
i have been battle with my code since the last three week i grammatically create page exactly as you deed and it work find but my challenge is that i have more than one json file about ten in number how can i add those json file too i encounter error thanks for your help in advance

[Mel Macaluso]

Nice and simple, cheers. I guess the same would be possible as well if you fetch the data from an API endpoint in JSON format?

[Ashlee (she/her)]

This is something I'm not too sure about! I think all of the pages are generated on build, not on load, so you would have to load all of your data into GraphQL on build and then make your app access GraphQL, rather than the API directly.

I am more sure that this is a doable approach, because does show that you can pull data from APIs on their home page! I've not looked to deeply into the following GitHub repo, but it might be helpful for answering your question!

ryanflorence / gatsby-source-firebase

Gatsby plugin to turn Firebase into a Gatsby data source.

Gatsby Firebase Source

Quick and dirty firebase source for Gatsby. Allows you to query your firebase data right into your statically generated pages with Gatsby.

Usage

1. First you need a Private Key from firebase for privileged environments, find out how to get it here: firebase.google.com/docs/admin/setup (or click the settings gear > Service accounts tab > Generate New Private Key button at the bottom)

2. Place that private key .json file somewhere in your gatsby project (the root is fine).

3. Configure gatsby-config.js

// the plugin options are:
{
  credential
  databaseURL
  types: [{
    type
    path
    query,
    map
  }]
}

// Here's an example:

module.exports = {
  // the rest of your config
  plugins: [
    {
      resolve: `gatsby-source-firebase`,
      options: {
        // point to the firebase private key downloaded
        credential: require("./firebase-key.json"),

        // your firebase database root url
        databaseURL: "

…

View on GitHub

[Jarod Peachey]

Hey, thanks for this awesome post? One question: how would I dynamically create a link to each data item?