loading...
Cover image for Build a Multi-Page Gatsby Site from JSON

Build a Multi-Page Gatsby Site from JSON

ashleemboyer profile image Ashlee (she/her) Updated on ใƒป2 min read

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


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.

Posted on by:

ashleemboyer profile

Ashlee (she/her)

@ashleemboyer

Disabled Web Developer โŒจ๏ธ | HOH ๐ŸคŸ | Live Knitter ๐Ÿงถ & Live Coder ๐Ÿ‘ฉโ€๐Ÿ’ป | she/her

Discussion

pic
Editor guide
 

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?

 

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!

GitHub logo 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.

screenshot

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: "
โ€ฆ
 

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