How to host a website on Github for free with a custom domain?

Introduction:

Suppose you want your website to be visible on the internet to everyone 24/7. You must store the HTML, CSS, and Javascript files on the internet. That means the hard disk in which your website files are stored must be connected to the internet and publicly accessible to everyone. To know more about web hosting read the article What is website hosting?

But to upload your files to web hosting services like Godaddy, Namecheap..etc, you need to pay certain charges. There is also a way to host your files for free if you know how to use GitHub. To know more about GitHub read the article What is Github? In this blog, we will walk you through the step-by-step process of hosting your website publicly for free using GitHub.

Flow Diagram:

Prerequisites:

• The domain name ( How to buy a domain name? )

• GitHub account ( How to create a GitHub account? )

• HTML files

Steps:

Step 1: Sign up / log in to GitHub

In case you don’t have a GitHub account follow this article (How to create a GitHub account ?) to create one and log in.

If you already have a GitHub account, please log in to GitHub (https://github.com/login).

Step 2: Create a repo

Create a public repository with a README file as shown in the following screenshot.

Step 3: Upload your files to the newly created repo

Before uploading the files to GitHub, please verify all the links of CSS, Images and JS files in your code. To know more about relative links click here. If everything is okay, please upload the files to the repo either via browser or using GitHub CLI commands.

Step 4: Add an index.html page

GitHub doesn't know which is the home page of your website, so we need to rename the homepage HTML file as index.html. Such that when users hit www.yoursite.com GitHub redirects to index.html automatically.

Step 5: Change repo settings

In order to make your website publicly visible to everyone on the internet, we need to enable a feature called GitHub pages. Try to enable the same as shown in the below screenshot.

Settings → Pages → Branch → main → Save

Step 6: Check website visibility

After updating GitHub settings as per the instructions in Step 5, you will get a public link for the respective repo.

Copy the public link and check that your website is accessible using a browser.

Step 7: Configure custom domain

The public link obtained from GitHub from Step 6 is a subdomain, in order to replace it with your domain (How to buy a custom domain? ) we need to add a CNAME record to the domain provider’s DNS Settings . To know more about DNS please check What is DNS?

In this blog, I am gonna use GoDaddy as a domain provider.

• Open GoDaddy Website and navigate to the Manage My Products section.

• Under domains tab → Select the respective domain → Manage DNS

• Identify ( A record and CNAME record ) which are created by GoDaddy and delete those records. The following screenshot shows the A and CNAME records created by GoDaddy, therefore I am gonna delete them by clicking Bin Icon.

• Retrieve your GitHub username from your GitHub account, as shown in the below image.

• Add a CNAME record, similar to the image given below.

• Add an A record, as shown in the below screenshot.

• As shown in the below screenshot, update your domain name in the custom domain section of your GitHub settings page. After saving the custom domain it might take up to 5 minutes to sync up with the DNS server (for example: GoDaddy Server).

Step 8: Enable SSL Certificate to the website

• Once the DNS settings are synced with the GitHub pages. You will get a DNS Check successful notification from GitHub.

• To enable an SSL certificate to the website, click on the Enforce HTTPS checkbox as shown in the above screenshot.

Result:

After finishing all the above-mentioned steps, please go to the web browser, enter your domain, and try to access it. An example output screenshot is given below.