Grow your CSS skills. Land your dream job.

#101: Let’s Suck at GitHub Together

You are probably pretty aware of why using version control is a good thing. In case you aren't, I quickly go through that in this video. Then we get into the most basic thing we can possibly do: put a project onto GitHub. If you are like me, you don't particularly enjoy "the command line", but between that and a Mac GUI app, we manage to get it done.

Links from the Video:

Comments

  1. Seriously Chris, this has been the best explanation of how to use git and git hub. BIG thanks out to you for doing this.

  2. I loved the title for this, it convinced me to watch it!

  3. Tower is awesome. I’m not as versed at GitHub as I’d like get the command line down a little better…

    Now, if text editors will get on board with this and realize that many of us have graduated from subversion. (Are you alive Coda???) That would be awesome. ;)

    • Permalink to comment#

      +1
      “LIKE”
      Whatever it takes to make that happen.

      Come on Panic!

    • Chris I
      Permalink to comment#

      GitHub works fine with Coda. It is just not integrated into the IDE. Once you set up your GH repository and point it at your local site, you can commit changes to it via command prompts.

      Also if you are on a Mac (not sure about Win) you con download the GtiHub app.

      http://mac.github.com/

      Saved me a lot of time having to learn all those command line prompts. Been using it for a week now and it works great.

  4. I’ve been starting a new job for the past few weeks where they’ve required me to learn github in a sort of “trial by fire” method, which has been fun. I’ve been fortunate enough there to learn from someone much more experienced than me, who was able to put it into extremely simple terms. Here’s how he put it:

    Your local machine actually has two sets of files relating to your Git Hub repository. One set of files is the one you see, and one is the local master, which is the intermediary between the files you’re editing and the files in your Git repository. So basically, when you edit files and you’re the only one working on them and you only have one branch, your files are in three places: your local editing folder, your local master, and your repository. When you edit files and commit them, they go to your local master on your computer. When you push them, they go to the repository and I think they try to merge with the ones there. When you pull, the repository merges back down with your local files.

    When you commit, there are several categories of files: there are files you will be committing, files you won’t be committing, and files that only exist locally and aren’t tagged for committing. Files that you will be commiting will merge with your local master. Files you won’t becommiting won’t be merged with your local master. Files that only exist locally need to be told to be commited so that they will be sent to your local master when you commit.

    To specify which files should be included in a commit, you can use: “git add file path”. To add of the changed files, I use: “git add -A” for: “git add all”. If you don’t use “git add file path” to specify that a file needs to be sent to your local master, nothing in the local master will change.

    When you “git push”, the differences between your local master and the repository are merged in a new version. Anything you didn’t “git add” before you “git commit”(ed), didn’t get changed in your local master, and therefore didn’t get added to your repository. If you didn’t “git add” all of those files you moved into your new local folder, then when you “git commit”(ed) them, they weren’t added to your local master, and when you “git push”(ed), they weren’t added to the repository. That’s probably why you had a hard time sending them to the repository.

    Basically, “git pull”, change files locally, “git pull”, “git status” to see what’s going to be added and what’s not “git add” anything that’s not about to be added that should be, “git commit” once you’re set up with all of your “git add”(s), and then “git push”. Then, “git pull” and double check that everything went smoothly.

    When you “git commit”, add “-m” and then a message in quotes to specify what you changed in the notes on the commit like: ‘git commit -m “Rocked my socks off”‘, then you can “git push”.

    I hope that helps! It’s my third or fourth week of using git, so I may be wrong about some things, but that’s been working for me.

  5. Permalink to comment#

    Loved this tutorial! I have been in this “not sure if I can hack terminal and do Git” boat for a while and this gave me some hope that I am not alone. Thanks, great watch.

  6. matt
    Permalink to comment#

    Hey Guys, I can relate 100%, i too am a front end designer / developer. I was forced to learn git with terminal and its not that hard (you have to memorize maybe 5 or 6 commands for basic use). The all in one sync buttons on the gui’s (specifically github for mac) scares the hell out of me.

  7. Permalink to comment#

    Thanks for the video Chris! This might be helpful to know: after you’ve added your files and made the initial commit in Tower, in order to push it to GitHub, simply drag the local branch (‘master’) onto the remote item (‘origin’). This will “publish” the repository on GitHub (alternatively you can also select the local branch and then choose “Publish Branch” or “Push To” from the context menu) – so there is no need to head back to the command line.

    Once the branch is “published” you can use push/pull/fetch.

    • Permalink to comment#

      Thanks for that tip! I was having that exact same issue and this worked perfectly.

  8. This is great, I’ve been waiting for something like this in getting started with gitbhub. It’s a shame it weren’t more friendly, when I first looked into it, they didn’t have that “getting started” section so it was terribly intimidating.

  9. thnx chris
    i will show tut now ^^

  10. Okay, so Chris, if you made a detailed tutorial ( “All about Github” or something ), and if you kept updating it as you learnt new stuff about Github, I think it’d be cool!

    BTW, when you find out why the GitTower thing wasn’t working, you could post it in the introduction before the video so that we all know why things aren’t working when they’re supposed to, in case we get the same issue…

    I finally understood what Github was… Your tutorial was very, very easy to understand. Good job!

  11. Peter
    Permalink to comment#

    have a look at the ‘SourceTree’ client
    (better imho)

  12. Umm
    Permalink to comment#

    Everyone’s mentioning Tower. GitHub has a Mac app that works great and it’s free.

  13. Permalink to comment#

    What a brilliantly terrible tutorial. Personally I find terminal much easier than most GUI apps but that might be because I used Linux for the better part of 10 years and just recently moved to mac.

    • I’m a web developer just getting my very first Terminal experience this month. It was terribly intimidating at first, but now I actually love it. Especially in Linux, just being able to type a command and have everything done right away for me is extremely exciting and way better than having to unzip and install files every time. It’s not really that hard of a transition for a web developer. If I just think of it as coding in real time for my computer, suddenly it’s not so scary.

  14. I see you use tower, but if people want one that is free http://mac.github.com and it is great for new users, but if your a new user you should learn the git command line so when you do get a job you can use other remotes (or where the repos are hosted) but yea git is an amazing VCS for coding

  15. Thanks Chris! Seeing that someone like yourself has trouble with GitHub is all the encouragement I needed to put up my own first project. https://github.com/katieben/Hex-Color-Shader – Thanks for the nudge! :)

  16. We use a git repository for all development projects in my office. While at first it was 1 more new thing to learn – it is now an essential part of our daily activity. We can have 5-6 developers working on the same project passing code back and forth with very few issues ( of course there are some merges with conflicts that have to be sorted out) Github however seems weak – we just do everything in putty

  17. Dan
    Permalink to comment#

    Hey Chris,

    Thanks, this was hilarious (and helpful, of course).

    Kind of random question, but I noticed you had several browser icons on your taskbar at the bottom of the screen. Is that icon on the far left some kind of IE viewer for Mac perchance? IE testing is a constant pain in the ass for me because I don’t have a PC, and I hate Parallels.

    Thanks!

    -Dan

  18. John
    Permalink to comment#

    I still preferred the “slide to unlock” demo page when the CSS-Tricks logo was animating along with it :)

    I have completely ignored GitHub, I’m going to go explore it right now.

    Thanks for the recent screen casts, I (and many others) really enjoy them, sucks they don’t get all the traffic they deserve.

    Cheers.

  19. This video made me start using Git. I’ve had their official Mac app since the day it came out, but it’s just been sitting there as something I needed to learn when I had the time.

    I decided to push the theme I’m currently developing for my portfolio and blog to Github so I’d have version control. I tend to keep a lot of backup files when I experiment with new layouts, and it can get quite messy. This felt like a better way to do it.

    Though I haven’t quite wrapped my head around it yet(for instance I can’t seem to find a way to import an existing project to Github) this has been a great decision.

    Another great video, Chris. Thanks!

  20. AbyCodes
    Permalink to comment#

    That is one funny informative screen cast for beginners and an apt 101.

  21. Hey Chris,

    It looks like the first push via git tower failed because when you clicked push you had the “master (local branch,…” selected. To push your local changes to your remote github repo you’ll want to choose a remote branch from that dropdown list. It will be something like “origin/master (remote branch,…”.

    The second push via the terminal worked because you used the command “git push -u origin master”. The important part being “origin” which points to your remote github repo.

    The third push via git tower also worked because this time when you clicked push the dropdown had “origin/master (remote branch,…” selected already and the changes were successfully pushed to github.

    I’m no git pro but I hope that helps. If anything needs clarification please let me know.

  22. tobias
    Permalink to comment#

    I guess you could not push the initial commit after you cloned the remote repository because git wants you to “git fetch” before pushing anything to the remote. Have fun anyways.

  23. Permalink to comment#

    Great Screencast!!!

    btw. Nice dock icon next to the Trash (2nd from right) ;-)

    Greetings from Austria,
    Maxx

  24. Permalink to comment#

    Thank you, thank you, thank you! :D

    I now definitely suck at Github rather than having no friggin’ clue whatsoever.

  25. Permalink to comment#

    Very useful video, thanks, Chris. I think for a lot of developers Git is something we know we should be doing, but find the prospect of learning it either daunting or potentially tedious. As it’s not a very interesting subject, there don’t seem to be too many enthusiastic tutorials around, either – so thanks again.

    I don’t think I’ll ever get used to hearing the word “git” used like this. In my native British English, it’s a mild profanity! ‘You git’, ‘He’s a git’, etc…

    git [gɪt]
    n Brit slang
    1. a contemptible person, often a fool
    2. a bastard
    [from get (in the sense: to beget, hence a bastard, fool)]

  26. This is one great dive into Github tutorial Chris. Thanks for sharing your knowledge on this

  27. Great Screencast. I’m just learning programming – Rails, HTML and CSS. This is my first lesson about version controll.
    Thanks.

  28. kez
    Permalink to comment#

    kool, I’ll have another look at it.

  29. Permalink to comment#

    Thanks for the screencast Chris. I’m looking at using Github for my web design projects as well, and your video made my understanding grow immeasurably. The only problem is that I am on a PC and not Mac, but I found the equivalent programs.

    I’m not sure if you use Github for your web design, but could you post a video going through branches and tags and the like, assuming you use them as part of your workflow, I’m certainly interested in learning more.

  30. Jeremiah
    Permalink to comment#

    Hilarious. Thanks it helped.

  31. not sure if you’re still sucking at GitHub or not, if so, you should try the official mac app that GitHub put out, it makes everything as simple as it should be. I’ve been holding off on SVN and Git for like 5 years now because I can’t stand the idea of introducing all that command line nonsense into my workflow, and all the GUI’s I’ve seen for SVN still seemed pretty complicated to me… Using the GitHub GUI has been great though, I haven’t had to write a line of code in the command line and it’s really intuitive.

    brent
    @
    mimoYmima.com

    • Harry

      It’s interesting how so many developers on a social coding site haven’t still worked on a way to make it more user friendly. The official Github app still misses a tags feature, which is essential.

  32. Harry

    If github had something similar to this video, it wouldn’t intimidate so many front-end devs. Fortunately, you don’t have to go to the console to establish a git now if you check on putting the README file on github, and use their Mac app. I got gitbox at the Mac app store and it has more features that take most the coding away for something that should be much, much simpler.

  33. emrah
    Permalink to comment#

    Github’s own GUI is better than tower. I suck command line too. And with Github GUI i did’not even open terminal. I just used terminal for installing git system or whatever.

  34. Terry
    Permalink to comment#

    lol, MacNubs.

  35. John Nguyen
    Permalink to comment#

    I’m a complete beginner here; but what is more beneficial for an absolute beginner getting started with version control-github or beanstock?

  36. Permalink to comment#

    I think the reason why it didn’t work the first time with Tower is because you haven’t created a readme yet?

  37. Permalink to comment#

    Tried this for the umpteenth time. Though, being on Windows, I believe I’m a lost cause; half of this tutorial was useful, unfortunatetly the other half wasn’t and so I’m still stuck. Ugh.

  38. Maxime Beaudoin
    Permalink to comment#

    Glad to see that you play SC2 ! :D

  39. This is the most accurate portrayal of setting up and using GitHub I’ve come across yet.

    None of those other articles/videos include the ‘WTF’ stage, so they make you feel like a fool for not being able to follow along a simple ‘beginner’ tutorial. Hahaha.

    Thanks Chris! I realize now it’s not just me losing my mind in Terminal.

    We indeed suck at GitHub together.

  40. Hi Chris, thanks for the video. This is a good tutorial to use Tower and Git and starting with version control.

  41. Robin
    Permalink to comment#

    You Rock!

    Chris… BEST Git Tutorial Ever (Plus you’re friggin hilarious)! I hate GitHub and am used to using SVN but am being forced to learn it… you just made my day! THANK YOU!!!

    :)

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".