There are two workflows for adding a new Gatsby Cloud site:
- Start from a Template
- Import from a Git Repository
This lesson covers the "Import from a Git Repository" flow.
1. Prepare a Repository
For this lesson we will use the gatsby-starter-blog. Since this is a Gatsby starter, you can use Gatsby CLI to prepare this project on your machine.
gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-blog
Alternatively, you can clone the repository using Git.
git clone https://github.com/gatsbyjs/gatsby-starter-blog
After you have the project, push it to your remote GitHub repository.
2. Select Git Provider
From your Gatsby Cloud Dashboard, click the Add Site button. Choose Import from a Git repository then click Next.
Next, choose your Git provider, in this case GitHub.
3. Specify Repository Details
Then provide the details for your site:
- The GitHub organization (either your personal account or an actual organization)
- The repository to import
- The branch to import from (in this case, the
main
branch) - The base directory, i.e., the directory containing the Gatsby site (the root directory,
/
, is default) - The site name (defaults to
<repo name>-<branch name>
)
After you enter the site details, click Next.
If the repository screen is stuck loading, reference this article for solutions.
4. Add Optional Integrations
Next you will be prompted to connect an optional content management system (CMS) to your site. This step will vary depending on the CMS provider, so there are separate tutorials for each supported CMS. Click Skip this step to continue on.
5. Configure Environment Variables
Now, you will be asked to set up environmental variables for your site. The "Blog" starter does not use any environment variables so we will skip this step as well. Click Create site to continue.
6. Finish
Finally, you will then be taken to the Deploys tab of the Site Overview page for the newly added site.
Once your site is done building you can preview it at the build link provided.