Hi there and welcome to the wonderful world of coding! Have you ever worked on a project, created a feature or just deleted some lines of code, then way later realised you needed that piece of code back? Wouldn’t it be magical if you had some type of ‘Version Control System’ or a log of what you changed for each save?
What’s The Difference?
Git is exactly as mentioned: it’s a system that controls and saves multiple versions of a project. It is its own language, though not for programming, but for saving and monitoring our files.
GitHub is an online database that saves our projects into repositories, or repo for short. In this tutorial, I will be going over the basics of Git and how to get started with GitHub.
Git nowadays is a need-to-know skill that many employers are looking for in candidates. It’s quite easy to learn and not at all time consuming. GitHub is just one of many online repository databases that exist. You can choose from GitHub, BitBucket, and GitLab. Though I’m sure there are a few more out there.
In this tutorial, you will read some of my best GIT puns, so be warned. Git is a command line tool, that means you will have to open up your terminal, console, or command prompt depending on your OS. For convenience sake, when I refer to terminal, please be sure to apply it to your command prompt or console.
You can check if you have Git already installed by running in your terminal
If you have a version print out – perfect, you have it installed. If not, it’s really easy. I’ve added the installing guide for each respective OS. When you click on your Mac and Windows Git version, it will automatically begin downloading the Git package.
Mac OS, you can download the Git dmg file from here
Windows, you can download the Git file from here
Linux, you can install Git from here
After you’ve installed, run git –version to make sure you’ve installed it and it’s set.
Learning Some Command Line Commands
In this tutorial, we won’t really develop, but use the Git language, so for this you can use any project you’ve worked on, or just create a new folder and call it whatever I’m going to call mines. And since we’re going to work on the command line, let’s learn a few command line commands.
Our first command will be the position command that shows us where in our OS we are at. Majority of times, we’re in our system directory.
In my case, I get printed /Users/fernandoboza. Now to see what folders and files are inside, let’s use the list command, or ls keyword. That’s a lowercase L and s
In my case I got a list of everything in my user directory, which includes Pictures, Music, Desktop, etc.
Let’s first create new directory or folder with the ‘mkdir’ command for make directory.
Now to check, let’s run the ‘ls’ command again and if we check it out, we now have a new folder called MyGitProj. Next, let’s actually go inside our new MyGitProj folder, and to travel within the command line, we use ‘cd’, a space and the name of the folder/directory.
QUICK TIP: Use the tab when typing the first couple of letters to auto-complete
Now let’s run pwd and we’ll see /Users/fernandoboza/MyGitProj. Next, let’s create a basic web structure with an index.js, and css folder. We won’t need to add anything, it just serves to show us how our files will behave with Git.
Now to create a new file, we’ll use the touch command again with a space, the name of our file, followed by a period and the file extension.
Now remember how to create a folder, create a folder and name it css. Go into the folder and create a file called ‘main.css’
- mkdir css
- cd css
- touch main.css
For now, we’re going to leave our css and index file empty. Now to go back in the command line, we use the cd command then a space, and two periods followed by a forward slash.
That will take us back to our main MyGitProj. Here’s a tip, if you’re really a few levels deep in a folder, you can repeat ../../../ however many times until you get to your desired position. Remember, each ../ is one level up.
QUICK TIP: To remove files, use the rm command followed by the name; to remove directories/ folders use the rm -rf followed by name.
Great now you can whip out your terminal whenever, where ever and pretend you’re hacking into the Pentagon, when really you’re just adding a css file.
Our First Git
Now to use Git, we’ll need to initialise it, and before we do this we have to be sure we’re in our main directory.
Doing this, Git knows this folder will makes changes and save each version. It tracks everything with a newly created file called .git. We don’t have to directly open or modify that file, since we’ll use the command line to use Git. A message should have printed out that reads similar to this:
Initialized empty Git repository in /Users/fernandoboza/MyGitProj/.git/
You should also see now next to MyGitProj a word called master and perhaps a strange little symbol or shape. In Git, we can work on branches, so here’s an example. Say you finished your project and now want to add some new features or update the code. Now you can copy and paste the entire project folder with images, files and everything in a new folder, OR you can create a new branch, or version of the project, that you can modify, change however you want and see if it works.
If it works, you can merge that branch into your master, original branch. If not, you can simply delete that branch and go back to your master branch, all within the same project. So we’re currently in our master branch. Now to save our files and folder to Git, we’ll need to follow 3 steps.
Adding modified or new files and directory
Committing it to our local repo
Pushing our files to our master branch
A great way to see which files will be added, modified, or deleted is git status.
Here you can see in red the css folder and index.html that is going to be added.
git add .
As you can see, in order to use git, we always need to start with git; for the add command it matters where in our folder we run git add. For example if we git add in our css file, only our main.css would be added but not our index.html. To be able to save everything in your project, it’s best to run git add in the main directory and end it with a space and period. The period means here in this position.
Now that we’ve added our files and folder to the git, we have to save it or ‘commit’ it.
git commit -m “my first commit”
NOT github commit, not BITbucket commit, but git commit
Again we start with the git keyword, then commit -m which is short for leaving a message which would be -m. Remember for every time you need to commit, you need to leave a small detailed message. For me, I like to practice “v1 > added responsive.sass files” I learned from a buddy.
Git-ting Up And Ready With GitHub
Now that we’ve saved our files and committed, it’s time to push it to our remote repo in GitHub. GitHub is a free open-source database, meaning all the code you publish is open to the public, or open source. But if you are interested in keeping your code private, GitHub does offer a monthly subscription for private unlimited repositories.
Signing up is as easy as other websites, fill out your username, password, and email. After you have your GitHub account setup, we’ll create a repository.
When creating your repo, use a specific name that is useful to understand and read. After, you’ll be in front of a page which gives you some options to on how to push your code to your remote repo. First is creating a new repo from scratch, second is pushing an existing local repo directly to the remote repo(GitHub), and third is importing code from one GitHub repo to another.
For this example, we’ve already built our project, so we’ll go with the second method.
First, we’ll need to sync up our remote repo(GitHub) to our local repo.
git remote add origin https://github.com/YOURUSERNAME/.git
git push -u origin master
Now if we simply refresh our page, you will find our css folder and our index.html file uploaded.
Git Your Life Together
As mentioned, a great benefit of Git and GitHub is the collaboration features it offers for teams. One is to pull code from the remote repo. Now all great projects on GitHub always require a READ ME file that carefully explains the project’s guidelines and any other critical info. Let’s create one by clicking on ‘Create New File’ and name it README.md, and inside, let’s just write
##My First Git Project
Now keep scrolling to the bottom and hit on commit new file. Now if we check back to our main project folder, you will see our new file README.md on our list and our heading we added at the bottom in bold.
What we have here is a new file in our remote repo, but not in our local repo in our computer. So to download or ‘pull’, let’s just hit git pull and watch as README.md is downloaded into our local project folder.
As mentioned, you can create different versions of your project to test out and collaborate. Let’s create a new branch
git checkout -b readme_added
Your terminal should now have switched from master to readme_added.
Inside our text editor, let’s slightly modify our readme file. Let’s just add # Git rules or anything you would like to add and save. Now let’s git add . git commit and git push, but this time we are pushing it to a new branch in our GitHub repo.
git add .
git commit -m “v1 > new branch”
git push origin readme_added
Next, let’s switch to our main GitHub project page and see a new pull request with our branch name. Let’s click on Compare & Pull Request. Here, we can see and modify our branch name should we or your supervisor want to. If we scroll further down, we can see the modified files we added and in green the new lines we added to our README file. Let’s click on ‘Create Pull Request’.
We have now created our new branch in our GitHub repo. We now have the option to merge to our Master branch or leave it as is. If you ever want to check and review between branches, just click on the branch drop-down menu, which shows the available branches and real time changes.
Well, that’s about it folks. As you saw, with just a few keywords we can improve the safety and productivity of our projects. Git is amazing and a must-have tool in your workflow. Nowadays, a lot of employers ask if developers know Git because it’s crucial when working in teams and even alone.
If you want to read up on how to master Git, you can check out the handful of Git commands you can do to step up to the next level.
As always, I hope you learned something new, and happy coding.