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.
The domain name ( How to buy a domain name? )
GitHub account ( How to create a GitHub account? )
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).
Create a public repository with a README file as shown in the following screenshot.
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.
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.
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
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.
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.
Note:* It is mandatory to add a ( . ) symbol at the end of your GitHub subdomain (for example dhanashekaran.github.io.)
Add an A record, as shown in the below screenshot.
Value: 126.96.36.199 (GitHub page server IP address)
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).
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.
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.