Free Website Hosting ! with GitHub Pages
(link your custom ‘GoDaddy’ domain)
So i got stuck ,despite of having prior experience , took me some time to wrap my head around the whole mechanics of hosting a site with GitHub-pages . It is basically a 6 step process that on surface looks overwhelming due to all the jargon terms and lack of useful abstraction . So empathetically this guide came to be a thing .
This guide will take you from the very start even if you have no experience with Git/GitHub you are good to go .
I have sliced the guide into following topics :
1 . Make a GitHub Account
2 . Create a New Repository
3 . Add your project files to the Repository
4 . Setup the Github Page for your Repository
5 . Domain side setup on GoDaddy.com
6 . Link the Domain with your Repository
Click below and you can view the Mind-Map below.
1 . Make a GitHub Account
This step is must and you have to keep your credentials safe as well , for future use .
To create a GitHub Account go to link below :
Click on the SignUp , you will be welcomed
add your E-mail in tiny window , and press ‘Continue’.
add a New Password
Now pick a Username for you GitHub . Press Continue to proceed .
Press ‘Create Account’
Check the E-mail’s inbox that you entered and enter the code that GitHub will have sent you .
Yayyy 🚀🚀🚀!!!
You have successfully created your GitHub account.
2 . Create a New Repository
Before we create our first repository , you should know this jargon term
means as you will be using this term quite extensively , in this guide and in future as well . Although the Repository that we will be using here will actually be a copy of Local-Git Repository . Git is a VCS(Version Control System) tool .
Repositories in GIT contain a collection of files of various different versions of a Project. These files are imported from the repository into the local server of the user for further updations and modifications in the content of the file. A VCS or the Version Control System is used to create these versions and store them in a specific place termed a repository. The process of copying the content from an existing Git Repository with the help of various Git Tools is termed cloning. Once the cloning process is done, the user gets the complete repository on his local machine. Git by default assumes the work to be done on the repository is as a user, once the cloning is done. Users can also create a new repository or delete an existing repository. To delete a repository, the simpler way is to just delete the folder containing the repository. Repositories can be divided into two types based on the usage on a server. These are:
Bare Repositories: These repositories are used to share the changes that are done by different developers. A user is not allowed to modify this repository or create a new version for this repository based on the modifications done.
Non-bare Repositories: Non-bare repositories are user-friendly and hence allow the user to create new modifications of files and also create new versions for the repositories. The cloning process by default creates a non-bare repository if any parameter is not specified during the clone operation.
To create a Repository in GitHub , look at the top right corner and you will find a set of 3 icons .
Press the ‘+’ icon and this drop-down menu will appear .
Click on the ‘New Repository’
This new page will open , dont get scared by the looks of it .
Ive got you covered . Just follow along .
Focus on this Section , youll see the ‘Repository name’ . You can pick any name if this your first repository .
Be Creative and enter the name of your repository
You can add a ‘Description’ for your new Repository as well .
Now the next step is important . You will see these two icons . The private one means that the code of your site will remain private to you .
But for our use-case you have to make the repository ‘Public’.
Ignore the rest of the option if you are not aware of them .
and scroll down , you will see this green button ‘Create Repository’
click on this button .
Yayyy 🚀🚀🚀!!!
You have successfully created your GitHub Repository , Congratulations 🥳🥳🥳.
3 . Add your project files to the Repository
This step might look like a Hacking scene from a movie but it is really simple and has only a few small steps .
Lets start and get your site up and running .
You can do this in one of two ways , either by using these two :
. Git terminal
. GitHub Desktop Application
As this guide is centered towards the beginners we will be using the GitHub Destop Application.
To download the application go to the link below .
Click on the Download button .
Install the application and open the app .
Login using the browser and Authorize Desktop , application
Now open the app and use the shortcut ‘Ctrl+Shift+o’ or use this option .
you will see this pop-up , from here select the repository
Use the ‘choose’ option to select where on your computer you want to clone this repository (it will be cloned as a folder with .git folder)
now copy and place your website files in this folder . after copying you will see that inside the ‘GitHub Desktop Application’ you will see this .
press the ‘commit to main’ this will create a commit that is basically like a checkpoint to which you can come back to this state of the files after making any changes to the files in the future .
Click ‘Publish branch’
now you files gets uploaded to the Github servers .
now if you go to your repositories
you will find Ui that looks like this
Inside the repository you will have a top bar with option and below will be files that you have added to this repository .
Congratulations 🥳🥳🥳 , your files have reached to the servers now we are half-way there already .
4 . Setup the Github Page for your Repository
Now if you dont have a domain you can just do this step and youll be good to go .
Inside your GitHub repository , click on the settings
This page will load and you have to navigate to the ‘Pages’ option .
on this page youll see several option but next to the save button youll see the none button .
click the none button and select the main
Click save and then you
After a while refresh your page and you will see this on the top , click next your site or app will load in the browser .
Woohooo 🚀🚀🚀🚀 your site is live .
you can stick with this url if you dont have a domain .
5 . Domain side setup on GoDaddy.com
If you have already have a domain you can skip the next few sub-steps
Go to this URL and create an account
search and buy the domain that you want .
After buying your domain , navigate to account options and click on ‘my products’
Under my products you will find all your domains enlisted .
Expand the options and you will see these option . Select the Manage DNS
Your DNS management dashboard will look something like this , although there might be some minor changes in the Ui . From here we have to add the ‘ip addresses’ of GitHub so our site will get hosted on our domain.
To do this click on the ‘ADD’ Button . Here we have to do some selections .
as we are setting this up for an APEX domain we have to select ‘A’ .
To select the APEX domain option you have to click and expand this option .
From this option , select ‘A’
Further in do these two steps :
in Name type ‘@’
in TTL select 1Hour , or any other according to your usecase
Now you have to add the following four ip-addresses .
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153you can find these ip-adresses on GitHub from this link .
To add the ip-address type it in the Value box .
Click Add record your ip-address will be added .
repeat this step for all 4 ip-addresses .
your site will be good to go , but to access it with ‘www’ you will have to add the ip-address for those too , yeah i know its hectic but its a one time setup .
just replace the ‘@’ with ‘www’ and add the ip-addresses .
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153it will look something like this .
repeat this for all the ip-addresses and we are done here .
Woah that was alot 🚀🚀🚀
6 . Link the Domain with your Repository
Now back in our repository on GitHub . You have to add a CNAME file to do this click on the ‘Add file’ button .
Name your file ‘CNAME’ and type your website url .
Scroll down and click the green button that says ‘Commit New File’
The CNAME file will be added to your repository .
Now we have to go back in you GoDaddy.com dashboard and you have to add a new record in the DNS section.
Enter ‘www’ in the name section and now in the value section you have to enter this , after replacing the ‘username’ in the above with your GitHub username .
username.github.io
click ‘Add Record’ and we are done here .
now back in the settings of your GitHub repository you will find this section .
you will see this section .
Here you have to add your domain here
Dont forget to check this if you dont have and SSL certificate already .
This will provide your site with an SSL certificate from ‘Lets Encrypt’ .
wait for a while and
