Git Github Tutorial (2)

Have a good Internet connection today? If yes, then good. We would be needing it in this tutorial. Well, this blog is in continuation with my previous one “Tutorial (1)”. And will continue to my next one “Tutorial (3)”. So if you haven’t gone through my previous One. then It is recommended that first have a look on that.

This tutorial is dedicated to only without going to Terminal git. And since Github is not a Terminal Based system instead it is a web GUI, so I might face difficulties in communicating the exact location of different options, but I know real learners have marvelous capabilities towards filling this gap. So shall we start now? Here we go then…

Git and Github are two different services altogether. Never get confused with them. Git is a version control system ( a highly efficient, software ) and on the other hand, Github that is is a web hosting service provided to ease the task of online collaboration with version control as well.

We may see Github as a specified hosting providing website who is using git (software) in its background for doing version control.

There are various platforms available to facilitate this Github like services for e.i:- bitbucket,  gitlab, devhub, beanstalk, sourceforge, apache allura, cloud source by google, aws code commit, gitkraken, etc.,

Before we start using Github, it is necessary that you understand basic terms we use in version control. That I have already said to refer from my previous blog.

// Now let’s get started with github.

First, open your browser (Firefox my favorite), and go for Sign up on this site, give your necessary details and submit.

Once your account has been created, and you would log in, First most you would be given an “On Start Tutorial” for beginners by default on the welcome screen (I recommend you to do it after this blog or now, whatever you found suitable. But do it soon.) which will teach you to perform basic operations on github. Like creating a new repository, making your first commit, etc,. Alright?

You may manage your account by going to the bio-pic icon at the top right that is actually a drop-down menu. And you can search github from the searching panel provided at the top left next to github icon. Now…

1. Creating new repo.

-You may create new repo by going on the icon of “+-” (another drop-down menu) at the top right of the website (on the left of your profile options). Then select “New repository”.

-then give a suitable name for it (“SiriusBlack” in this tutorial ).

-it’s description (“This is for learning purpose and fun”)

-let it be “Public” only.

-and at bottom checklist the block of “[] initialize this repository with a README”, this is generally good (not necessary) for you to have at least one file in your repo. Here readme file may include all the necessary details about your project, contributing areas, usage, features, etc. in the first look.

-and click “Create repository” button.

// soon the repo. will be shown in your profile.

2. Adding a new file.

-first, go to your repo. (if you are not already in) that you may verify by looking at the top left in blue color, your user_name/repo_name (GeekyShacklebolt/SiriusBlack in my case) would be written if you are already in the one.

-You may go to the front Repo screen/page by just clicking the name of your Repo.
shown top-left in Blue color.

-your only readme file is shown here. You may add a new file from the button “Create new file” given at middle right of your screen.

-click the “Create new file” give a name to it (“SiriusIntro” in this tutorial), add some text in the file like.

This is Introduction of Sirius Black.
Sirius Black was one of the characters in Harry Potter’s series.

-give a new commit title, new commit description.

-let it be “Commit directly to the master branch”

And at the bottom hit the button “Create new file”.

3. Editing a file.

-You may edit a file by first clicking on it, then when it would open you may go to “edit this file” icon (“tilted pencil”) given at top right corner of the file window.

– add or remove whatever you want to do:

This is Introduction of Sirius Black.
Sirius Black was one of the character in Harry Potter’s series.
Sirius Black was Harry’s Godfather.

– give a title for this change (below) in the given space (“added another line in the introduction”)

– give a description of this change (“Just informed about Sirius Black’s relation with Harry”)

– select commit directly to the master branch. (do not select the second for now, we will see)

-Hit Commit changes.

// after committing. Your repo. would have incremented the commit section with one.

First, go to your repo. (out of file) by Clicking on the Repo name shown in blue color on top-left. Then you may go to “commits” (first option shown before branch, releases, and contributor. if you want to see, how many commits have been done on this repo.

And you may also click on the commit’s hash (shown on the right side of each commit in “7 alphanumeric trimmed code…” ) if you want to see what was changed in that commit.

// Now you may create a new repo, add a new file, make changes to it. Again try doing some other change in this SiriusIntro file and perform another commit.

-open file, click on editing icon, and add a new line:

This is Introduction of Sirius Black.
Sirius Black was one of the character in Harry Potter’s series.
Sirius Black was Harry’s godfather.
His nickname was Padfoot.

-give title, description, and hit “commit changes”.

-refresh the page if changes are not showing in the file.

Now you have done four or more commits in this file. Try doing Branching now.

4. Branching

– to create a new branch (first, go to the repo) go to the button showing the title of branch: master (a drop-down menu) in the middle left of the screen.

– click on it and in drop down Write the name and just create a new branch, but if you would already be had another branch then this drop-down menu would also be showing other branches as well that you may select to switch.

– give a suitable name for your second branch (“broomstick” in this tutorial).

– and enter to create this branch.

// after branch creation, you would already/automatically be switched to the broomstick branch. Just make few changes here and see if they are reflected back at the master branch or not.

-open file SiriusIntro, click on edit icon, and substitute the name with a pronoun in the third line:

This is Introduction of Sirius Black.
Sirius Black was one of the character in Harry Potter’s series.
He was Harry’s godfather.
His nickname was Padfoot

-give title, description, and hit “commit changes”.

5. More about branches

– go back to the master branch by again click on the button from where you created the branch (now would be showing you the master branch as well) and clicking on the master.

– check “commits” and your broomstick commit won’t be here.

// this confirms that branches are perfectly independent to make changes to their files. You may confirm by opening the file SiriusIntro in this master branch.

Which is not showing the substituted Pronoun.

6. Merging two branches

– first go back to you broomstick branch.

– and there is an option of “create pull request” next to the change branch button, click on it, give details/description and title.

here if two branches (sender and receiver) have no conflict of merging then the message would come to be “Able to merge” in green color. Otherwise “Merging conflict” would appear in red color. Even when a merge conflict has appeared, you may still make a pull request. But this is a bad practice in general.

If merge conflict arises then what to do: What better is that, you work on git and github such that no conflict should arise. For this, you need to follow 3 steps.
* Pull
* Do changes
* Push
Or you may google on a documentation about “Sync Your Fork

– Now send pull request by hitting “Create pull request” button at the bottom.

// by default pull request would be sent to the branch from where you did separately branch (“master in this case”) it. Since both are your own, therefore, an option of “Merge pull request” would appear there itself. But don’t click it from here.

– now go to your master and see a new “pull request would be showing in the “Pull requests” part” (next to code and issues part of your repo.), click on it, select the pull request and hit “Merge pull request” then “confirm merge” this will close this open pull request and will show you the successful message.

– go and check your commits, now would be showing you the commit you made to broomsticks branch with the commit of accepting pull request as well. Which means you are free to delete the broomstick branch if you wish to.

Now when you are aware of the pull requests. You may go to the second option available while you commit that is other than “Commit directly to this branch“, which is “Create a new branch for this commit and start a new pull request” when you’d go for this second option, you’d have to give the name of your new branch that’s it. rest all is same.

7. Deleting a branch

– first go the “branches” option (not the changing branch button but the one that is next to the commits option).

– all of your branches would be listed here. You may delete any branch (on which you are not present currently) by clicking on the “trash icon” button at the rightmost of the branch bar.

If there is an open pull request from any of your branch, then you won’t be able to delete that branch unless you put that pull request’s mark as closed from the pull request receiver’s branch.

8. checking network

– go to the “insights” part of your repo available in the after “settings”.

– select Graphs from the drop-down menu.

– then go the “Network” representation option.

// if you are following this tutorial as it is, then you would now be looking at the chain of commits in a network representation. Where a black chain of commits showing the master branch and blue one showing the second (broomstick) branch.

See how a branch separate and merge with the master branch. Here you may see all the complex network of commits in an easy graphically comprehensible manner.

9. Issues

– Suppose you are working on a programming project and after completing it, you get a runtime/ logical error. You may not use a debugger to find a logical error. But since being on github you are a part of a community of open source developers around the globe. You may seek their help. By opening a new issue means you want others to ponder upon certain specific requirement in your project, maybe a bug fixing, bug reporting, review of code, checking documentation, asking help to improve documentation (Licenses and all), asking any other help.

– People may visit your repo. And would found an open issue, these issues are the manifestation that you are asking others to contribute to your project. Open source Community believes in sharing of knowledge. You may ask help, and you may help others in need as well. This is a healthy way of development.

– to open a new issue to the “issues” part of your repo next to the “code” part.

– and open a new issue by clicking on “New issue” button.

– write title/description of your issue, may add a label from given options (label like bug (red), need help (green), etc), may add a link and other options available.


-on every commit or issue or pull request you may comment, if you wish.

– you may use “markdown” language of comments. To represent your comment’s documentation more comprehensible and attractive. To learn more about this github markdown language. Go to the link provided at the bottom-left of the comment window.

11. gh-pages

– github provides free website development service, and for hosting it uses your account. Free website obviously means that you can’t have an independent domain name since this service is provided by github, you given name, would behave as a sub-domain in, complete website URL.

– gh-pages is a special kind of branch. If you create a branch (of a repo) named it with gh-pages, then creating your gh-pages branch to be default branch, and finally deleting your master branch. This will publish your site and whose address could be seen. So let’s go stepwise.

a) we already have our SiriusBlack Repo.

b) edit its SiriusIntro file and add some HTML to it.

 <body BGCOLOR="RED">
 <H1> This is Introduction of Sirius Black. </H1>
 <H2> Sirius Black was one of the characters in Harry Potter’s series. </H2>
 <H3> He was Harry's godfather. </H3>
 <H4> His nickname was Padfoot. </H4>

c) now change the name of this file from “SiriusIntro” to “index.html”.
is the default name of the file that would be projected on your site’s front page.

— and finally, commit it But this time choose the second option to save our time that is “Create a new branch for this commit and start a pull request” and named this second branch as exactly “gh-pages” and hit “Propose file change“.

*do not send pull request it is useless. go back to the repo instead.

d) go to settings part of your repo, then to branches (showing on left-side sidebars).

e) switch the default branch from master to gh-pages and update. (a warning message may come, but go ahead with and confirm “I understand…”

f) go back to repo front page.

g) go to branch option and delete your master branch. (a warning message will appear since you are about to delete your master branch but still go for it). NOT NECESSARY STEP, you may avoid it.

h) go back to repo front page.

i) go to settings and scroll down. There soon the blue-tinted highlighted background, your site address is written under the block of GitHub – Pages. Copy it or remember it , it is always: “” in my case ” “.

— well okay you have created a site on github, later on you may add more html, Js, Css, whatever you wish to make your site more interactive. This is the end of this tutorial. You have learned to create repo, adding files, editing and committing them, branching, issues, pull requests, etc, and finally about gh-pages. But still we haven’t learn collaboration. How work with others’ repo. And do collaboration, how to copy our project to our machine, how to work in association with both github and our terminal based git and many more. Writing soon in my next and last blog about git and git hub.

If you have been following this blog from the previous one then one thing worth pointing out.

Git and Github are two independent. Which means you may spent your entire life just with git without even knowing about github and similarly you may spent your life on github without even working on git. I did almost same jobs with github as I did with git in the previous blog (if you have already pointed out this) except the issues, comments and gh-pages (that specifically need a GUI and web).

Writing soon… Have a good day and This, is GeekyShacklebolt.

Bidding you goodbye!

2 thoughts on “Git Github Tutorial (2)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s