by Flo Preynat

I’ve been using Git for quite a while now. It took me some time to get used to it. At first, I wasn’t very confident playing in the CLI, then I tried a few GUI clients before realizing what I was trying to achieve with Git, as a one-man company was far from rocket science, and decided to move back to the CLI and just type the few commands I was to use.

For your info, I use Bitbucket as a cloud repos provider. I love Github (and use it for public demos) but no offence to them, Bitbucket is too good to be true. The perfect tool for freelancers like me, as it offers unlimited repos and space for teams of 5 users and less for free.

Cannae beat it as they say in the west of Scotland.

I don’t intend to change my git routine for the moment – as I was saying – since it perfectly suits me, but I thought I would give Ungit a go, as I have to admit its web based UI, especially for Git newbies, is extremely appealing.

Let’s do this

Node, and Git are pre-requisites. So if you don’t have them, go ahead and install them first.

Once this done, just type:

npm install -g ungit

Watch for your ‘sudo’ if you’re thrown an error.
Go to the folder of your project, and simply type:


This will automatically start a new web server and open a new tab in your favorite browser chrome.
I’ve made the test using a brand new folder with a simple html file in it. First of all, notice the ‘initialize a repository here’ button. Click that to make your folder git-ready.


Add a remote repo if needed. In our case, I went ahead and created a repo on Bitbucket, and used its .git url to make the connection with the local machine. You can also clone if you’ve got a project ready somewhere in a repo.

Commit locally your index.html file by giving your commit a name, then push to Bitbucket by simply pressing push.




When you make changes to your file(s), Ungit will automatically recognize the need to commit. As an example, I added an h1, committed it, and pushed it up.


You can create branches, and checkout from Ungit, make changes (here I added an h2), and see your changes in Bitbucket once commited and pushed, …



… and obviously see the various versions of your file(s) depending on the branch picked.


One thing to note is the ability to see the code altered in your files to be commited by simply clicking on the file(s) name(s) in Ungit. You can also uncheck the files to be ignored in your commit (check mark beside each amended file).


I played a bit more with the UI, and made more changes to the file, before checking out the master branch, see how easy and beautiful Ungit displays your position on the branch(es).



Merge your branches when you’re happy with your changes.



You’re starting to see my point, you can do it all git wise, all from Ungit.

How awesome is this tool?
Yeap,…pretty much wicked.


You can give Ungit’s maker Fredrik Noren some love here.
while the Ungit repo can be found on Github.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]


Be the first to drop your two cents here!