In this tutorial you will learn how to manage multiple sites powered by multiple Contentful Spaces using a single theme stored in a Git repository.
A multi-city franchise might have hundreds of web sites, each of which maximize local search engine optimization (SEO). Content for each city's site might vary: perhaps putting an address at the top of a page works best in Omaha and putting photos at the top of a page works best in Oslo. However, the theme behind the regional landing pages should be centrally managed for cohesive branding that's easy to maintain.
Watch the [video tutorial](https://docs.google.com/document/d/1IOoTPM0L8pw8FskbnLliVkIplmbAp20EYWJlN2tvapE/edit#heading=h.7ceegmwsd89m).
## Set up site 1
### Create site 1
- To start, [spin up a site in Stackbit from a sample theme made for this tutorial](https://app.stackbit.com/create?theme=https://github.com/rylandstackbit/multisite-management-demo-contentful-stackbit&utm_source=contentful&utm_medium=referral&utm_campaign=multisite-management-demo). You'll land on the Stackbit Site Builder with the correct [GitHub repository](https://github.com/rylandstackbit/multisite-management-demo-contentful-stackbit) already filled in under **Theme**.
- At the top of the **Stackbit Site Builder** screen, change your **project name** from the random words generated by Stackbit to `Site 1`.
- Under **Headless CMS**, authenticate with Contentful. Select the Contentful **Organization** where Stackbit should create a new Contentful **Space**.
- Under **Repository**, authenticate with GitHub. Select the GitHub **Organization** where Stackbit should create a new **repository** to store your own variation on the demo theme. _TO DO: On a brand new Stackbit account and a brand new GitHub account, this doesn't actually seem to work. The first Stackbit project gets created under Stackbit's GitHub account and you have to do a transfer. A second Stackbit project has the same problem. Not sure what went wrong w/ hooking up GitHub to Stackbit._
- Click **Create Site**.
⌛ **What Stackbit Site Builder does while you wait:**
- Creates a new GitHub repository by cloning the original repository into your GitHub account.
- Creates a new Contentful Space and provisions that Space with initial content from the `export.json` file in the original repository.
- Creates a Netlify site.
- Creates webhooks between Contentful and Netlify so that whenever something is published in Contentful, it will trigger a deploy in Netlify.
- Creates webhooks between GitHub and Netlify so that whenever something is committed into GitHub, it will trigger a deploy in Netlify.
### Rename your theme's repository
Stackbit provisioned your theme's repository on GitHub as `site-1`, but it'd make more sense to call it something like `shared-theme` since it will be used in multiple sites.
- Click the **gear** icon in the top left corner of Stackbit Studio.
- Below the project name, in **Connected Services**, in the **GitHub** card, click **Open**.
- Click **Settings** in GitHub's top navigation menu.
- Under the **Options** section of the sidebar, under **Settings**, change the **Repository name** from `site-1` to `shared-theme` and click the **Rename** button.
- Navigate back to the browser tab where you have your site open in **Stackbit Studio**. Verify that the settings modal, in **Connected Services**, in the **GitHub** card, says that your repository name is `your_github_organization/shared-theme`.
- Close Stackbit's **Settings** modal.
### Edit site 1
Once your site is up and running in **Stackbit Studio**, you can edit the content visually.
- Click on **Content** in the top navigation bar.
- Within the site's preview panel, hover over the title and click it _(or expand **Title** in the sidebar_).
- Change the copy to `This is site 1` and click outside of the editing box to save your work.

This change immediately synchronizes with Contentful. To see that the change in Stackbit propagated to Contentful:
- Click the **gear** icon in the top left corner of Stackbit Studio.
- Below the project name, in **Connected Services**, in the **Contentful** card, click **Open**.
- Click **Content** in Contentful's top navigation menu.
- Find and click on the **Page**-typed item named **Home** in the table.
- In the home page's **Sections** repeater field, the first entry has a type of **Hero Section**. _(Also note that it has a status of **Changed** rather than **Published**.)_ Click it.
If everything's worked correctly, you'll see `This is site 1.` in the hero section's **Title** field.


This sync works both ways. Let's test that.
- Beneath the hero section's **Title** field in Contentful is the **Subtitle** field. Change the **Subtitle** to `This change came from Contentful.`
- Navigate back to the browser tab where you have Site 1 open in **Stackbit Studio**. _(Note: You don't need to click 'Publish' in Contentful.)_
- Close the **Settings** modal.
If everything worked correctly, you'll see `This change came from Contentful.` in the subtitle area of the home page within Stackbit Studio's preview panel.



### Configure Netlify
_TO DO: Some sort of section HERE, not during site creation, saying to check https://app.stackbit.com/dashboard for `Site 1` and see if there's a **Claim** button to the right of an alert asking you to "Claim your project on Netlify to keep your site alive." That means that your Stackbit account isn't yet hooked up to your Netlify account properly, and that the repo clone is in Stackbit's Netlify account, not yours. Once you do that, it should change to a gray toast saying, "Success: Your Netlify site has been claimed!" that you can close if you'd like. For future work with the Stackbit Site Builder, sites should be automatically built under your Netlify account._
To understand how your live site will work on Netlify:
- Click the **gear** icon in the top left corner of Stackbit Studio.
- In **Connected Services**, in the **Netlify** card, click **Open**.
_TO DO: What exactly did we want the audience to learn about Netlify from within Netlify's control panel, other than how to rename a site?_
### Publish site 1
- In Stackbit Studio's navigation bar, click the **Publish** menu at the top right, but don't click its dropdown's **Publish** button. Instead, click the dropdown menu's **Live Site** button.
You'll see your live site as hosted on Netlify, but it will have old content. This is because your content changes aren't yet published.
- Now click **Publish** in at the top right of Stackbit Studio's navigation menu, and click the **Publish** button in its dropdown.
To verify that your changes are published in Contentful:
- Navigate back to `Site 1` in Contentful.
- After 30 seconds, refresh the page.
If everything worked correctly, you'll see the 'Changed' status switch to 'Published'.
To verify that your changes are published on Netlify:
- Navigate to Netlify and click **Deploys** in the top menu.
- Atop the deploy's list, you'll see a deploy labeled with **Building**.
After another 60 seconds or so, Netlify will finish building the updated version of the live site.
- Navigate to your live site and refresh the page. _(If you've closed it, in Stackbit Studio's navigation bar, click the **Publish** menu at the top right, click the dropdown menu's **Live Site** button.)_
If everything's worked correctly, you'll see your new content on the live site.
💡 **Note:** Stackbit Studio's **Publish** button performs a pull request from your GitHub repository's `preview` branch to its `main` or `master` branch, while also publishing Contentful content currently in **Changed** status _(with granular scoping to a given page's content available on paid plans)_.
Your theme's codebase and your CMS content both contribute to the way a site looks while you edit in Stackbit Studio, so if you're happy with the way a site looks, you probably want to publish both aspects of your site to production at the same time.
However, if you need to publish such changes to production separately from each other, head to GitHub or Contentful to perform one action or the other manually.
## Set up site 2
At this point, we have one site built that uses our starter theme, currently stored in our GitHub account under a repository named `shared-theme`.
Now we will create another site that also uses `shared-theme`. This new site will use a different Contentful Space, Netlify Site, and Stackbit Project. In the end we will have multiple sites powered by multiple Contentful Spaces built from a single repository.
Having one single repository allows you to share the same codebase among all of your sites. If you need to update something or make a quick fix or add a new component, you can do that by changing this single repo.
One thing to note is that at this time Stackbit can't create a new project using an existing GitHub repository with a new Contentful Space. So we will need to create this new site by creating a separate Netlify Site Contentful Space ourselves. Then we can import the new site into a new Stackbit Project using a different flow called **Stackbit Import**.
Let's create this second site now -- same repository, different Contentful Space, different Netlify Site, different Stackbit Project.
### Local machine setup
- To start, clone the repository containing your theme's codebase -- that is, `shared-theme`, if you've been following along word-for-word -- from your GitHub account to your local machine.
- Open your local machine's terminal and enter the command `git clone git@github.com:your_github_organization/shared-theme.git`, being sure to substitute `your_github_organization` and `shared-theme` as appropriate.
- Now write `cd shared-theme` and hit **Enter**.
- Run `npm i`. _(If NPM is not installed on your machine, install it [here](https://www.npmjs.com/get-npm).)_
### Create site 2 in Contentful
Now let's create a similar Contentful Space to the one Stackbit created for Site 1. A boilerplate schema and sample content for Contentful already exists in our theme. To create a new Contentful Space with that export file:
- In Contentful, click on the **"hamburger" icon** in the top left of the navigation menu.
- Click the **Organization** dropdown at the top of the flyout sidebar menu and click **Create organization** at the bottom of the dropdown.
- Name your new Organization `Organization 2` and click **Create Organization**.'
_(We are creating a new Contentful Organization because you can only have one Contentful Space per Contentful Organization on the Free Plan.)_
- Click on the **"hamburger" icon** in the top left of the navigation menu to expand the flyout sidebar menu again.
- Choose the **Free Plan** and **Web app only** cards. Then click **Continue** in the bottom right.
- Name this Space `Site 2`, choosing the **Empty space** radio button, and click **Create space**. Then click **Go to my space home**.
Now that we've created a new space, we have to populate its structure and contents.
- Here, click on **Settings** in the top left of the nav. Then click **API keys** in the dropdown.
- Click the **Add API key** button in the top right, name it `Site 2 API key`, and click **Save**.
- Once created, click the back arrow at the left hand side of the top sub-navigation menu.
- Click the **Content management tokens** tab of the **APIs** page.
- Click the **Generate personal token** button.
- Set the **Token name** as `demo-key`.
- Click **Generate**.
- Copy the token to your clipboard.
- Open your local machine's terminal and execute the command `./contentful-export/import.js PASTE_YOUR_TOKEN_HERE YOUR_SPACE_ID`.
- If needed, get `YOUR_SPACE_ID` by navigating back to the new space. Copy it from the browser's URL bar, as in `app.contentful.com/spaces/YOUR_SPACE_ID/api/cma_tokens`.
- If you're on Windows, [Git-SCM's **Git Bash** CLI tool](https://git-scm.com/downloads) lets you execute code with `./` commands, just like Linux.
Now all the content from your theme's Contentful boilerplate is being imported into the `Site 2` space. Once the command has completed:
- Navigate back to the Contentful space titled `Site 2`.
- Click on **Content**
If everything worked correctly, you will see all of the starter theme's boilerplate content in the table of your new Contentful space `Site 2`.

### Create site 2 in Netlify
Next we need to create a new Project in Netlify. To start:
- Navigate back to Netlify.
- Click on your team name in the breadcrumb next to the Netlify logo.
- Then click 'New site from Git'
- Click the 'GitHub' button. Authenticate with GitHub. Locate your repository in the table below.
(If you can't find your repository:
- Click on the Organization name and click 'Add another organization' in the drop down. A new window will open.
- Click 'Only select repositories' from the radio buttons.
- Select the 'company_name Demo' repository.
- Click 'Install'. )
- Click on the repository.
- Click 'Show advanced'.
- Click 'New variable'.
- Set the Key as 'CONTENTFUL_SPACE_ID'. Set the Value as the 'Space ID'.
- Click 'New variable'.
- Set the Key as 'CONTENTFUL_DELIVERY_TOKEN. Set the Value as the 'demo-key'.
(To find your 'demo-key' in Contentful.
- Clicking 'Settings'.
- Click 'Api keys' in the drop down.
- Click 'demo-key token' from the list.
- Then copy the 'Content Delivery API - access token'.)
- Then click the 'Deploy site' button.
### Connect a Netlify Build Hook with Contentful
While Netlify is building the second site:
- Click 'Site settings' in the nav.
- Then click 'Build & deploy' in the side nav and click 'Add build hook'.
- Name the build hook 'contentful publish build hook'. Then click 'Save'.
- Copy the build hook URL.
- Navigate to Space 2 in Contentful and click 'Settings' in the nav. Then click 'Webhooks'.
- Under Webhook templates on the right side menu click 'Add' next to Netlify.
- Paste the build hook into the input field and click 'Create webhook'.
Now every time you publish in Contentful Space 2 it will trigger the build in Netlify.
- In Netlify Project 2, click 'Deploys' in the nav. Then click the current build to watch the build complete within the next 5 minutes.
- Once the build is finished check the live site by clicking 'Deploys' in the nav. Then click the URL in the top card.
If everything was done correctly, you'll see the live second site powered by Space 2 and the same repository.
### Import site 2 into Stackbit
Now let's import the second site into Stackbit. To start:
- Navigate to [https://app.stackbit.com/import](https://app.stackbit.com/import).
- If needed, authenticate with GitHub.
- Select the 'company_name Demo' repo that is powering both Site 1 and our second site. Then click 'Continue'.
- Click 'Connect Contentful'.
- Choose the Contentful Organization where Space 2 exists. Then select 'Space 2' and click 'Continue'.
- Click 'Go'.
Now this second site is being wired to the same repository, but to Space 2 instead of Space 1.
- Navigate to Site 1 in Stackbit's Studio.
> (If you closed that tab, navigate to [https://app.stackbit.com/dashboard](https://app.stackbit.com/dashboard). Locate 'Site 1' and click the 'Open' button.)
Once Site 2 finishes provisioning, you'll have both Site 1 and the second site in Stackbit.
To keep things organized, rename this second site in Stackbit 'Site 2'. To do this:
- Click on the 'Gear icon' in the top left.
- Change the 'Project name' input field to 'Site 2'. Then click the 'Rename' button.
- Close the Settings modal by clicking the 'X icon' in the top right of the modal.
### Edit site 2
To see the sites in action, change the Hero Section title to 'This is Site 2' and subtitle to 'Changing content from Stackbit'. To see these changes in Contentful Space 2:
- Click on the 'Gear icon' in the top right. Then click 'Open' next to Contentful.
- Place the tabs of Contentful Space 2 and Contentful Space 1 side-by-side.
- In the 'Content' section click on the Content Type named 'Hero Section' in both Spaces.
- If everything worked correctly, you'll see 'This is Site 2' in Space 2 and 'This is Site 1' in Space 1.
At this point we have two sites published by the same repo powered 2 separate Contentful Spaces.
### Publish site 2
Now let's publish the changes in Contentful Space 2. To start:
- In the 'Hero Section' Content Type click the 'Publish changes' button in the right side menu.
- To compare the two live sites, navigate to Site 2 in Stackbit Studio.
- Click 'Publish' in the top right of the nav. Then click 'Live Site.'
Once the Netlify Build is complete (3-4 minutes), you will see 'This is site 2' in the Hero Section Title of the live Site 2.
## Change the Theme on Both Sites
Next let's add a new component to both sites. To start:
- Navigate to the 'company_name Demo' repository.
- Atop the README.md click the 'Kometa UI Kit Free Tailwind' link.
- Find whichever component you'd like to add.
- Click 'React' in the Header of the component card. Then click 'Copy' to copy the code to your clipboard.
- Now navigate back to the 'company_name Demo' repository.
- Click into the 'src' folder. Then click into the 'components' folder. Then click into the 'sections' folder.
- Click the 'Add file' button and click 'Create new file' from the dropdown.
- Name your file 'test-component.js'.
- Paste the component React code into the Edit new file text area.
- Replace line 1 with 'export default function TestComponent() {'
- Next click the 'Create a new branch for this commit and start a pull request.' radio button.
- Name the new branch 'new-component'.
- Click the 'Propose new file' button.
Before we create the Pull request let's reference that component in the Layout component.
- Click 'Code' in the sub nav.
- Click on the 'Master' button. Then select 'new-branch' branch.
- Navigate to 'layout.js' by clicking 'src', then 'sections', then 'layout.js'.
- Once in the layout.js file, click the 'Pencil icon' in the right side of the Header of the code card. This will enable you to edit the code.
- Below the last import write, 'import TestComponent from '../sections/test-component';'
- Then below the \`\' component write \.
- Click the 'Commit changes' button near the bottom of the page.
- Next click 'Pull requests' in the sub nav.
- Click the 'Compare & pull request' button.
- Then click the 'Master' button and select 'Preview' to merge the changes into the Preview branch. (The Preview branch is what will show up in Stackbit Studio.)
- Click the 'Create pull request' button.
- Click the 'Merge pull request' button. Then click 'Confirm merge'.
- Once merged you can click the 'Delete branch' button.
Now navigate back to Site 1's Stackbit Studio. Scroll down until you see the new component. Then navigate to Site 2's Stackbit Studio and scroll down until you see the new component.
## View the Theme Change on Both Live Sites
In Site 2's Stackbit Studio, click 'Publish' in the top right of the nav. Then click 'Publish' in the drop down.
*(Behind the scenes this merges the Preview branch to the Master branch causing the component to be available on both live sites. You will be able to see the new component now on both Site 1 and Site 2's live site.*
*If you navigate to Site 1's Stackbit Studio, you won't see the new component. This is because..? )*
One more thing we need to do is merge back changes from Master to the Preview of Site 1.
- Navigate to GitHub.
- Click on 'Pull requests' in the sub nav.
- Click the 'New pull requests' button.
- Click on the 'Master' button and select 'preview-CODE'.
- Write a title into the input field like, 'Added component'.
- Click the 'Create pull request' button. Then click the 'Merge pull request' button. The click 'Confirm merge'.
Navigate back to Site 1's Stackbit Studio. Scroll down until you see the new component. Then navigate to Site 1 and Site 2's live sites. Refresh each page.
If everything was done correctly you'll see the new component on both sites --- all from changing only one repository.
## Change the Theme of Only 1 Site?
## Other housekeeping
### Renaming site components
#### Renaming a Stackbit project
If you change your mind about what you'd like your project named within Stackbit, you can rename it. Note that this won't change the name of your repository in GitHub, the name of your site in Netlify, or the name of your space in Contentful.
- Click the **gear** icon in the top left corner of Stackbit Studio.
- In the **Project Settings** modal that pops up, change the Stackbit **Project Name** from `Site 1` to something else -- for example, `your_company_name Site 1` -- and click the **Rename** button next to it.
- Close Stackbit's **Settings** modal.
#### Renaming a Contentful space
If you change your mind about what to call your Contentful space, you can rename it.
- Click the **gear** icon in the top left corner of Stackbit Studio.
- Below the project name, in **Connected Services**, in the **Contentful** card, click **Open**.
- Click **Settings** in Contentful's top navigation menu. Then click **General settings** in the dropdown.
- Change the **Space Name** from `Site 1` to something else -- for example, `Space 1` -- and click the **Rename space** button.
- Navigate back to the browser tab where you have your site open in **Stackbit Studio**. Verify that the settings modal, in **Connected Services**, in the **Contentful** card, says that your site name is `Space 1`.
- Close Stackbit's **Settings** modal.
#### Renaming a Netlify site
If you change your mind about what to call your Netlify site, you can rename it, which also changes the URL of your `.netlify.app` live site.
- Click the **gear** icon in the top left corner of Stackbit Studio.
- Below the project name, in **Connected Services**, in the **Netlify** card, click **Open**.
- From your Netlify **Site overview** page, click **Site settings** in Netlify's top navigation menu.
- Under the **General** section of the sidebar, in **Site details -> Site information**, click the **Change site name** button.
- Change the **site name** from `site-1-random_number_here` to something else -- for example, `yourcompanyname-site-1` -- and click **Save**.
- Navigate back to the browser tab where you have your site open in **Stackbit Studio**. Verify that the settings modal, in **Connected Services**, in the **Netlify** card, says that your site name is `yourcompanyname-site-1`.
- Close Stackbit's **Settings** modal.