Gatsby: How to create multiple copies of the site base off an API

[james-lukensow]

Summary

So, have a very strange request here. We are looking for a way to create copies of the site that are all powered by an API. I'm not concerned with consuming an API (that is fairly straight forward), but where I'm getting stuck is how would I build multiple versions of the site.

Example API Response:

[
        {
            "siteName": "Master Site",
        "slug": null
    },
    {
        "siteName": "User Site 1",
        "slug": "/user-site-1"
    },
    {
        "siteName": "User Site 2",
        "slug": "/user-site-2"
    }
]

Not sure if this is the idea structure, but we could end up with something like this:

/public

• index.html
• js
  /sites
  
  
  
  • /user-site-1
    
    
    
    
    
    • index.html
      
      
      -js
    
    
    
  
  
  • /user-site-2
    
    
    
    
    
    • index.html
      
      
      -js
    
    
    
  
  

I'm guessing we would want to somehow interject this into the gatsby-node file, but again, never completed anything like this before, so not sure it's 100% doable.

Thanks,

[josefaidt]

Are you wanting to do this on-demand via an API? Would the sites have different content, or literally just a clone?

[james-lukensow]

@josefaidt I would like to get our current build process in place, which is CircleCi. I'm okay with the new sites being created during the build process of fetching a API, parsing the array of sites, then creating the necessary root files (existing site) and all the new sub-sites. Hopefully that makes sense.

[josefaidt]

No problem, trying to wrap my head around what you're wanting to do. Do you plan on having one "master" site with children sites sharing the same tooling and component libraries? If so this sounds like an interesting use case for Gatsby Themes.

Do these websites serve a different purpose from the main site? I'm trying to understand why you're looking for nested websites instead of putting all content into one and allow Gatsby to generate the slugs with page-creator or something, if that makes sense. 🙂

[james-lukensow]

Exactly, we will have one master site, that serves as our current site (https://www.cpbgroup.com/).

Now, the business reason to have multiple sites located under "sites" or another folder, is we're using this as a new biz tool. Meaning, we're creating a CMS so you can customize the landing page, customize the component copy throughout the site. As well as create various sites. Maybe I create a new biz site name "Site 1" or "Site 2".

And in the json example, I showed above, I intentionally left out much of the data, but each site will have an array of components per page, that tells gatsby how to build out each individual site.

Example: Site 1 would be https://www.cpbgroup.com/site1, and so on...

[josefaidt]

Oh this sounds like a great use case for Gatsby Themes. Themes allow you to set up a base "theme" which is essentially a template for its child. Then you can set up a site that can either use the existing setup, or extend it. In Jason's post I linked they show how to create a child theme and build a site on top of that. It helps reduce the redundancy between all of the sites. (I'm not sure how it will look in production when triggering new builds of a child site).

Integrating the JSON plugin with a theme to feed in site content would be really cool to see if you choose to go that route, but by default I think this is outside Gatsby's scope with your intended API method. You could use gatsby-node to generate the slugs, and on start it will generate content based on its position in the directory tree. Am I understanding the situation correctly?

[DSchau]

@josefaidt completely agree.

@whnunlife I'd recommend checking out Gatsby Themes.

In this example, you'd define a base Gatsby theme that establishes the data layer and visual theme (or feel free to structure as a parent/child theme), and then you'd re-use this theme whenever you'd like a site with a similar look and feel.

Without themes--you could do this too, but it'd be a bit more involved and would likely use pathPrefix and (multiple) custom builds and copy steps. It's doable, but not quite as clean.

Going to close this as answered (and thanks @josefaidt for the assistance here!), but please feel free to reply if we could shed some light on anything else.

Additionally, I'll offer a pair programming session if that's helpful and you'd like a little extra assistance!

[james-lukensow]

@josefaidt @DSchau

Thanks for all your help, really appreciate it!