You have probably heard of Git by now. If you are unsure what Git is, let me break it down to you: Git can potentially save your life – or project – especially if you are working with someone else on the same project or prone to mucking things up.

I’m not sure about you but as a web designer, I do HTML and CSS on top of the UI and UX. So, some codes are involved and I would hate it when someone decides to change the look of the site without my knowledge.

Having Git, I would know exactly what has been changed, where and when. And If I approve of their change, I can accept and merge their codes into mine and everyone working on the project will have same codes. Yay! – Unless a merge conflict happens! Argghh! But at least you will know where the differences in code is and you can rectify it rather than wasting a lot more time looking for that needle in the haystack.

First off, lets choose a web based Git repository. Much like Dropbox, a web based Git repository allows you to share files online but with the ability to have version control – ie knowing what other people do where (in the codes) and when and if you have the latest files. Two of the most popular web based Git repositories:
1) GitHub
2) Bitbucket

* For this tutorial, I’m going to use Bitbucket because it allows free private repository – and the example I’m using is a private site (for now). Github does not provide free private repository.

Set Up Bitbucket

1) Sign up to bitbucket
2) Create a repository:
a01

3) Once created, if you go to the fourth icon as per the image below, you will see there are no codes.
a02

4) Now time to sync the files on your desktop with git. Looking at the third tab:
a03

5) Because I already have a website partially built on my desktop, I selected “I have an existing project”. And it says to do the following:
a04

WHAT?? And where do I type that?

*take note of the blurred item – I’m calling it “blurred-URL”*

Get a Git GUI!

1) This is where a Git GUI (Graphical User Interface) comes to help. Go to this site and take your pick. (Again, I am on Windows so I’ll be picking the one for Windows and guiding you with the Windows interface)
2) Install as per instructions. And open the application:
r01
3) Select “Create New Repository” and locate your file on your computer. And click on “Create” button.
r02
4) And you will see this
r03
5) Now, you need to tell this to sync to bitbucket. Select “Remote” and then “Add”
r04
6) This will prompt you to enter the bitbucket URL. Click “Add” after.
r05
7) After adding, if you hit this, just press “Continue”
r06
8) Now, to put your file on the desktop onto Bitbucket, select “Remote” and then “Push”.
r07
9) Select the repository (if it isnt already selected) and press “Push”. If and when prompted, click on “Stage Changed” and “Commit” before clicking “Push”
r08
10) Wait… and done!
r09
r10

Now if you go back to Bitbucket and select the fourth tab (Source), you will see your files there
a05

Your Git is set up. I’m going to gloss over on how to pull files from Bitbucket and merge with the files on your desktop:
1) On GitGUI, select Remote > Fetch From > [your online folder]
2) Select Merge > Local Merge. Make sure Tracking Branch is selected and hit “Merge”.
This will overwrite your desktop copy.



This article has 1 comments

  1. Pingback: How to Use Git – Visual Guide for Beginners – The Sage 42 Blog

Leave a Reply