How to set up Github Pages with a custom domain? (with HTTPS)

Photo by Austin Chan on Unsplash

If you are wondering how to set up a custom domain with Github Pages then you my friend are in the right place. Github Pages is a wonderful resource that allows you to host a static website for free. When you host a website with Github Pages they give you an address on their domain. For example, my Github username is Frod25, which would make my website address “frod25.github.io”.

So what about setting up your own custom domain? Well after careful research I found that it’s not as hard as it seems to set up but can be a bit tricky. If you already have a domain name you would like to use then you are ready to begin. If not, then head over to your favorite domain name registrar and purchase one before we you get started.

Now.. let’s get into the nitty gritty..

First thing we need to do is to set up a Github repository where you will be hosting the files for your static website. In order to do this you need to go to Github.com and login. Once logged in, click on “Repositories”, at the top, and then click “New”. Then enter a name for the repo, which can be anything you’d like. Also make sure the option for making it public is selected and to include a README for good measure. Then click on “Create Repository”.

Click “New” to create a repository.

Next step is to go ahead and clone this repository to your local machine so you can begin to add files and work on the website. If you need help on cloning a repo to your local machine you can find instructions here.

Now that we have our repo created and cloned to our local machine you can go ahead and change into the directory of the repo you just cloned. In the root directory create an index.html file. (there must be an index.html file in the root directory in order to host a website on Github pages). Next you need to create a file named “CNAME” and in this file should be just one line for your domain name (either “www.yourdomain.com”, “yourdomain.com”, or “blog.yourdomain.com”). Below you can see the commands used to create these files.

Clone repo and create basic file structure.

If you need some clarification on some of the commands I used in the image above check out this link here which gives you an explanation of these commands and many more.

So far we have created a new repo, cloned it to our machine, and set up our basic file structure. Now is the time to create the rest of the structure for your website, for example, your stylesheets, Javascript files, and any other assets you may need. The structure and the names of the files for your website is completely up to you so long as the index.html and CNAME file are in the root directory. Here is a link to more information on how to setup a basic website file structure.

Once you have all your files set up and complete go ahead git add your changes, commit the changes, and push your changes up to your online Github repository.

Git commands to commit files to online repo.

Next, go to your online repo and click on the settings tab, then scroll down to the Github Pages section of the page. Under source you will see a dropdown that says “none”, you want to click on the dropdown and select the main branch. Leave the next dropdown as “/root”. Then click save.

After clicking settings scroll down to Github Pages Section.

Select main branch.

Save changes to make the main branch the source for Github Pages.

Once saved you will see another option appear for a custom domain. This is where you enter “yourdomainhere.com” or “www.yourdomainhere.com”. It should match what you entered in the “CNAME” file we created earlier. Then click save. You also have the option to enable HTTPS by checking the box as pictured below.

Domain setup

At this point we have come a long way and now your and final step is to go over to your domain name providers website and create an “A” record and a “CNAME” record in the settings for your domain. The steps on how to create these records differ from provider to provider. I registered a domain with Namecheap.com so I will use them as an example.

First you want to access the advanced DNS settings on your providers website so we can enter our own custom DNS records. For Namecheap.com you need to click on your “Domain List” and then click on the “Manage” button next to your domain. From there you can select “Advanced DNS”. You want to access the advanced DNS settings on your providers website so we can enter our own custom DNS records.

Manage your domain settings

Select the advance DNS settings.

At this point you want to create a few different records. First the “CNAME” record type with the host set as “www” and the value set to “username.github.io”. Be sure to change “username” to match your actual Github.com username — i.e. my username is “frod25” so the value would be “frod25.github.io”. Next step is to create an “A” record type with the host set as “@” and the value set to the Github DNS server address which at this time is “185.199.108.153”. You then want to create additional “A” records pointing to the rest of the Github DNS addresses (i.e. 185.199.109.153, 185.199.110.153, 185.199.111.153). This is for redundancy in case one of the DNS servers is not responding.

Also note, depending on your DNS provider it may take a few minutes for the records to update and propagate through the internet.

Check out the image below so get a picture of how it should look on your end.

Now that we completed the final steps give yourself a pat on the back because…

Photo by Brett Garwood on Unsplash

You now have a static website hosted on Github Pages with a custom domain. In my opinion it’s a bit tricky but overall not that hard to do. What do you think?