"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 🍵!