DEV Community

loading...
Cover image for Host Your Project with Blazing Fast Gatsby Cloud Hosting

Host Your Project with Blazing Fast Gatsby Cloud Hosting

arisa_dev profile image arisa_dev ・6 min read

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"
  },
Enter fullscreen mode Exit fullscreen mode

What?

Not updated to v3.0?

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

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.

$ npm install --save gatsby-plugin-gatsby-cloud
Enter fullscreen mode Exit fullscreen mode

Step 2.

Configure in gatsby-config.js based on Gatsby's documentation. 👉 https://www.gatsbyjs.com/plugins/gatsby-plugin-gatsby-cloud/

plugins: [
  {
    resolve: `gatsby-plugin-gatsby-cloud`,
    options: {
      // as your choice
    },
  },
]
Enter fullscreen mode Exit fullscreen mode

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

Step 4.

Sign-in to Gatsby Cloud

Step 5.

"Create new site" / "Add a site"

step5

Step 6.

"Import from a Git repository"

Step 6

Step 7.

Select a Git provider.

Step 7

Step 8.

"Select destination"

Step 8

Step 9.

Install Gatsby Cloud.

Step 9

Step 9-2

Step 10

Select a GitHub organization & repository.

Step 10

Step 11.

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

Step 11

Step 12.

Choose CMS integrations.

Step 12

Step 13.

Authorize.

Step 14.

Sign in and authorize in Contentful.

Step 14

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

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

Step 2.

Received a default domain. (HTTPS)

Step 2

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 👈 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

Step 4.

Add apex domain like test.com

Step 4

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

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

Step 5

Step 6.

Adding an A record in Name.com.

Name.com: Adding an A Record

Step 7.

Add CNAME if you add a subdomain.

Step 8.

"Check Status"

Step 7

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

Step 9.

Wait for being generated.

Step 9

Step 10.

All set 😎

Step 10

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!

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 Cloudhttps://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/deploying-to-gatsby-cloud/

Gatsby.js: Deploying with Gatsby Cloud Hosting

Gatsby.js: Adding a Custom Domain

Happy coding 🍵!

Discussion (0)

pic
Editor guide