Gatsby Cloud

What is Gatsby Cloud?

Similar to Netlify, Gatsby Cloud is a deployment service that can be set up in minutes and you'll have a production build ready blazingly fast! As Gatsby Cloud was built by Gatsby, only Gatsby websites can be deployed through Gatsby Cloud. In other words, NextJS, Create React App, Vue, Angular, and other types of frameworks can't be built with Gatsby Cloud.

Push your project to Github

First things first, you need to make sure that your project is on Github, if you want to enable automatic deploys from a branch. If your project is already pushed to Github, skip this step. The easiest way to push a project to Github is with Github Desktop, as it requires no coding and no use of the Terminal. Head over to Github Desktop and download their desktop application. Follow the instructions in their documentation to connect your Github account with Github Desktop and creating your first repository.

Create a Gatsby account

Now that our project is pushed, we need to create an account, so head over to https://www.gatsbyjs.com/dashboard/signup/ to sign up to Gatsby Cloud, if you don't already have an account.

Connect to Github

Next, select your Git provider. Since I'm using Github, I'll select Authorize with Github . Follow the instructions on screen to authorize Gatsby Cloud to have access to your Github account.

Select a plan

Now, it's time to select a Builds plan and a Hosting plan. You can get a free trial for 14 days with their Standard or Performance plan, if you wish to test out their more advanced features, like incremental cloud builds, having more than one user, and unlimited builds.

For the purposes of this tutorial, we'll leave both Builds and Hosting plans to Standard , and test out their 14-day free trial. After two weeks, we'll automatically be downgraded to the Free plan. Once your choice is done, click on Select this plan. Then, you'll land on your Gatsby Cloud dashboard. We don't have any website yet, so let's click on the Add a Site purple button.

Add a site

Since we already pushed our project to Github, let's select Import from a Git repository and click on Next.

As you can see in the screenshot below, adding a new site to your workspace only take four easy steps. Let's start by selecting our Git provider, which is Github.

Next up it's the Repository . You'll need to select an organization, your repository, the base branch, the base directory as well as your site name. Then, click on Next . The base branch is the branch you want Gatsby Cloud to look after for automatic build deploys.

Your website will be created, and it might take a few minutes of waiting. After your website is created, you can add Integrations to your website. For example, if you have Contentful as your content management system, you can add it at this step. You just need to click on Connect , follow the steps on screen to connect your Contentful account to Gatsby Cloud, and you'll be good to go! If you're not ready to connect a CMS, you can also Skip this step.

Finally, we're at the last step! This is where we'll add all the environment variables of our project. For example, if you have a secret key for a specific API service, this is where you'll add it. Since my website doesn't require any, I'll just skip this step. You can always add new environment variables later on, from your Gatsby Cloud dashboard.

Once you're done, click on Create site.

Gatsby Cloud Dashboard

Once the site has been created, you'll land on your Dashboard. You can change your website name by clicking on Site Settings . This is also where you'll be able to add environment variables.

Under the Builds section of your Dashboard, you'll see your recently deployed build. If you click on Triggered by a change to hosting configuration , you'll see the build details.

You'll see the logs, errors and warning related to your build.

Lighthouse

A Lighthouse report is generated every time a build is completed. Still under the build details, you see a summary of the performance of your website. For example, my website has a 77 score for Performance, 75 for Accessibility, and 93 for Best Practices. I would need to update my website to get higher scores, for sure! Let's click on View full Lighthouse report . We'll take a deeper look at that report.

You'll see a new tab open, which is your detailed Lighthouse Report. It's the same kind of report you'll get if you run Lighthouse on your website with the Performance tab in Google Chrome. You can explore it deeper to check each warning and recommendations by Lighthouse, and improve your website accordingly.

Conclusion

In conclusion, Gatsby Cloud is pretty similar to Netlify, as you can link your Github repository and trigger automatic deploys when there's a change in your base branch. However, Gatsby Cloud is only available for Gatsby websites. A pro point is that a Lighthouse report is generated for every build, meaning that we can easily catch any performance bottlenecks early on.