Create a stunning portfolio website with your own website name from scratch within 1 hour
Hey Guys! Check out my website at www.gourav-dhar.com
At the end of this blog you will have a hosted website similar to mine. So let’s start. Breaking down the entire process into pieces we will need:
A working website
Get a custom Domain Name (Optional, required only if you want to host it using your website name)
A server to host our website
A working website
You will need to have a project for your website. It can be a simple static website using html/css or a reactive website using react/angular etc.
If you are not a web developer and don’t understand whatever is written above or you don’t want to go through the lengthy process of designing and developing your website, it’s fine. You can download a template of the website from the link below and edit it with your details.
The template website : https://startbootstrap.com/theme/creative
This website has a lot of free and paid designs which you can browse through and download. https://startbootstrap.com/themes/portfolio-resume
Download the website, unzip it. Make your changes in the index.html file. Open the index.html file and it should open the website in your browser.
Get a Custom Domain Name
This is an optional step. If you want the website to be hosted under your desired website name you need to do it. The process is simple,
go to any “Domain Registrar” website -> create an account
search for the availability for the website you are looking for
purchase from the available list of options
I purchased my domain name from GoDaddy. The UI looks something like this.
It will list the price and per-year charges. The price of certain domains are way higher because GoDaddy categorises it as premium by some of it’s internal metrics. I purchased gourav-dhar.com and had to pay around Rs.3000/- for two years.
A server to host our website
There are free and paid services available for this. Github allows us to host pages using custom domain name and it is free, so I decided to go with github. Assuming your page won’t have a lot of traffic, it is safe to use github’s server. The limits mentioned by github(as of today) are:
Published GitHub Pages sites may be no larger than 1 GB.
GitHub Pages sites have a soft bandwidth limit of 100GB per month.
GitHub Pages sites have a soft limit of 10 builds per hour.
As a first step, create an account in Github.
After logging in click on the top right on your profile icon — > “Your Repositories”
In the page, click on New and you should see something like this
Enter ‘Repository name’ in the following format {github-username}.github.io and click on Create Repository
After this you Repository will open where you need to uplaod your project files from the first step.
Wait for 2–3 minutes and Voila! Your website is live on https://{github-username}.github.io
Adding Custom Domain in github pages
Goto your repository and open the Settings tab. Click on the Pages button on the left pane. A page similar to this should be visible
Enter your domain name or sub-domain name(whatever you prefer) under the custom domain. And click on save. Github will verify it with the ISP.
For the verification to be successful we will need to add an entry to map the github.io page with our domain/sub-domain in the `DNS Management` settings of our domain. To do this open GoDaddy(or any other platform where you might have purchased your domain). Click on My Products → Domain →DNS Management
Click on `Add`, fill in the details as shown. You can either use CNAME or A as record type. Enter the value as your github.io link and add record. This entire process takes around 1 minute to take effect, but in worst case it can also take about a day or two.
And here you go. Your website has been published.
References
