Let’s look at how you can host your website for free and connect a domain name (premium) to that for free. Before proceeding further, make sure that you have a website ready to host since it will be helpful to try it out along the way. You will be needing at least an index.html file, which can be hosted.
The article can be divided into two parts. The first part will convey to you how you can host your website and the second part will help you to add a premium domain name to that hosted website.
Hosting the Website
Though there are a lot of free hosting platforms like 000Webhost, Firebase, etc, we will be using GitHub to host the website. Hosting a website on GitHub will also allow us to make our website available via the GitHub pages option. You can follow this GFG article for hosting your website or continue with this article.
At first, you have to create an account on GitHub, if you don’t have one till now. After creating an account or signing in to your existing account, you have to create a new repository by clicking on the “+” icon on the right side top section.
In that, you have to give the repository name as username.github.io; where you have to add your username at that place. For example, if your username is sultan, you can provide, sultan.github.io. You have to make your repository public to host the website. After that, create the repository by clicking on the green button present below.
Now you have to add your website files (or at least the index.html file). This can be done by selecting the Add Files option present below your repository name section. After uploading the files, you can commit it to the branch. Make sure that, you have your landing page, named index.html. After that, you can go to the Settings section and navigate towards the bottom.
You will find that your website will be accessible at the URL similar to username.github.io. Make sure that, it’s properly working, if not, please go through the steps again and check whether you went wrong.
Registering Premium Domain
In this second part, let’s register a premium domain. We will be using Microsoft Azure for this tutorial. If you’re a professional, you can get access to the free tier + $200 credits by registering on to the Azure platform and verifying your account. If you’re a student, you can access the Azure for Students offer, where you will get $100 credit when you create your free account. You may have to verify that you’re a student and it’s an easy step.
Also, please check whether your organization offers you any Visual Studio Subscription. If so, you will also have access to an additional $150 worth of credits per month. You may also check the Visual Studio Benefits page to check whether you can avail of free credits for Microsoft Azure and some other services. After doing any one of these, there should be at least $20 credit remaining on your account (after trying out the services, if interested) to move forward.
Now you have to navigate to Azure Portal. From there, you will be able to see a search bar. You have to search for App Service Domains from that. You may also see that before searching. Select that and you will be taken to another page where you can add new domains. If you already have any domain (or in a later phase), it will be listed over here.
Now you have to click on the “+ Add” button. You will now have the opportunity to search for the domain of your choice. You have to type in your domain along with the extension to check whether it’s available to find similar domain names (eg: sulatnisatechgeek.com).
You will be having access to all the premium domains unless it’s already in use or it’s a premium domain. In that case, the domain won’t be listed. From the available list with respect to your choice, you can select the domain name to move forward with.
In the Subscription section, you can select your subscription, whether it’s Azure for Students or Visual Studio Subscription, etc. Under the Resource Group section, click on Create new. Provide a name that resonated with your project (cannot be used again as another resource group name). After that, click on Ok.
Under the contact information, you have to fill in your details. Make sure that, all the required details are filled and then click on Ok. Similarly, you can opt for Privacy protection (not available for domain extensions like .in, etc). Finally, you have to accept the Legal Terms.
After filling in all the details, you can click on Create. Your App Service Domain will be created in a minute or so. (By the way, the cost for the domain will be around $11.99 and will be charged from the credits section and you don’t have to worry about that).
After it’s created, you can click on Go to Resources or navigate to your App Service Domain from the listing. If you want to delete it or cancel the purchase, you can click on Cancel the Purchase button which will be available on for a short time. Now we have to add certain DNS Records.
Click on Manage DNS Records. You don’t have to worry about anything that is present inside it. Click on ” + Record Set “. Towards the bottom, you have to add the following IP Addresses :
This to point your domain name to the servers of GitHub where our website is currently hosted. You can change this later if you’re changing your website hosting platform, by adding their IP Address. You don’t have to make any other change and, now you can click on OK.
You have to click on “+ Record Set ” again. Now, you have to change the Type from A to CNAME from the listing. In the Name section, you have to add the subdomain, if required. It can be something like, www or anything which you like. If you’re going with www, your website can also be accessed at “www.domain_name.domain_extension”. If you’re going with a subdomain like ‘developer‘, your website can be accessed at “developer.domain_name.domain_extension”.
After adding the subdomain, you have to add the Alias, which is the link at which your hosted website can be currently accessed. Since we’re using GitHub pages, your website will be accessible at “username.github.io”. You have to add that in the Alias section and end it with a dot (.). Therefore, the alias should be something like ” username.github.io. “. After that, you can click on OK. Now, all the works on Azure are over.
Connecting Domain Name to GitHub
Now, you have to come back to your GitHub repository. Go to the setting section and then towards the GitHub pages section (which you checked earlier). If check towards the bottom of that, you will have an option to add a custom domain. You can add your naked domain name (without the subdomain or the protocol) in that space. If the domain was “sultanistechgeek.com”, you can add that over there, as such, and then click Save.
Now you have to wait nearly 10-20 seconds and certain checks will be done. After that, you can reload the page and navigate to the same section. You will have an option to enforce HTTPS, enabling which will keep our website accessible as well as safe. After enabling that, wait for around 1 minute to 24 hours for your website to be reachable. Usually, it can be accessed instantaneously, without any delay.
And yes, you have successfully :
- Hosted a website using GitHub
- Registered a Premium Domain
- Added the DNS Records
- Connected the domain to the website.
Now, when you check the Repository files on GitHub, you will find a file named as CNAME. Never edit/delete that file unless required. Now everything is ready and you can start sharing the domain with everyone. A few of the shortcomings of this approach are given below…
- You need to have the minimum credit (around $12) per year for the purchase to get renewed yearly, or you can cancel that automatic renewal from Azure Portal.
- The website files will be open-sourced and anyone will be able to check out the code or the files that you have written.
If you want to host your website on other platforms, you can move forward with it. The only change will be the IP Address (corresponding to that platform) and the Alias, which will be based on the hosting platform. All other steps will be remaining the same.