Host Your Project with Blazing Fast Gatsby Cloud Hosting

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩‍💻

You guys had a nice time at GatsbyConf? 😎

No big secret, but I completed my task 2 days ago to give my talk at GastbyConf🙌

For those of you who missed my talk, check out Gatsby's YouTube channel. 👉 https://www.youtube.com/gatsbyjs

It'll be up after this Thursday.

Oh, my talk title?

It's "Finding My Developer Happy Path with Gatsby x Contentful" 😎

"Finding My Developer Happy Path with Gatsby x Contentful" by Arisa Fukuzaki

How I had a chance to use Gatsby Cloud Hosting before my talk?

To be honest, I'm really terrible at hiding secrets.

And some of them might noticed "how the heck she got access to this brand new feature before we knew?!"

I'm not gonna talk about how I got the chance to be a speaker at GastbyConf 2021 here.
(Another story is coming right up💪)

But as part of the preparation for my talk, the great Gatsby team offered me to test out the brand new feature.

That was the first time I got access to Gatsby Cloud Hosting✨

What is this article about? & Who is this article for?

Anyone who wanna try out a brand new feature just released yesterday, Gatsby Cloud Hosting 🎉

Which environment I had before?

• Frontend & data query: Gatsby.js
• CMS: Contentful
• Hosting: Netlify

It was almost a renewal season for my domain in Netlify.

That's why it was nice timing for me to switch to try something new 👍

  "dependencies": {
    "@contentful/rich-text-react-renderer": "^13.2.0",
    "dotenv": "^8.0.0",
    "gatsby": "^2.12.1",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-gatsby-cloud": "0.0.5",
    "gatsby-plugin-google-analytics": "^2.0.20",
    "gatsby-plugin-react-helmet": "3.0.12",
    "gatsby-plugin-sass": "^2.0.11",
    "gatsby-plugin-sharp": "^2.4.0",
    "gatsby-remark-images": "3.0.10",
    "gatsby-remark-prismjs": "^3.2.9",
    "gatsby-remark-relative-images": "0.2.2",
    "gatsby-source-contentful": "^2.1.79",
    "gatsby-source-filesystem": "2.0.28",
    "gatsby-transformer-remark": "2.3.8",
    "gatsby-transformer-sharp": "^2.3.13",
    "node-sass": "^4.12.0",
    "prismjs": "^1.16.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "5.2.0",
    "sharp": "^0.24.0"
  },
  "devDependencies": {
    "env-cmd": "^9.0.1",
    "prettier": "^1.17.0"
  },
```



What?

Not updated to v3.0?

(I'm gonna do after this article, now shush!)

![gif](https://media.giphy.com/media/Y3lDoo7n5LKZMZj3Y9/giphy.gif)

# What are the steps to start?

There are 3 settings for Gatsby Cloud and for Gatsby Cloud Hosting.

## 1. Gatsby Cloud Setup

#### Step 1.
Make sure to install `gatsby-plugin-gatsby-cloud` before adding your site to Gatsby Hosting.



```shell
$ npm install --save gatsby-plugin-gatsby-cloud
```



#### Step 2.
Configure in gatsby-config.js based on Gatsby's documentation. 👉 [https://www.gatsbyjs.com/plugins/gatsby-plugin-gatsby-cloud/](https://www.gatsbyjs.com/plugins/gatsby-plugin-gatsby-cloud/)



```javascript
plugins: [
  {
    resolve: `gatsby-plugin-gatsby-cloud`,
    options: {
      // as your choice
    },
  },
]
```



#### Step 3.
Check automatic CMS integrarions

- Contentful 👈 That's my guy
- Cosmic
- Dato CMS
- Sanity.io

Other CMS also works without automatic integrations.

- Contentstack
- Drupal
- Strapi

> [Gatsby.js: CMS integrations](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud/#cms-integrations)

#### Step 4.
Sign-in to Gatsby Cloud
#### Step 5.
"Create new site" / "Add a site"

![step5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38eto2gd9eilvklgajuf.png)

#### Step 6.
"Import from a Git repository"

![Step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viywcvcatups2s12ogot.png)

#### Step 7.
Select a Git provider.

![Step 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fztkaeqoullpqlfj102u.png)

#### Step 8.
"Select destination"

![Step 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo7dpt86rm6l0s6gihra.png)

#### Step 9.
Install Gatsby Cloud.

![Step 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxoesareh3rm2xylb605.png)

![Step 9-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cctjudujhziex0046h9m.png)

#### Step 10
Select a GitHub organization & repository.

![Step 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj6sfzgkmujrj4msjsmm.png)

#### Step 11.
Set up a branch to connect, base directory, and a site name.

![Step 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yaqsi23ohr5ozzu681fo.png)

#### Step 12.
Choose CMS integrations.

![Step 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyhjiudzhf18qdtw6fww.png)

#### Step 13.
Authorize.
#### Step 14.
Sign in and authorize in Contentful.

![Step 14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juinrwcin6um34yayjlr.png)

#### Step 15.
"Set up your site"
#### Step 16.
Check environmental variables / fill out if necessary.
#### Step 17.
"Create your site"
#### Step 18.
Wait for a few minutes to complete deploying...🍵
#### Step 19.
DONE 🙌

![Step 19](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r28p77k6mbhfclzm6gf0.png)

#### Step 20.
Preview URL shows you updates without a rebuild 😎

## 2. Gatsby Cloud Hosting Setup

#### Step 1.
"Hosting" and "Turn on" to enable Gatsby Cloud Hosting.

![Step 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vi8320y9vrlhls7z9fxg.png)

#### Step 2.
Received a default domain. (HTTPS)

![Step 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35lfo8xfhph6ikrvkq05.png)

## 3. Custom Domain Setup

#### Step 1.
If you have a running DNS, make sure to transfer to these recommended 3rd party DNS managers. (CNAME)

- [Name.com](https://www.name.com/) 👈 Recommended by Neltlify to transfer from Netlify DNS
- Go Daddy
- Name Cheap
- Google Domains (some countries are not available, like Germany)

#### Step 2.
Netlify DNS to Name.com is to just follow what's written in Netlify.

a. Create Name.com account
b. ICANN(the organization manages DNS) needs verification of our contact information before transfer DNS.
c. "Settings" → "Default Account Contacts"
d. Make sure contact info is correct
e. "Update"
f. Confirm
g. Contact Netlify support with your Name.com account code
h. Done to transfer 🧳


#### Step 3.
Back to Gatsby Cloud dashboard, choose "Add domain"

![Step 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ccl6i9mkmge0x749vv8v.png)

#### Step 4.
Add apex domain like `test.com`

![Step 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwfdookom11bbmy4gj3p.png)

#### Step 5.
In Name.com, set up using Name.com default nameservers.
(You'll see a warning in Name.com anyway to set this up.)

> [Name.com: Using Name.com's nameserver](https://www.name.com/support/articles/205188648-Using-Name-coms-default-nameservers)

a. "MY DOMAINS"
b. Click your domain name
c. "Manage Nameservers"
d. "Default Nameservers"
e. "Save Changes"

![Step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruy5tlg2qr8h170l03kl.png)

#### Step 6.
Adding an A record in Name.com.

> [Name.com: Adding an A Record](https://www.name.com/support/articles/115004893508-Adding-an-A-record)

#### Step 7.
Add CNAME if you add a subdomain.
#### Step 8.
"Check Status"

![Step 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ai58prckljpvgnkdf7jl.png)

> 💡: Make sure to delete nameserver from Netlify and delete DNS and domain from Netlify.

#### Step 9.
Wait for being generated.

![Step 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d4mrtkm97dzbxjr0rm5.png)

#### Step 10.
All set 😎

![Step 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtqoofvjnncegcn93rue.png)

# Summary & Swag

I wasn't able to talk more about transferring hosting service due to the time limit I had in my talk.

But now you have 👍

Oh, and one more thing.

Gatsby gives you free swag packs if you host your projects in Gatsby Cloud Hosting!

> [Host your website on Gatsby Cloud and get free swag!](https://www.gatsbyjs.com/hosting-swag/)

I got my Dark Deploy Tee to wear with my purple swag hoodie 🌒

And when you're lost, Gatsby's documentation is always helpful!

> [Gatsby.js: Deploying to Gatsby Cloud]()https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud/

> [Gatsby.js: Deploying with Gatsby Cloud Hosting](https://support.gatsbyjs.com/hc/en-us/articles/360061641114-Deploying-with-Gatsby-Cloud-Hosting)

> [Gatsby.js: Adding a Custom Domain](https://support.gatsbyjs.com/hc/en-us/articles/360063469873)

Happy coding 🍵!