A beginner’s guide to Git and Github

Hello everyone. I have been learning git and GitHub over the past couple of months and I wanted to share with you guys on how to use git and GitHub to save your code. Before I begin, this is a beginner’s guide and I will be covering only the basics in this post.

Git is a free and open source Distributed Version Control System designed to handle small or large projects. In software projects, many a times we feel the necessity to rollback to previous versions of the code. We may be working on something and we mess up everything. This has happened to me a lot of times. But thankfully there is GIT. I use Git primarily to collaborate with other people and like I said rollback my changes. I like to think of Git as a time machine that helps us return to past codes.

Now, to get you started with Git. If you are on Linux distro like Ubuntu, chances are git is pre installed.  If it is not installed or if you are on Windows or Mac, go here and download for your Operating System. I have done this on Windows, but I am using Ubuntu these days, so I know that you have to download from there and install git bash and a GUI.

If you have git setup on your machine, lets get to some basic git commands.Create a new folder anywhere, name it “Project1” or anything you like or open an existing project folder on your computer that you were working on, like a project folder inside of the xampp>htdocs folder or an Android Studio project folder. “Shift+Right click” and Click “Open git bash here” if you are on windows. Right click on the folder that you are in and open terminal on Linux. Type the following

git init

The above code stands for git initialize. This command initializes an empty git repository.  This is your local repository now. You can do all the git stuffs on your local repository but what if your computer data are lost or what if you have a friend working on the same project. That is why we will need some sort of remote repository. And that is where Github comes into play. Now there are other services for the remote repository like are Gitlab, Bitbucket, etc. But Github is the major player and offers various neat features. Just go to https://github.com/ and sign up for an account.

git status

This command is used to check the status of the git repository. Checking the status mean checking what files and directories are added to the project, which files have been changed and things like that. Just create a readme.txt file in your current directory and type this command and git will exactly show that readme.txt has been added to your folder. Now the file readme.txt is not added to your repository up until this point. To do that just type:

git add .

The syntax is git add <file_name>. The dot (.) includes everything that has been added or changed. If you want to add specific files then just type:

git add <directory/file_name>

Now the files or  changes has been added to your git repository. The next thing to do would be to commit the changes made. That can be done using.

git commit -m "Commit message"`

The -m above stands for message. The message that you can put to the changes that are made in this stage. For now put commit messages that are helpful to remember what you did at this particular commit. Later on you will come to know that there are standard practices to how to write good commit messages and fix issues with commit messages. But don’t worry about that now.

Up until this point we now know how to

  1. Initialize a git repository.
  2. Add all files created or changed or specific files that were changed.
  3. Check the status of the repository.
  4. Commit the changes or additions and set commit messages.
  5. Make a Github Account 😉 (Go ahead and do that now, if you have not already done that.)

In your Github profile, go to Repositories and then “New” . Type a name for your repository, this will be the remote repository. Now the code or the text file that we created in our local repository can be pushed to this remote repository. Isn’t that cool?  Just get the hang of git and github and many cooler things are on your way.

The process to push your code or files to the remote repository would be:

Back in your terminal or git bash, type

git remote add origin https://github.com/your_username/name_of_the_remote_repository.git

This command is adding the remote repository to a reference “origin”. Now whenever you have to work with the remote repository, you can simply access it by using the word origin.

Now finally, all that’s left to be done is

git push origin master

This command actually pushes your local files and folder to remote, which is now in origin and the master at the last is the name of the branch at which the files and folder will be pushed to. Don’t worry about the branch for now.

So what to do after you make some more changes to your code and add files or folder that help you implement some feature in your project. The repository is already initialized so just  add the files, using git add . or  git add <file> . Commit the changes, set commit message using git commit -m “commit message” and push the changes using git push origin master.

I hope you have learned how to setup a git repository in your project, add files(stage them), commit them and push to remote git repository. If you are confused about any of this, do reach me out at my twitter @ravigarbuja and I will try to help.

There are many other online sources that teach this subject better than I do, so definitely look out for those.  There are video tutorial at https://git-scm.com/ too.

I also noticed that you can try git commands  online right here . Check that out if that suits you.

Head over to Youtube and search for “Git tutorial Derek Banas” and he has a 4 video tutorial series to go more into depth.

Also a tutorial that was really helpful for me is: rogerdudler.github.io/git-guide/ This, I think is one of the best, if not the best tutorial to get you up and running with Git.

I hope, this tutorial was of some help. Do comment or  reach out to me if you need some help with this post or if you want me to cover some topic related to Git.

Host website on Github pages

Today I will be going through how you can host your website on github pages for free. For that you should have a website written in HTML, CSS and JavaScript. Now this would require prior knowledge of some git code, github repository and HTML5 stack (HTML, CSS and Javascript). If you would like to have a look at a basic tutorial of git and github. Click here. I assume that you have knowledge of those and you have a front-end project ready to push. However I will try to explain them here in this post, so that you can have something to show for at the end of this post. Please follow along. And do comment if you do not understand anything here.

Okay first thing’s first, what is Github Pages, Github Pages is a static site hosting service. What that means is it will allow front end markup language and scripting but will not allow back-end scripting of any sort. So web projects based on PHP will not show up on your github pages.
You may ask: “Why would I want to host your web project on Github pages?” , because it’s free(I love free stuffs) and because you will have a website to show for in your resume or your profile, bio or anything like that.

So how do you setup github pages?

  1. Create a Github account.
  2. Develop a web project in your computer. (Something simple would be a nice idea to begin)
  3. Push you codes to a github repository on your account.
  4. Enable github pages on your repository’s Settings option.

Now let me walk you through each process mentioned above.

Create a Githbub account, here. If you code, even just a little, you would want to have a Github account. It is used for working on group projects, version control and code storage among many other things.
Next create a repository in your github by clicking the plus sign and then New Repository:

 Github New Repo

Name your Repository and click Create Repository. And your repository is now created, where you can push codes from your local machine. You will see something like this:

 Github Remote Repository

Now that your repository is all set up, you can push your local website to the repository itself. Now Github requires your computer to have Git installed on your machine. What? Git? Github?

Well, Git is the distributed version control system while Github is a service that provides git repository hosting. There are other popular services too, like Gitlab and Bitbucket.

So setup Git on your machine by going to their page.

After Git is setup on your machine, navigate to the folder where you have your website’s code and right click there holding the shift key. Click Open Command Window Here or open Terminal if you are on Linux.

This will open the command prompt on that folder then type in the following commands:

`git init`

`git commit -m “first commit”`

`git remote add origin https://github.com/(your_github_username)/(repository_name).git`

`git push origin master`

 

and that will push all your website’s code into the github repository. If you want to know more on what these commands mean, read our article here. The only thing left now is to enable “github pages” on your repository’s settings.

Github Repository Settings

 

Scroll down on the settings page to find Github pages option. I believe it’s second last on the list, just above “Danger Zone”.

On the “Source” select master branch option. You will then see a message confirming that your site is published at

https://(your_github_profile_name).github.io/(your_repository_name)/

To show you that it works just fine, here is what I did with it. Haha, I am not a good web developer as of now. But I have seen people do some really cool stuff with it.

I hope that this post helped you land your website on the web. In addition to the advantages I mentioned earlier, you can now update your code from within the github itself or update the code locally and commit and push them and your site is updated.

If there is anything that I can help you with, do comment.