Intro to Git for Web Designers

Unless you’re a one person web shop with no team to collaborate with, you’ve experienced the frustration that goes along with file sharing. No matter how hard you try, when multiple people are working on a single project without a version control system in place things get chaotic.

If you work with developers on the buildout and implementation of websites, the merge between front-end templates and back-end functionality can be a scary black hole.

Issues like overwrites, lost files, and the all-too-common “working off a previous version” phenomenon crop up constantly. And once back-end functionality has been put into your templates, you become terrified to touch them for fear of breaking something a developer spent a great deal of time getting to work.

In addition, even if you have a common repository that everyone is pulling from odds are at least one member of your team forgot to grab the latest files and is about to blow things up with their latest additions.

In this article, I’ll give you a quick review of Git, an excellent version control system.

 

Version Control – A Quick and Dirty Explanation

Version Control (also known as Revision Control or Source Control Management) is a great way to solve the file sharing problem.

The basic concept is this: there is one main repository for all of the project files. Team members check files out, make changes, and then check them back in (or commit them). The Version Control System (VCS) automatically notes who changed the files, when they were changed, and what about them was new or different.

It also asks you to write a little note about the change so everyone on the project knows at a glance what you did and why. Each file will then have a revision history so you can easily go back to a previous version of any file if something goes horribly wrong.

A good VCS also allows you to merge changes to the same file. If you and another person work locally on the same file at the same time, when you push these files back into the main repository the system will merge both sets of changes to create a new and fully up-to-date file. If any conflicts arise during the merge it will highlight them for you.

You’re probably using a very crude VCS right now to keep your files straight. If you’re a designer, it looks something like this:

dpcwqxg_312gvhkh4s6_b

Designer Version Control - FAIL

This works well enough for PSDs and other large binary files, which don’t really lend themselves to VCS. But there’s a much better way to do it when you are managing the source code for a website.

 

Benefits to using a Version Control System include:

  • Files cannot be overwritten
  • There is a common repository that holds all the latest files
  • People can work on the same files simultaneously without conflict
  • Allows you to revert back to an older version of the file/project if needed
  • Making your developers very happy

Even if you don’t work with a team, version control can be a lifesaver. Backing up files is one of the easiest things you can do to save yourself from losing work or having to start over.

The idea of a VCS seems daunting at first, especially since most of the documentation is written by and for developers. But once you make the move to incorporate it into your workflow, you’ll find it’s not nearly as hard as it looks.

dpcwqxg_322grqgzjcz_b

 

Meet Git

OK, so now you can see why a Version Control System is a must-have for your web team. If you do a little Googling you’ll see that there are quite a few options out there including SVN, Mercurial, CVS, Bazaar and Git. Any one of them could be a good solution for your needs, and I encourage you to do some research before selecting a VCS. In this article I’m going to focus on Git, the one I use daily. It’s a “rising star” that has gained popularity thanks to a strong Linux fanbase, GitHub and the Rails community.

Git is a free open-source Version Control System originally created by Linus Torvalds for Linux kernal development. Linus is a very smart guy; when he sets out to solve a problem, he doesn’t mess around. One of Git’s big differentiators is that unlike SVN and CVS it is a distributed version control system. This means that every user has a complete copy of the repository data stored locally on their machine. What’s so great about that? A few things:

  • Everything is local, so you can work offline
  • There is no single point of failure. It doesn’t rely on one central server that could crash and burn, taking the only repository for your project with it.
  • Because it doesn’t have to communicate with a central server constantly, processes run much faster

Git has a slightly tougher learning curve than SVN, but the tradeoff is worth it. Just think how impressed your developer friends will be when you tell them you’re using the new hotness that is Git! In all seriousness, I don’t think the learning curve is all that steep. SVN was equally confusing for me at the start, and I ran into more day-to-day problems when using it.

Installing Git isn’t fun and games. I was lucky to have a knowledgeable developer willing to help, but there are plenty of resources online to get you through it. It will run on a PC, Mac or Linux box, although installation for Linux and OSX is considerable easier than for Windows.

You can download the latest version of Git here Once you have the files, try this quick guide to get you started with the installation process. For Windows users, this step-by-step visual guide should be helpful. Mac users, try this guide found on GitHub

 

Getting Started

Once you have Git installed, you can create your repository. To turn an existing folder into a Git repository, use the following commands in your Terminal or Command Prompt window:

cd path/to/project
git init
git add .
git commit

What you’re telling Git to do is:

  • Initialize this directory
  • Add everything in it – all files and subdirectories
  • Commit or store, all current changes in the repository

If you hate the command line you can also do this using the Git GUI. It’s not the prettiest thing you’ve ever seen, but it’s there if you need it.

A screenshot of the Git GUI

 

A Sample Git Workflow

I’m currently using Git on a Mac to work on a web application with multiple web developers. We have a “master” version of the code that we push our files to, and we each run a full copy locally. On any given day, my workflow goes something like this:

dpcwqxg_323gnhgbwg3_b

  1. Fire up Terminal. Start up my local mysql database (so the application we’re building can run locally on my machine).
  2. Use Terminal to check out the latest changes by using the “git pull” command. This gets me all the changes made by other team members and checked into our master repository.
  3. Open the project in TextMate and make my changes.
  4. Commit changes and add my notes. This only commits them locally. I commit frequently, probably ten or more times a day. This helps keep me on track.
  5. Push my changes to the master repository using “git push”. Now other team members can check out and see my changes. You should do this at least once a day or after any major addition.

All of these actions can be done easily through the Terminal window, but I’m a visual kind of girl. For that reason, I use GitX, a Git gui for OSX, to make my commits. I still push and pull through Terminal, but GitX makes it easy for me to organize my commits and wrap my head around what I’m doing.

GitX Screenshot
At the top, it highlights what change was made to the files. In the lower left is your list of Unstaged Changes. To commit them, you drag one or more files to the “Staged Changes” area on the right, type in your commit message, and hit the Commit button.

If I flip to the tree view, I can see what has been pushed to the repository. If my files were not current with the master files, the green and blue tags at the top would be out of sync. GitNub offers a similar Mac-style interface.

GitX Screenshot
There’s also a great TextMate bundle available. With it, you can push, pull, commit, and more without ever leaving TextMate. It’s extremely efficient.

TextMate with Git Bundle installed

 

Learn More

Git Cheat Sheet

Git Cheat Sheet by Zack Rusin

Above: Zack Rusin’s Git Cheat Sheet

I’m still a newbie to Git myself, so I’ve only scratched the surface as to what you can do with it, but I’ve definitely seen the light when it comes to version control, and am glad I finally got on the bandwagon.

To learn more about using Git, check out these great resources:

Intros To Git

Getting To Know Git
Wikipedia entry on Git
Why Git Is Better Than X
Linus Torvald’s TED talk on Git
A Tour of Git: The Basics
Git Ready

Cheat Sheets/Tips

37 Signals Git Resources
Git For The Lazy
The Git User Manual
A Gaggle of Git Tips
GitHub’s Git Cheat Sheet
Git Magic

Intros to Version Control

Version Control For Designers
A Visual Guide to Version Control
Wikipedia entry on Revision Control
Choosing a Distributed Version Control System
I Wonder What This Button Does (A List Apart)


Written exclusively for WDD by Mindy Wagner. She is a web designer at Viget Labs and has worked in both print and web design for over 8 years. She has a degree in Electronic Media Art and Communication from Rensselaer Polytechnic Institute.

Do you use Git or other software for version control? Please share your experience with us!

  • http://www.impelgd.co.uk/ David

    Many thanks – nice helpful article for newcomers to version control like me.

  • http://blog.insicdesigns.com insic

    im using this one. and it help me a lot.

  • http://www.fluidnewmedia.com Ahad

    There are some great links for git over at http://www.peepcode.com (its worth the money) and over at the http://www.pragprog.com site (this one is free) so check them out…

    GL!!

  • http://www.patternhead.com Patternhead

    Useful and informative article.

    Version control really does make coding a website easier. Especially after several rounds of changes and the client says “nah, think I preferred the first version”.

  • http://www.areacriacoes.com.br daniel lopes

    Amazing… great!

  • http://www.designcotidiano.com.br Vilson Martins Filho

    Hey great aticle!

    Here at work we just received 11 iMacs, and we are about to change platforms (pcs to brand new imacs).

    We’ve been using Tortoise SVN at Windows, and will continue to use it via Bootcamp, but i’m looking for a SVN program with easy GUI for OSX, to reduce the learning curve for all 10 designers at my sector.

    I heard about SVNx, but have these command lines… that it’s ok for me, but i’m afraid that may not work with the other 10 crazy creative heads…

    We have a 500Gb server running Tortoise SVN, so i think GIT isn’t the perfect solution for us…

    Do you know some links or other SVN softwares? I don’t what the IT guy saying “I told you, PCs are better!” eehhehehehehe

    CHEEEEERs!

    • Joel

      I use Versions and Cornerstone for a GUI based SVN on Mac OS X. Both seem pretty good. I think Cornerstone has more options, but it’s a bit more complicated than Versions. Versions is quite simple and it’s a very Mac-like interface. Both these apps have 2 week trial periods so I suggest checking out both of them.

      I hope this helps :)

  • http://www.designcotidiano.com.br Vilson Martins Filho

    By the way, sorry for the bad english, i’m from Brazil!

  • http://micpiet.de Micha

    Introducing Git as VCS some weeks ago really pushed my work forward even in projects I’m working on only on my own. Would of course recommend it!

  • Terry Sutton

    To ensure I completely understand what this can do, can you please fill in the end of my scenario:

    I run two copies of my website: local and on the web server. I want to make major changes to my CSS, but don’t want to overwrite old changes. Do I make the changes locally and then ‘commit’ them to the web server?

    An explanation of how Git could help with this exact situation is exactly what I need, and would be very helpful! I know its probably obvious in your article, but I’m still finding a disconnect between what Git can do and how I can do it.

    Thanks!

    Terry

  • http://www.justinholt.com Justin Holt

    GIT seems way too complicated compared to SVN for doing the same tasks.

  • Ben

    Interesting… but one of the best reasons to use SVN is the incredible TortoiseSVN client for Windows, which makes everything very easy and helps avoid the command-line.

    • Barnaby

      Ben, two things:

      1) SVN is old, and centralized. I’m pretty tech savvy and I *hate* how difficult SNV is to set up, to branch, or to migrate. Git is easier for the average person to set up and move around because of less restrictions (though may be just a touch more complicated because it has many more features)
      They won’t build any more tools lke SVN anymore, but they will build plenty more tools like Git.

      2) Why on earth would you be using Windows for web development? Seriously, invest in a Mac or spend the 12 minutes it takes to upgrade your computer to Ubuntu. Those platforms have a lot more web integration, that makes it fun and easy to do development work.

      • Anton

        Ubuntu has more web integration? What does web integration mean in the first place? Windows is great for web development. Windows has much more available software, it’s very easy to use and user friendly (unlike linux). And since most web development languages and packages are available for all platforms, there is no reason to prefer linux to windows, unless you are geek, prefer command line to easy, intuitive and efficient gui tools (like tortoiseSVN), and want to limit yourself in terms of available software, editors, etc that you could use.

        And a small rant: windows rules, linux sucks; svn rules, git sucks :)

      • Aran

        I have been developing websites on Windows for the last 12 years. It is a perfectly reasonable choice to make. Yes, there are some elegant features in OSX and Linux that make life easier for webdev, but there is also a lot of software available on the Windows platform that is not available in OSX or Linux. For someone who uses Photoshop and Illustrator a lot, it is also the case that in the past decade, Adobe has put more focus on their Windows products than their Apple products. Many people report that Photoshop works faster on Windows than on OSX. I can’t say either way, but I mainly wanted to point out that there are plenty of legitimate reasons why a well educated computer user would stick with Windows.

  • http://www.fonts.com FontSmithy

    Thanks Mindy. Can you do one on SVN also?

  • Tooby

    Incredibly useful post.

    I have recently begun using Git in university related group projects – I can’t imagine how I used to live without it! I’ll be trying out GitX and GitNub, as they seem to be pretty functional for Gui interfaces. Thanks again for highlighting these!

  • glnster

    Great article!

    Recently switched to Git, coming from SVN/zigVersion, and am liking the speed and ease of creating and managing repos with Git/GitX.

    A diff app that may compliment Git is Changes – http://changesapp.com/ – (compare to Versions for SVN). Haven’t tried Changes yet, but looks handy and says it works with Git.

    tnx again for a highly useful post!

  • http://www.jonnytdesigns.com Jonny T

    Very insightful post. GIT is a very nice tool, it saves a lot of time and confusion especially when working on projects with multiple people.

  • http://athinlayerofbs.com Victor A

    I just recently moved away from SVN in favor of GIT and have never been happier!

    First off, I personally think GIT is easier on the command-line than SVN is. As a designer I’m used to passing things back and forth to other members of my team to code different parts of our projects. I also like to use version control for client documents and other project related files. Seems simple? With subversion, not so much.

    My biggest problem is some mac documents (like files created in iWork and Omnigraffle) are stored in special folders which to the mac, looks like a single document. To SVN, however, it’s still a folder. So as with any folder in the working copy, it puts .svn folders in my document when I add it to the repository. The next time I open that document in iWork, it wipes out .svn folders willy nilly and when I try to check the file back in, I get errors.

    The fact that SVN peppers all folders with .svn folders is a real pain. To rebuild a repository (and that can happen from time to time), you have to delete all those folders.

    I also think SVN can get quite slow when you’re checking large directories of folders back in, especially when the repository is online.

    GIT on the other hand, doesn’t have these problems. When you create a working copy locally, all the version control data gets stored in a single folder (.git). Everything is managed from there. When updating the central repository, GIT will compress all the files in question, transfer it up to the remote repo and the remote machine will uncompress the files and update the repository. This is a lot more efficient in my mind.

    I think what makes GIT so cool is that it is flexible enough to conform to the way you want to run your project. If you want to set up a central repository like SVN, you can do it. If you want to work totally distributed, that’s easy too. You can do that and just about everything in between and that’s its beauty.

    GIT, though isn’t without its downsides. First off, very few web hosts officially support GIT. Some of the big ones do, like media temple and dreamhost, but beyond that, GIT support is pretty sparse. Secondly, there aren’t any good graphical clients available. For SVN you have well designed clients TortoiseSVN (Windows) and Versions(mac) among dozens of clients. You have embedded support in programs like Dreamweaver and Coda also. For GIT however, the graphical tools that are out there are all in pre-alpha stage and still force you to hit the command line to do everything you need to do.

    All in all, I’m sticking with GIT, happy to leave SVN behind and looking forward to better GIT software.

  • http://www.panagamers.com demogar

    I was looking for something like this :)
    I was using Git but the documentation is pretty messy, but this tutorial is the best.

    Thank you very much :)=

  • Pingback: links for 2009-03-26 « Mandarine()

  • http://mindywagner.net mindy

    Thanks, guys – hope it’s a helpful intro. Being new to Git myself I’m learning new ways to use it every day.

    Regarding different SVN options – I haven’t worked with anything but Tortoise SVN so can’t really give a comparison there. The Viget designers work on Macs and could not use Versions because of a conflict on our servers so firing up VMWare was the best way for us to use SVN. As you can imagine, using VMWare for all our SVN tasks was a real pain and resulted in permission issues on the files and lots of other strange bugs.

    I did use the command line exclusively for SVN for one project, but found that I REALLY missed having a GUI. Using a combo of GitX with Terminal is much easier for me. I like the visuals (like looking at where my local copy stands in comparison to the master copy) and the drag-and-drop commit area that GitX provides. And like Victor mentioned, Git is very fast.

  • http://flashartofwar.com Jesse Freeman

    This is a great intro. As a Flash Developer team lead it is impossible for us work without version control. I have been advocating GIT for a while now but am still waiting for the Eclipse plugin to mature. We use FlexBuilder which is built on Eclipse and the annoyance of using terminal, the file system, an external gui and Eclipse to manage our code repo right now is not practical. Especially since SubVersion (Eclipse svn plugin) is very good at the moment. GIT really helps out in managing multiple checkouts at home, the office, a server’s deploy. That is why it is great that you are helping get the word out and help drum up some interests. I am always taken back by how many people don’t even use Version Control. Anyways keep up the good work, and I’ll be sure to follow your other tutorials.

  • http://www.przyroda.org.pl Sklep Zoologiczny

    Sounds pretty simple, will try!

  • http://www.irocon.com Alfero Chingono

    While Git sounds very appealing, I would also strongly recommend Dropbox. Definitely worth a try. I liked it so much, I ended up upgrading to to the paid version.

    https://www.getdropbox.com/referrals/NTEyMjM0Mjk

    Give it a try

  • http://www.cloudless.se Jocke

    Great article, but I think I will stick with SVN. And I really love TortoiseSVN so I don’t have to write commands everytime i want to upload something.

  • http://athinlayerofbs.com VictorA

    @Jocke

    TortoiseSVN is an excellent choice and hey, if it works…

    Just an FYI, there is a project out there to port TortoiseSVN to GIT on Windows…

    Check out

    http://code.google.com/p/tortoisegit/

    Cheers!

  • http://oddmundo.com Oddmund

    Just thought that I’d point out that the Git Talk by Linus Torvalds is a Google Talk, not a TED Talk.

  • http://AzadCreative.com Azad

    Brilliant piece. I was thinking of using Git for managing PSDs. Really helped me get started. Cheers.

  • http://luciddesign.co.nz Galen King

    Has anybody used Git as a replacement for Version Cue? We’ve been having major issues with Version Cue CS4 (http://luciddesign.co.nz/2009/1/5/major-problems-with-adobe-version-cue-cs4) and have given up on it. We’re now looking for an alternative as we’d like the benefits of version control in our team.

  • http://www.timecodestudios.com.au sunshine coast web design

    I use many tools for designing..

    These gifts are helpful for me.
    Thanks…

  • Martin Streicher

    O’Reilly Media will publish its Git book on 15 May. It’s an excellent reference for all expertise levels.

  • http://www.dalmenyonline.com tampa web design

    Git’s been really useful for us. Takes a bit of getting used to but the time invested in learning it is far made up for time having to re-work something when you overwrite it… another reason why version control is awesome.

  • http://devcheatsheet.com/ Tim

    More git cheat sheets – http://devcheatsheet.com/tag/git/

  • Björn

    Anyone experienced SmartGit?? Another Git gui for OSX.

  • Carol Kollm

    This is a great write-up and intro on GIT- for designers & others, with lots of useful info in the comments. Thanks Mindy!