Google Domains + Gatsby + Github Pages + HTTPS

In this post I’m gonna show you how to deploy your Gatsby app to Github pages, publishing on Google Domains and have HTTPS.

source: https://www.businessinsider.com

Buying the domain

First of all we need to buy our domain at https://domains.google

After that you will have a screen like this with all your domains. In my case I have edernegrete.com

Creating the repo

To add a new Github repo you can go to https://github.com/new

After that we need to set a repo name, in order to have it on the gh-pages, the repo name needs to be like this <SITENAME>.github.io, in my case is like this

Click on ‘Create Repository’

Now create a branch named ‘develop’ (name doesn’t matter)

But in the develop branch is where our code will live, in the master branch will live our ‘builded’ app.

Hosting Gatsby on Github Pages

Now we need to have our Gatsby page, if you don’t have it already, you can follow these simple steps from the Gatsby documentation to have a ‘Hello World’ app. https://www.gatsbyjs.org/docs/quick-start

After we have our app, we need to install the gh-pages dependency, this dependency will make the deploy easier.

To install it, we just run

npm install gh-pages --save-dev

After the installation we need to add a new script, that will make the deploy for us.

We need to add a CNAME file in the static folder.

cd static && touch CNAME

After that we need to add content to the CNAME file, the content should look like this:

<your-domain>
www.<your-domain>

Mine, looks like this:

edernegrete.com
www.edernegrete.com

Go to the package.json file, and in the scripts section add:

"deploy": ”gatsby build && gh-pages -d public --branch master

Now we need to publish our code in the github repo

In our empty repo is our ssh or https key to connect. So copy that and in our command line (inside the project folder) run this:

git init

git add .

git commit -am 'first commit'

git remote add origin <SSH or HTTPS>

git push origin develop

After that we will see our code in the master branch. Yei!

Now, we need to publish our page, just run

npm run deploy

This will build and deploy our app to the master branch

Configuring our custom domain on github

To do this, we need to go to the repo settings

Scroll down until you see the ‘Github Pages section’

There, you need to add the custom domain that you want (the one that we bought on google domains), in my case is edernegrete.com and click save

Configuring Google Domains DNS

Now we need to configure our DNS in Google Domains to show the page that we created on github.

Go to domains.google.com and click manage in the domain you want to register

After that, click on DNS in the menu

Scroll down to Custom resource records

There we need to add a couple of configurations.

The first one with the ‘@’ name with this IPv4 addresses:

185.199.111.153
185.199.110.153
185.199.109.153
185.199.108.153

Should look like this

And the other one, needs to be:

name: www

type: CNAME

data: <our-repo>.github.io

Should look like this:

Now we have our site live!.

As you can see in the url bar, we’re ‘not secure’. Let’s add the HTTPS to solve this

Adding HTTPS to our site

For this I like to use Cloudfare, the first step is to create an account or login https://www.cloudflare.com

We need to add our site here, in my case edernegrete.com

Follow the instructions until you see the Cloudflare name servers. It should be two ‘links’, save them

Let’s go back to our domain’s DNS in Google Domains

The first section is Name servers, click on ‘Use custom servers’

Then click edit, and add Cloudfare name servers in the inputs

Click save.

Enabling HTTPS on Cloudflare

Go back to Cloudflare, and click in your website

After that, click in the “Crypto” option in the menu

Search for “Always use HTTPS” option and enable it

Now search for the “HTTPS Rewrites” option and enable it

And that’s it!

I’d love to hear from you, you can reach me out in Twitter at @edernegrete ❤️