Free Static Website Hosting on Github with Custom Domain

Overview

Free website hosting on Github: Tutorial

This tutorial covers free website hosting on GitHub. The free service comes with a limitation: GitHub can only host static websites built with HTML, CSS, and JavaScript; it does not support server-side processing or database management with MySQL.

Github logo

The free web hosting service can be used for personal blogs, portfolios, documentation, and simple project sites with static content. Hosting a website on Github involves following steps: 1) sign up to create an account on github.com, 2) create a public repository, 3) add website files in the repository. Additionally, one can use a custom domain for their website on Github, i.e., use a personalized domain name instead of the default Github URL.

Prerequisite

Mandatory: Website design using HTML, CSS and Javascript.

Flexible: Simple Github operations such as clone, add, commit, and push, if you have a website ready for deployment.

Github

Sign up with a desired username on Github website

To get started, sign up for a new account on Github or sign in to your existing account. Your website domain address would be "username.github.io", so choose your username appropriately. Create a public repository on GitHub, naming it as "username.github.io".

Add static website files containing index.html in the respository "username.github.io"

Add your static website files, built with HTML, CSS, and JavaScript, either by uploading them directly through GitHub's interface or by pushing them via Git. The website is live and accessible at a username.github.io within a few minutes.

Custom domain

Using a custom domain on GitHub Pages allows you to replace username.github.io with a personalized domain name.

Purchase a domain name from a domain registrar

The first step is to acquire a personalized domain name from a domain registrar (e.g., GoDaddy, Bigrock, Namecheap, etc). In this tutorial, I will use the domain name anuragg.in purchased on Bigrock.

Configure DNS settings

Log in to Bigrock website and access the DNS settings for your domain. Create four different A or ANAME records pointing to the Github IP addresses 185.199.108.153 , 185.199.109.153 , 185.199.110.153 , and 185.199.111.153 , respectively.

Managing DNS: A Records
Managing DNS: A Records

Also, create a CNAME DNS record with www.anuragg.in pointing to username.github.io .

Managing DNS: CNAME Records
Managing DNS: CNAME Records

Configure Github

Create a CNAME file in the Github repository. In the file, write the personalized domain name anuragg.in . Once DNS propogation completes, your website will be accessible via your custom domain. It can take up to 48 hours for DNS propogation. To complete the setup of the repository for custom domain, go to Settings → Code and automation tab → Pages and enter your personalized domain (anuragg.in) under the Custom domain section.

Configure custom domain name on Github
Configure custom domain name on Github

Author

Anurag Gupta is an M.S. graduate in Electrical and Computer Engineering from Cornell University. He also holds an M.Tech degree in Systems and Control Engineering and a B.Tech degree in Electrical Engineering from the Indian Institute of Technology, Bombay.