How to Host your Static Website on GitHub Using your Custom Domain Name

Recently, I created my static portfolio website. At first, I was conflicted on where to host it regardless of Github providing the generic option of hosting it using the github.io option. After purchasing the domain name, I wanted a hosting provider that was not expensive or complicated. During my research, I stumbled upon hosting your static website using Github, but now with a domain name.

Where to start?

First, you need to push your code to Github using the git process. Second, you need to publish the gh-pages. Afterwards, you will need to follow specific steps and they are as easy as ABCD.

1. Go to your working repository, and click on the settings. You will see a page similar to the one shown below and click on pages.

2. Below is how your pages will look like. Remember this is enabled by the gh-pages. Your site will have been published at github.io, the default domain. Therefore, you will add your custom domain in the under the custom domain option. However, you will notice the HTTPS will not be enforced.

3. Head to your Domain provider and add the CNAME record. The CNAME record redirects the github.io to your custom domain. For instance, if your want your site name to be www.example.com, create a CNAME record that points www.example.com to <user>.github.io.

4. To enforce the HTTPS, select Enforce HTTPS. It can take up to 24 hours before this option is available.

5. Once that is set, redirect your website to point to the Github IP Addresses. Therefore for this, add the Alias as shown below through feeding the following IP address.

To create A records, point your apex domain to the IP addresses for GitHub Pages

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153.

6. To confirm whether your DNS record configured correctly, use the dig command, replacing EXAMPLE.COM with your apex domain. Confirm that the results match the IP addresses for GitHub Pages above.

For A records
$ dig EXAMPLE.COM +noall +answer -t A
> EXAMPLE.COM     3600    IN A     185.199.108.153
> EXAMPLE.COM     3600    IN A     185.199.109.153
> EXAMPLE.COM     3600    IN A     185.199.110.153
> EXAMPLE.COM     3600    IN A     185.199.111.153.

7. In the end, your pages setting in Github will be looking as such:

8. And you can launch your website having hosted on Github for free.

The hosting is absolutely free and the process takes less than 10 minutes while following the right instructions. All the best.

PS: This article was first published on Linkedin