Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): migrate cloud docs to dotcom(1) #36452

Merged
merged 39 commits into from
Sep 5, 2022
Merged
Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
9cce498
push up site creation & node version docs
Aug 12, 2022
d4f287b
migrate doc for apex and subdomains
Aug 12, 2022
168a6a9
migrate doc for netlify trailing slash
Aug 12, 2022
383b70d
move webhook/deploy docs to this branch
Aug 15, 2022
c591ee6
migrate doc for outgoing webhooks
Aug 15, 2022
5ab08a8
Merge branch 'gatsbyjs:master' into docs/add-cloud-docs
littlemarcus Aug 15, 2022
f9a2aab
rerun prettier
Aug 16, 2022
25a6914
rerun prettier
Aug 16, 2022
8812501
Merge branch 'gatsbyjs:master' into docs/add-cloud-docs
littlemarcus Aug 16, 2022
9282ed1
migrate doc for platform limits
Aug 16, 2022
3eae690
format subheaders
Aug 17, 2022
6780294
migrate doc for deploying functions on cloud
Aug 17, 2022
5cb2a1f
fix casing in docs descriptions
Aug 18, 2022
9586c04
remove we/lesson refs & netlify doc
Aug 18, 2022
726ed47
Update docs/docs/how-to/cloud/set-node-version.md
littlemarcus Aug 18, 2022
e9c8f16
Update docs/docs/how-to/cloud/create-site-from-repository.md
littlemarcus Aug 18, 2022
675862d
rework create site from repo doc
Aug 19, 2022
ca5f78c
Merge branch 'docs/add-cloud-docs' of https://github.com/MarcusCole51…
Aug 19, 2022
3e4bd91
additional adjustments
Aug 19, 2022
e02f4cf
match description & file title
Aug 19, 2022
526a2e9
adjust VCS references
Aug 19, 2022
3003230
adjust links/bolding
Aug 21, 2022
29b8aa6
final adjustments
Aug 21, 2022
74eb235
Merge branch 'gatsbyjs:master' into docs/add-cloud-docs1
littlemarcus Aug 21, 2022
eaeea74
Merge branch 'docs/add-cloud-docs' into docs/add-cloud-docs1
Aug 21, 2022
42a9857
next batch
Aug 23, 2022
c63737b
Merge branch 'gatsbyjs:master' into docs/add-cloud-docs1
littlemarcus Aug 23, 2022
6c0767c
additional docs/fixes
Aug 23, 2022
01f40a8
Merge branch 'docs/add-cloud-docs1' of https://github.com/MarcusCole5…
Aug 23, 2022
27140b1
fix linting issues
Aug 23, 2022
9b662f1
Merge branch 'master' into docs/add-cloud-docs1
DSchau Aug 24, 2022
5aafd20
Merge branch 'master' into docs/add-cloud-docs1
littlemarcus Sep 1, 2022
fc5caf1
Update docs/docs/reference/cloud/platform-limits.md
littlemarcus Sep 1, 2022
cb3652f
Update docs/docs/reference/cloud/what-is-gatsby-cloud.md
littlemarcus Sep 1, 2022
06afda1
Update docs/docs/how-to/cloud/managing-workspace-members.md
littlemarcus Sep 1, 2022
3c0477b
Update docs/docs/reference/cloud/build-logs.md
littlemarcus Sep 1, 2022
3d4e524
Update docs/docs/reference/cloud/cms-previews.md
littlemarcus Sep 1, 2022
69f0c95
Update docs/docs/reference/cloud/hosting-and-data-source-integrations.md
littlemarcus Sep 1, 2022
2431043
Update docs/docs/reference/cloud/quick-connect.md
littlemarcus Sep 1, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions docs/docs/how-to/cloud/create-a-deploy-to-gatsby-cloud-button.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: "Create a Deploy to Gatsby Cloud Button"
description: "Learn how to add a deploy button to your Github repository"
---

Gatsby Cloud supports Deploy Buttons which you can use to quickly create new sites from Github repositories.

[![Deploy to Gatsby Cloud](https://www.gatsbyjs.com/deploynow.svg)](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog)

At this time, only public Github repos are supported.

Have a feature request for Deploy Buttons? [Suggest a feature](https://gatsby.canny.io/gatsby-cloud).

### Configure a button

Set the `url` parameter of the link to your public Github repo.

HTML snippet:

```html
<a
href="https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog"
target="_blank"
>
<img
src="https://www.gatsbyjs.com/deploynow.svg"
alt="Deploy to Gatsby Cloud"
/>
</a>
```

Markdown:

```markdown
[![Deploy to Gatsby Cloud](https://www.gatsbyjs.com/deploynow.svg)](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/gatsbyjs/gatsby-starter-blog)
```
73 changes: 73 additions & 0 deletions docs/docs/how-to/cloud/create-site-from-repository.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: "Create a Site From a Repository"
description: "How to create a Gatsby Cloud site from a repository"
littlemarcus marked this conversation as resolved.
Show resolved Hide resolved
littlemarcus marked this conversation as resolved.
Show resolved Hide resolved
---

## Introduction

Gatsby Cloud allows you to create a site by importing your Gatsby project from a Git repository. This guide provides the steps for importing a repository from your Git provider and building that site on Gatsby Cloud.

## Prerequisites

You can use the [gatsby-starter-blog](https://github.com/gatsbyjs/gatsby-starter-blog) as a starting point. Select **"Use this template"** to create a new repository using the starter as a template.

![Button to create a new repository from a starter](../../images/use-this-template.png)

## Directions

### 1. Select a Git provider

From your Gatsby Cloud dashboard, click **"Add a Site"**.

![Button to add a site from the Gatsby Cloud dashboard](../../images/add-site.png)

In the "Import from a Git repository" section, choose your Git provider and install the Gatsby Cloud app. For the sake of this article you'll use Github, however GitLab and BitBucket are also supported.

![List of Git Providers](../../images/import-from-repo.png)

### 2. Specify repository details

Once connected to your Git provider, find the repository you would like to add to Gatsby Cloud and click **"Import"**. You can then provide the details for your site:

1. The site name (defaults to `<repo name>-<branch name>`).
1. The branch to import from and set as your "Production branch" in Gatsby Cloud (in this case, the `main` branch).
1. The base directory, i.e., the directory containing the Gatsby site (the root directory, `/`, is default).

![Basic site configuration](../../images/basic-configuration.png)

After you enter the site details, click **"Next"**.

### 3. 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](https://support.gatsbyjs.com/hc/en-us/articles/1500000746742) for each supported CMS. However, for this specific example, you can scroll past this card to continue on.

![No Supported Integrations Found](../../images/no-integrations.png)

### 4. Configure environment variables

Now, you will be asked to [set up environment variables](/docs/reference/cloud/managing-environment-variables) for your site. The "Default" starter does not use any environment variables so you will skip this step as well. Click **"Build Site"** to continue.

![Section to add environment variables to a new Gatbsy Cloud site](../../images/no-environment-variables.png)

### 5. Finish

Once your site is done building, you can view the site in two places:

#### Private build URL

Use the build URL to preview the deployed site. This URL is not indexed and is only accessible via direct link.

![Gatsby Cloud Private Build URL link](../../images/private-build-link.png)

#### Public default domain

Use your Gatsby Hosting provided "default domain" to access the public deployment of your site. Gatsby Hosting is turned on by default and the "default domain" is listed under "Site Settings > Hosting".

![Gatsby Cloud default hosting domain](../../images/default-domain.png)

### Troubleshooting

When creating a site from a Github repository, you'll be asked to authenticate with Github. In instances where you're having trouble authenticating and importing your site:

1. Log out and log back in. If you are still aren't able to import the site, your Github repository is part of a Github organization, and you are not an owner of that organization, then you may not have sufficient permission to install the Gatsby Cloud app to Github.
1. When you try to import your repository to Gatsby Cloud, an email is sent to the owner(s) of that organization to authorize Gatsby Cloud. Once they authorize via the link in that email, then you will be able to import your repository into Gatsby Cloud.
66 changes: 66 additions & 0 deletions docs/docs/how-to/cloud/create-site-from-template.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
---
title: "Create a Site from a Template"
description: "How to create a Gatsby Cloud site from a template"
littlemarcus marked this conversation as resolved.
Show resolved Hide resolved
---

## Introduction

This guide covers how to create a Gatsby Cloud site by cloning a Gatsby starter. Note, cloning of starters is only supported for Github. If you use GitLab or BitBucket, you'll have to follow the [Create a Site from a Repository](/docs/how-to/cloud/create-site-from-repository/) guide instead.

## Directions

### 1. Choose your starter template

From your Gatsby Cloud dashboard, click **"Add a Site"**.

![Button to add a site from the Gatsby Cloud dashboard](../../images/add-site.png)

On the right hand side, click on the card labeled "Gatsby Default Starter".

![Clone Gatsby Default Starter](../../images/default-starter.png)

### 2. Configure your repository

The first time you set up a Gatsby Cloud site, you will need to connect your Gatsby account to Github by clicking on the "Github" icon in the "Create a Git repository" card.

![Create a Git Repository](../../images/create-git-repo.png)

Next, a pop up window should appear and prompt you to install the Gatsby Cloud app to your Github personal account. Click **"Install"**.

![Gatsby Cloud app permissions](../../images/install-gatsby-cloud-app.png)

After the Github app is installed, you will return to Gatsby Cloud. Here you can select a different Github organization to host the repository under as well as change the name of the repository that will be created if you prefer. Then click **"Next"** to create the site.

![Configure Git repository settings](../../images/configure-repository.png)

### 3. Connect integrations

Next, you'll be prompted to connect any integrations. Here is where you can connect your Gatsby Cloud site to your CMS instance. For the purposes of this tutorial, you can select **"Skip this step"**.

![List of available integrations](../../images/connect-integrations.png)

### 4. Set-up summary

After the repository is created, you'll be given the option to configure any necessary environment variables. This step allows you to add both build and preview variables to your site.

![Section to add environment variables](../../images/setup-summary.png)

Next, click **"Create Site"** and you will be taken to the main tab of the Site Overview page for your new site.

![Site Overview screen](../../images/site-overview.png)

### 5. Finish

Once your site is done building, you can view the site in two places:

#### Private build URL

Use the build URL to preview the deployed site. This URL is not indexed and is only accessible via direct link.

![Private Build URL Link](../../images/private-build-link.png)

#### Public default domain

Use your Gatsby Hosting provided "default domain" to access the public deployment of your site. Gatsby Hosting is turned on by default and the "default domain" is listed under "Site Settings > Hosting".

![Default Domain URL link](../../images/default-domain-link.png)
68 changes: 68 additions & 0 deletions docs/docs/how-to/cloud/deploying-functions-on-gatsby-cloud.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
title: "Deploying Functions on Gatsby Cloud"
description: "Learn how to deploy Gatsby Serverless Functions on Gatsby Cloud"
---

## Introduction

The Gatsby framework now supports general access to serverless functions in local development as well as in Gatsby Cloud. These [express](https://expressjs.com/)-style functions allow Gatsby developers to build out secure, scalable APIs alongside their Gatsby projects.

### Prerequisites

Functions are a Gatsby core feature and are not specific to Gatsby Cloud. To learn more about how to implement functions in the Gatsby framework, check out the [Reference guide](/docs/reference/functions/).

### Routing in Gatsby Cloud

Functions that are included in a Gatsby project and deployed on Gatsby cloud are available at any build URL. This includes any preview URLs (`gstb.io` domain) or hosting URLs (`gatsbyjs.io` or your custom domain).

```javascript:title=src/api/hello-world.js
const sample = (req, res) => {
res.status(200).json({"message": "Hello, World!"})
};

export default sample;
```

### Environment variables

Functions will have access to any environment variables that you’ve added to either the production or preview environments in Gatsby Cloud.

![Gatsby Cloud environment variables settings](../../images/env_vars.png)

```javascript:title=src/api/hello-world.js
const sample = (req, res) => {
let key = process.env.SAMPLE_VAR;
//run code that uses key

res.status(200).json({ message: "Hello, World!" });
};

export default sample;
```

### Setting cache headers for functions

Users can set custom headers to control cache settings to ensure that function invocations are appropriately handled when served to [CDN](/docs/glossary/content-delivery-network/) users. Any cache-header setting that users add to their function will be passed through and respected on the CDN:

```javascript:title=src/api/hello-world.js
const sample = (req, res) => {
res.setHeader(`Cache-Control`, `public, max-age=60`);
res.status(200).json({ message: "Hello, World!" });
};

export default sample;
```

### Accessing logs for functions

You can access function logs by viewing the build details for the CMS Preview, Pull Request Build, or Production build. See the [Build Logs](/docs/reference/cloud/build-logs) article for more information on accessing build details.

![Gatsby Cloud Function Invocations Log](../../images/function-invocation-log.png)

### Tracking invocation counts

Like the bandwidth and request tracking in Gatsby Cloud, users can track their invocation count across all their Gatsby sites on any workspace landing page as well as site-specific usage on any site page.

Additionally, users can view function-specific invocation counts in the function logs of the build details for any build that implements that function. See the [Platform Limits](/docs/reference/cloud/platform-limits) article for information on function invocation limits.

![Invocations Count on the Gatsby Cloud dashboard](../../images/function-invocation-count.png)
65 changes: 65 additions & 0 deletions docs/docs/how-to/cloud/deploying-to-firebase.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
title: "Deploying to Firebase on Gatsby Cloud"
description: "Learn how to deploy your Gatsby Cloud site to Firebase"
---

## Introduction

Gatsby Cloud is a performant platform for building your Gatsby site. Even better, it integrates with Content Delivery Networks (CDNs) like [Firebase](https://firebase.google.com/) so you can build and deploy your site seamlessly.

## Prerequisites

This guide assumes you already:

- Have a Firebase account.
- Have a Gatsby Cloud site created.

You can use either of the following site creation options if you don't have one already:

- [Create a Site from a Template](/docs/how-to/cloud/create-site-from-template)
- [Create a Site from a Repository](/docs/how-to/cloud/create-site-from-repository)

## Setting up a hosting integration

Once your site is available inside Gatsby Cloud, navigate to the "Site Settings" tab.

Inside "Site Settings," select **"Hosting > Hosting integrations."** Here you'll see Firebase listed among the other available hosting providers.

![Select Firebase from hosting integrations](../../images/firebase-hosting.png)

Click **“Connect”** to the right of the Firebase logo, and you’ll be prompted to login into your Firebase account. If you don’t have one, you can create one now.

Once you’re authenticated with Firebase, you’ll be prompted to authorize Gatsby Cloud to interact with Firebase on your behalf. After you’ve completed this step, you’re ready to configure deployment in Gatsby Cloud.

### Connect with a Firebase project

If you don’t already have one, create a Firebase project in your [Firebase console](https://console.firebase.google.com/).

On the “Firebase Integration” screen choose a Firebase project for deployment from the dropdown. Note that you can enter a Firebase site name for projects with multiple sites.

### Configuration with Firebase

Firebase allows you to configure customized hosting behavior such as redirects, headers, cache settings, and which files to deploy. You can define these behaviors in a `firebase.json` file. See [Deploying to Firebase](/docs/how-to/previews-deploys-hosting/deploying-to-firebase/) for the Gatsby recommended caching settings.

In order for Gatsby Cloud to use these settings for your Firebase hosting, you’ll need to make sure that your `firebase.json` file ends up in your `/public` directory when your build is complete.

One way you can accomplish this is by adding the following code to your `gatsby-node.js` file:

```javascript:title=gatsby-node.js
const fs = require("fs");
exports.onPostBuild = () => {
fs.copyFile(`./firebase.json`, `./public/firebase.json`, (err) => {
if (err) {
throw err;
}
});
};
```

Please see the [Firebase Hosting Configuration](https://firebase.google.com/docs/hosting/full-config) documentation for more deployment customization options.

## Finishing Up

And that’s it! Your site is now set up to build and deploy. Gatsby Cloud will handle everything for you. However, if you want to make a change to your domain, you’ll want to do that directly on the Firebase dashboard.

Note that you can only have one hosting integration. If you choose to configure another provider, that will override your existing Firebase integration.
38 changes: 38 additions & 0 deletions docs/docs/how-to/cloud/deploying-to-gatsby-cloud-hosting.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
---
title: "Deploying to Gatsby Cloud Hosting"
description: "This tutorial will show you how to deploy your site to Gatsby Cloud hosting."
littlemarcus marked this conversation as resolved.
Show resolved Hide resolved
---

In this guide, you'll learn how to deploy your site to Gatsby Cloud Hosting.

## Prerequisites

This tutorial assumes you have already set up a Gatsby Cloud site.

## Enable Gatsby Hosting

In the Gatsby Cloud Site Hosting Settings, select **"Enable Deploys to Gatsby Cloud Hosting"**.

![steps to enable gatsby cloud hosting](../../images/enable-gatsby-cloud-hosting.png)

This will trigger a new Production Build for your site. When that Production Build completes, your site will be ready to view.

### Default domain

You will receive a "default domain" for your site base: `YOUR_SITE_PREFIX.gatsbyjs.io`. This domain has [HTTPS](https://developer.mozilla.org/en-US/docs/Glossary/https) on by default. Visit the `https://<default domain>` URL to see your hosted site.

![default domain in gatsby cloud hosting settings](../../images/hosting-domain-default.png)

### First deploy

Before your first Production Build after turning on Gatsby Hosting completes, you will see the following when you visit your default domain.

![First Deploy Waiting Screen](../../images/first-deploy-page.png)

### Changing your default domain

You can update your default domain by changing the Site Prefix of your Gatsby site in the "General" tab of your "Site Settings".

### Other resources

- See [Adding a Custom Domain](/docs/how-to/cloud/adding-a-custom-domain) for adding a custom domain to your Gatsby Cloud site.
39 changes: 39 additions & 0 deletions docs/docs/how-to/cloud/managing-workspace-members.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
title: "Managing Workspace Members"
description: "Manage the Members and roles in your Gatsby Cloud Workspace"
littlemarcus marked this conversation as resolved.
Show resolved Hide resolved
---

There are four possible roles a user can have on Gatsby Cloud:

1. "Owner" - The person who created the Workspace on Gatsby Cloud is the Owner. An Owner can edit the Workspace, manage billing, and invite/manage Members.
1. "Admin" - An admin can edit the Workspace, manage billing, and invite / manage Members.
1. "Editor" - An Editor can create, view, and modify sites. They cannot manage billing or other Members.
1. "Viewer" - A Viewer can only view sites. They cannot create or modify sites.

## Managing Members in a Workspace

Owners can use the Workspace’s “Members” tab to invite a Member to the Workspace, resend an invitation, cancel an invitation, or delete a Member from the Workspace.

![Gatsby Cloud Workspace Members tab](../../images/workspace-members-tab.png)

## Inviting new Members to your Workspace

To invite a new Member to a Workspace, click the **“Add Members”** button from the “Members” tab in a Workspace.

![Invite members button](../../images/invite-members.png)

Once opened, enter the email address of the person you’d like to invite to your Workspace. Then, choose their role in the Workspace and what sites they should have access to.

![Add members pop-out screen](../../images/add-members-pop-out.png)

Once you invite a new Member to a Workspace, they’ll receive an email with a link to log in or create an account to join the Workspace.

## Managing existing Members

At any time, the Owner or an Admin of a Workspace can manage the Members of a Workspace. There are three options:

1. **"Transfer Ownership"** - This will transfer Ownership of the Workspace to this Member. Once confirmed, the selected Member will become the new Owner and you will become an Editor.
1. **"Modify Member"** - This allows you to change the role or site access for the selected Member.
1. **"Remove Member"** - This will remove the Member from the Workspace. It will not delete their Gatsby Cloud account, but they will no longer be able to access this Workspace.

![Member management dropdown menu](../../images/manage-existing-members.png)
Loading