DEV Community

Cover image for Host Your Project with Blazing Fast Gatsby Cloud Hosting
Arisa Fukuzaki
Arisa Fukuzaki

Posted on

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๐Ÿ™Œ

gif

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?

gif

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.

gif

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 ๐Ÿต!
Enter fullscreen mode Exit fullscreen mode

Oldest comments (1)

Collapse
 
victorrims68524 profile image
Rimsha Victor Gill

Just unlocked the power of Gatsby Cloud Hosting thanks to Arisa's guide! ๐ŸŒŸ Seamless setup, custom domains, and free swag โ€“ this is a game-changer! Kudos, Arisa!