In this post I’m gonna show you how to deploy your Gatsby app to Github pages, publishing on Google Domains and have HTTPS.
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:
Mine, looks like this:
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 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:
Should look like this
And the other one, needs to be:
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
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 ❤️