Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 18 2011


The Perfect Workflow, with Git, GitHub, and SSH

In this lesson, we’ll focus on workflow. More specifically, we’ll use the helpful GitHub service hooks to automatically update a project on our personal server whenever we push updates to a GitHub repo.

Prefer a Video Tutorial?

Press the HD for a clearer picture.
Subscribe to our YouTube and channels to watch more screencasts.

Step 1 - Create a Git Repo

We certainly need some sort of project to play around with, right? Let’s do that right now. Using which ever tool you prefer (I’d recommend Structurer), create a new directory, called awesomeProject, and add an index.html file. Feel free to populate this with some gibberish markup for the time being.

With our test directory in place, let’s create our first Git commit.

If you’re unfamiliar with Git, I highly recommend that you first review “Easy Version Control with Git.”

Open the command line:

cd path/to/awesomeProject
git init
git add .
git commit -m 'First commit'

Those familiar with Git should feel right at home. We’re creating a Git repo, adding all the files to the staging area, and are then creating our first commit.

Step 2 - Uploading to GitHub

The next step is to upload our project to GitHub. That way, we can easily call a git pull to download this project from any computer/server we wish.

Again, if you’re not familiar with GitHub, and haven’t yet created an account, read Terminal, Git, and GitHub for the Rest of Us.

Begin by creating a new Git repository.

Create a Git Repo

Next, you’ll need to fill in some details about your project. That’s simple:


And finally, since we’re already working with an existing Git repo, we only need to run:

git remote add origin
git push -u origin master

With that out of the way, our awesomeProject is now available on GitHub. That was easy!

Step 3 - SSH

Now, we certainly need some sort of live preview for our project, ideally stored on our own server. But this can be a pain sometimes. Push your updates to GitHub, login to your server, manually transfer the updated directory, etc. Granted, this only takes a moment or so, but when you make multiple changes through out the day, this can quickly become a burden.

But one step at a time. We’ll tackle this dilemma in Step 4. For now, let’s simply pull in our Git repo to our server. To do so, we need to SSH in.

Depending upon your host, your SSH credentials will vary slightly. Search Google for “your-host-name SSH,” and you’ll surely find the necessary instructions. Once you’re ready, let’s move along:

We’ll use my personal server as an example:

<enter your host password>

And with those two lines, we’re in!


Next, we cd to the parent directory of where we wish to store awesomeProject. For me, this will be: cd domains/ Of course, modify this according to your own directory structure.

Git Clone

Let’s clone the GitHub repo now.

git clone

Give that command a few seconds, but, before you know it, that directory is now available on your server, and, in my case, could be viewed at:

Step 4 - Creating a Connection

The inherent problem at this point is that there’s no specific connection between our GitHub repo and the directory stored on our server — at least not an automated connection. For example, if we update our source files on our local machine, and then push the changes to GitHub:

git add index.html
git commit -m 'Added photo of dancing chicken'
git push origin master

These changes will certainly not be reflected on our server. Of course they won’t! In order to do so, we must – once again – SSH into our server, cd to the awesomeProject directory, and perform another git pull to bring in the updated source files.

Wouldn’t it be great if, every time we pushed updates to GitHub, those new source files were automatically updated on our live preview server?

As it turns out, we can do this quite easily with GitHub service hooks.

GitHub Service Hooks

You can access this page by pressing the “Admin” button from within your GitHub repo, and then clicking “Service Hooks.” The “Post-Receive URL” option will instruct GitHub to send a POST request to the specified page every time you push to your GitHub repo. This is exactly what we need!

“We’ll hit these URLs with POST requests when you push to us, passing along information about the push.”

To make this work, we’ll need to create one more file that will handle the process of performing the git pull. Add a new file, called github.php (or anything you wish – preferably more vague), and add:

<?php `git pull`;

So now you’re thinking: “Jeff’s gone crazy. You can’t put a Bash script into a PHP string.” Well…yes you can, once you realize that those aren’t single quotes above, they’re back-ticks.

When you wrap a sequence in back-ticks, in PHP, it’ll be treated as a Bash script. In fact, it’s identical to using the bash_exec function.

Save that file, and upload it to the awesomeProject directory on your server. When finished, copy the url to that file, and paste it into the “Post-Receive URL” textbox. In my case, the url would be

With this in place, every single time you push to your GitHub repo, that file will be called, and the awesomeProject directory on your server will auto-update, without you needing to move a finger. Pretty nifty, ay?

You Also Might Enjoy:

March 20 2011


GitHub Pages and Auto-Updating Demos FTW: New Premium Tut

In this Premium tutorial, we’ll learn a handful of neat tricks. Firstly, we’ll learn how to use the new online editor, Cloud9, to access, edit and update a GitHub account from any computer in the world. Next, we’ll review GitHub pages, and how they can be used to dynamically display live previews of your repositories. Finally, we’ll add in another layer of convenience, and redirect these GitHub live previews to our custom domain.

Sign up for Tuts+ Premium to view this video tutorial, as well as hundreds of other advanced tutorials and screencasts.

Still Confused?

Okay, well think of it this way: wouldn’t it be cool if, every time you updated a GitHub repository, a live preview demo was updated simultaneously? Currently, you may push the files to your GitHub account, and then, again, upload the same files to your web site, via FTP. If you frequently make updates to projects and demos, this can be a pain in the butt. That’s why, in this lesson, we’ll learn how to kill two birds with one stone. Every time you push an update to your repository, the preview on your own domain will dynamically update as well. Let’s dig in!

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Sponsored post
Reposted bySchrammelhammelMrCoffeinmybetterworldkonikonikonikonikoniambassadorofdumbgroeschtlNaitliszpikkumyygittimmoejeschgeKameeel

January 21 2011


The Hotlist – Edition 3


W3C Rocks a new logo

Screen shot 2011-01-21 at 12.32.05 AMThe W3C hopes to rally HTML5 & CSS3 and other things behind the new HTML5 shield.


Neve Inspired

Screen shot 2011-01-21 at 12.50.32 AM

Neve Inspired, an online boutique for innovative children’s clothing by Charleston, S.C. based design team Kris and Bob Galmarini. Each piece is born from their passion to create, do what they love, while working together, and dressing their kids and yours in clothes as fun and hip as they are.


On the Scene… Military Shirts, Florence & Milano


Military shirts are in this year. An awesome photo from The Sartorialist. This guys glasses rock.


The Personal Page


This simple one-page website from Naz Hamid (weightshift)is a way for people to have a very quick and easy personable website that aggregates your activity and positions a simple logo, a portrait and some description text in a nicely-formatted manner. This is licensed under the MIT and GPL licenses.


The Heads of State – From the desk of…


An awesome inside look a the workspace of The Heads of State. “Our office is on the second floor of an old storefront building in the Old City neighborhood of Philadelphia. We’re surrounded by Ben Franklin impersonators giving walking tours of the Betsy Ross house and Independence Hall. The studio is pretty jammed packed with our books and paper scraps and ephemera. We have all sorts of design objects around including presidential busts, globes, old books, and a vintage blue collar thermos collection. We also run our online store from this space so our poster and print archive is stored here as well as our mail room. It gets pretty chaotic at times but it has the great organized chaos of a workshop.”


Should I Work For Free? Jessica Hische

Screen shot 2011-01-21 at 2.10.19 AM

An awesome little way to know if you should work for free or not on your next project from the wonderful Jessica Hische.


IWC Schaffhausen

Screen shot 2011-01-21 at 2.14.07 AM

The site marks another excellent partnership with our friends at Undercurrent and has resulted in a beautiful experience that aims to set a new standard for luxury online. With rich interactive features, editorial content presented in clean, concise layouts and extraordinary attention to each watch, offers fans everything they expect from the brand. Further details on the project are available on here.


Feel free to send us a tip if you think you’ve got the hot stuff. ‘

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)

The Hotlist – Edition 3

October 14 2010


A Visual Introduction to Git: Premium Screencast

Many of you might be aware that Nettuts+ recently launched the book, “Getting Good with Git.” However, sometimes, when it comes to scary code and the command line, a visual guide proves to be more helpful for some (including me). If you fall into this camp, we’ve asked the author, Andrew Burgess, to also prepare a screencast, exclusively for our Premium members on the subject! Gain access to this screencast series, as well as many others by becoming a Premium member.

And, everyone: don’t forget to download “Getting Good with Git” for free…but only for the rest of October!

A Visual Introduction to Git

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

October 05 2010


Getting Good with Git: Free eBook!

Those of you who follow us on Twitter may have heard that, for the last few months, we’ve been preparing an exclusive ebook on Git (the most requested topic). I’m pleased to announce that the project is now complete, helmed by assistant Nettuts+ editor, Andrew Burgess! For the entire month of October, “Getting Good with Git” is 100% free to all.

Git is confusing — really confusing! Make things easier on yourself and grab this free ebook.

Getting Good with Git

So, you want to learn about Git, the fast version control system? Then you’ve come to the right place! In this eBook (free for the month of October! Usually $10), I’ll be guiding you through the sometimes-confusing waters of using Git to manage your development projects. The eBook clocks in at a solid 104 pages.

- Andrew Burgess

What’s Inside?

Chapter 1: Introduction to Git

  1. What is Git? 7
  2. Why Should I Use a Version Control System? 9
  3. Where did Git Come From? 10
  4. Why Not Use Another Source Code Manager? 10
  5. Summary, 11

Chapter 2: Commands

  1. A Warning, 14
  2. Another Warning, 14
  3. Opening the Command Line, 15
  4. What You’re Looking At, 16
  5. Commands, 17
  6. Advanced Command Line Skills, 24
  7. Summary, 25

Chapter 3: Configuration

  1. Installing Git, 28
  2. Configuring Git, 33
  3. Using Git, 34
  4. Referencing Commits: Git Treeishes, 51
  5. Summary, 52

Chapter 4: Beyond the Basics

  1. Git Add Revisited, 55
  2. Git Commit Revisited, 65
  3. Git Reset, 66
  4. Git Checkout Revisited, 67
  5. Git Diff, 68
  6. Git Stash, 70
  7. Working with Remote Repositories, 71
  8. Git Rebase, 78
  9. Summary, 81

Chapter 5: GitHub

  1. What is GitHub? 84
  2. Signing Up, 84
  3. Tour of the Tools, 87
  4. Creating a GitHub Repository, 92
  5. Forking a Repository, 96
  6. Summary, 101

Appendix A: More Git Resources, 102

Appendix B: Git GUIS, 104

Free Download: “Getting Good with Git”

The Tuts+ Marketplace

January 15 2010


Terminal, Git, and GitHub for the Rest of Us: Screencast

So you’ve read the tutorials, and still can’t manage to figure out this stuff? What is Git – and why do we even need it? If you fall into this category, much like I did at one point, I’ve recorded a video tutorial that hopes to teach you exactly how to get started. Rather than feeling your eyes blur over as you attempt to comprehend code snippets like “git push origin master,” relax, and let me explain it to you as best as I possibly can!

Video Exporting. Please watch video here.

Other Viewing Options

Further Reading

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

January 11 2010


Getting the Hang of GitHub

A project is always more fun when you’ve got friends working with you, but how can do it when working on a coding project? I’ll keep my keyboard to myself, thanks.

Enter GitHub. With this web service, you can share your coding projects and collaborate with ease!


This tutorial will assume that you’re familiar with Git, arguably the best distributed version control software there is. Already lost? Don’t worry: read my introduction to Git to get up and running. Then come on back here and find out all about GitHub, the social network for developers!

Getting Started

Of course, you’ll need a GitHub account if you’re to experience any of the social coding goodness. Let’s do that right now. Head over to the GitHub website and click “Pricing and Signup” at the top.

Creating an Account

GitHub Home Page

There are several different plans you can use, depending on your needs. Right now, the free “open source” account is all we want; so let’s click “Sign Up.” It’s your standard sign up page; enter your name, email address, and password. You’ll also need an SSH public key; I explained how to get one in my previous article:

Open up your terminal and type this: ssh-keygen -t rsa -C "". The t option assigns a type, and the C option adds a comment, traditionally your email address. You’ll then be asked where to save the key; just hitting enter will do (that saves the file to the default location). Then, enter a pass-phrase, twice. Now you have a key; let’s give it to GitHub.

First, get your key from the file; the terminal will have told you where the key was stored; open the file, copy the key (be careful not to add any newlines or white-space).

Once you have the key, just paste it into correct field. Like it says, you don’t have to do this now; you can add a key later. Then click the button to agree and sign up.

Warming up to the Interface

When you first log in, you’ll see the dashboard; it’s something like this:

Signed in to GitHub

In the top right corner, you can see a toolbar with options for controlling your account. There are also some links for getting around GitHub, as well as the search box.


The main panel offers a number of actions; later, it will be used to keep you up to date on projects you’re interested in. And on the right of that, your own repositories will be listed. Remember, in Git, repositories are the containers that hold all the code and history related to one project.
When you have a chance, browse around the Account Settings, It’s all what you’d expect, so I won’t go over it; but if you plan to be an avid githubber, you should probably fill out your profile and see what else is in there.

It’s all about Repos

Really, the whole purpose of GitHub is making Git repositories available to the world; therefore, it follows that working with repositories (or repos, as they’re often called) is something you should be comfy with.

Creating a repository is pretty simply. On the dashboard, click “New Repository” on top of your repo list (which is currently empty).

New Repository Button

Three textboxes await you here; your repository will need a project name, a description, and the URL for the project’s website. If you’ve upgraded to one of the paid plans, you can choose whether this should be available to the public or not. When you’re done, hit “Create Repository.”
GitHub will now give you instructions for hooking the GitHub repository up to one of your local Git repository. If you’re familiar with Git, this should be pretty old hat to you. The important part is the last two lines of either the “Next Steps” or “Existing Git Repo?”

  git remote add origin
  git push origin master

The git-remote command allows you to track other repositories and keep them “synchronized” with your local one. In our case, we’re tracking the repository on GitHub from our local repository. So, that first line is adding a remote; we’re calling it “origin” and giving it a URL. This is a private URL that only you can use to read and write to your GitHub repo.

In the second line, we’re using the git-push command to send everything in the master branch out to origin (our GitHub repository). Notice that none of the coding or project work (creating files, etc) is done on GitHub. That’s all local work; you should work on your project just as you would a plain vanilla local repo. However, you’ll regularly push it to GitHub with that second line.

So let’s say you’ve been working on a project for a while and you’ve been pushing your commits to a GitHub repo. What project meta-data can we explore on GitHub? Let’s look at the jQuery repository.

jQuery's GitHib Page

See that toolbar near the top, just under the project name? These options allow us to drill down into some of the Git information that we uncovered in the command line last time. Right now, we’re on the source tab. It starts with drop-downs for the repo branches and tags; use these to view the different branches or tags. There’s also some project meta-data; we have the project name, URL, and cloning URLs (These URLs are read-only).

Jquery Meta

Then, you can see the information about the latest commit: author, time, comment, and hashes. Under that, you’ve got a file browser, which shows you the latest versions of all the files in the project, as well as their age and the message of the last commit they were changed in.


If the project has a readme file, it’s displayed under the file browser.


Let’s switch to the commits tab at the top and see what it holds.

Commit History

As you might expect, we can view a backlog of commits on this project. Clicking the commit hash (on the right of the commit entry) will let you view what was changed in the commit.

Commit Details

Green lines (prepended with a ‘+’) are additions and red lines (prepended with a ‘-’) are deletions.
You can subscribe to the commit history RSS feed of any repo if you want to keep track of it.


Network Graph

The next tab is the network tab; this shows you a graphical representation of the repository’s history. This graph is drawn from the perspective of the committer ‘jquery.’ Each commit only show up once, so commits not on jQuery’s line are not in jQuery’s repo. This way, we can see what commits other people have made that we don’t have. It’s incredibly useful, but somewhat confusing if you’re not grokking git all the way. If you want to know more, check out GitHub’s blog post about it.
The network tab also offers a list of members (people who have forked the repo) and a feed as well.



The graphs tab offers you a number of different view of your project from a graphical perspective. It’s really just meta-data, but it may offer some interesting insights:

Network Graphs

Fork Queue

If you’re viewing a repository you own, you’ll see another tab, Fork Queue. This shows you the same information you saw in the network graph, but differently. From here, you can choose which commits to apply to your repository, on whichever branch you want. For more on the fork queue, check out this post and video on the GitHub blog.

You can enable three other tabs from the repo admin panel: Wiki, Issues, and Downloads. These allow you to create a wiki, track bugs in your project, and offer downloadable copies of your repo. They are all pretty intuitive.

The Social Side

Like the tagline says, GitHub is all about social coding. Although we’ve already seen a few of them, it’s time to check out the rest of the social features of GitHub.

Exploring Other Repositories

If you ever have some free time and want to dig into a coding project for a while, GitHub is the ideal place to go. Let’s see how we can find interesting projects.
Start by clicking the “Explore GitHub” to the right of the search box. We’ve got a couple of tabs to choose from here:

  • Repositories
  • Search
  • Timeline
  • Languages
  • Changelog

For me, the most interested is the languages tab; choose your language and check out the most watched and most forked projects for that language.

JS Repos

So let’s say you’ve found a project you’re interested in; what next?

Interacting with other repositories

Social Tools

When viewing a repo, the social tools are underneath the search bar. Starting at the right, you can see how many people have forked the project, and how many people are watching it. We’ve been talking about forking and watching, but it’s time to get some formal definitions on the table.

  • Forking a project means that you’ll get a copy of that repository that you can play with all you want.
  • Watching a project means that any actions on it will show up in your news feed, on your dashboard.

I’m taking a rabbit trail, but you can do more than watch projects; if you find particularly talented developers, you can follow them to track their every keystroke. Just click the follow button on their profile page.

Resig's Profile

You can also send them a message if you’d like. Now we’re talking social network!

Back on the social toolbar, the next button (moving left) predictably lets you download the source code of the project. The next button let’s you fork the repo, and the last one let’s you watch it (you saw that coming).

If you’re looking at a repository of your own, there will be two other buttons in the row: ‘Pull Request’ and ‘Admin.’ We’ll come back to ‘Pull Request’ in a minute; feel free to look around the admin panel.

Admin Panel

It should be obvious most of the basic features are:

  • change your default branch
  • create a project page (we’ll come back to this)
  • turn those extra tabs (wiki, downloads, issues) on/off
  • rename or delete the repo

When you’re done, click your project name at the top to return to the source view.

Our scenario before introducing the social tools was that you had found a repo you want to work on. The first thing to do is fork the project; just click that ‘fork’ button. Now you’ve got a copy of the repo in your account. Let’s clone the repo to your computer, using your private clone URL. Doing this automatically sets up a remote called origin, as we discussed earlier. That origin is not the original project you forked (you can’t write to that) but your forked copy of it. You do need to set up a remote for the original project, however; do that with this command:

git remote add upstream [original project's public clone URL here]
git fetch upstream

That last line gets the latest branches from the upstream remote and stores them in tracking branches.
Now’s the time to begin coding. As you make commits, they’ll show up the the original project’s network graph, because they aren’t in that repo. They’ll also show up in that repo’s fork queue, so the owner can pull them in if he/she likes them. However, you can request that they be pulled in. That’s what the pull request button is for: you can send the owner of the original repo a message.

Pull Request
Pull Received

It’s nothing fancy; really, it just lets them know that they should check out their fork queue.
But what if they’ve made changes to the project since you forked it? It’s best practice to integrate their changes into your repo before requesting they pull in your changes. You can easily get their updates using that upstream remote you made! Just run this command:

git fetch upstream master
git merge upstream/master

As we just saw a moment ago, the fetch command gets the latest content from the specified remote, in this case our upstream remote. Also, we’re specifying that we only want the master branch. The second line merges the specified branch with the one we’re on. We’re on the master branch of our local repo, and we want to merge our tracking branch upstream/master.

Note: If this tracking branch talk is confusing you, check out this article on Basically, tracking branches are simply branches that keep track of where other repos with the same project are in relation to your repo. To see all your branches run the command git branch -a. Here’s what I get for a forked repo:

git branch -a

If you’re lazy, you could run the command git pull upstream master. This does both the fetch and merge commands at once. However, this could cause merging problems, so stay away from it!
Once you’ve merged the changes, you can request a pull with peace of mind, knowing your fork is up to date with the upstream repository.

User and Project Pages

Github gives you a rather unique ability to create a personal website from a GitHub repository. My GitHub username is andrew8088, so if I created a repo named, it would be published at Simple as that!

You can also create a site for a project; this is a bit more complicated, but GitHub makes it easy to get a generic, single page explaining your project. Click that admin button in your social toolbar. Then click ‘Generate Your Project Page’ under ‘Repository Information.’

project page

Then, just fill in all the fields:

project page form

And click “Create Page.”

If you want to customize your page further or add pages, you can follow the advanced instructions at the GitHub Pages Help.

When it’s only a Snippet

Ever been talking code with a friend online and wanted to share a snippet? It happens to all of us, and GitHub offers a quick way to do it. It’s Gist. They say it best:

Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.

Click the Gist link to the left of the search box, or go to You can simply paste in your snippet or type it all in. Give it a file name and let them know what language your writing (for syntax highlighting). Then click ‘Create Public Gist.’ Copy the URL and share!


Keeping in the Know

Any social network can become addicting, and GitHub is no different. If you want to keep track of your repos on the go, check out iOctocat, the GitHub app for iPhone and iPod Touch.



Well, it’s been a whirlwind tour, but I hope you’re feeling more familiar with what could be the best code hosting/sharing site on the web! Ever used GitHub? Have a better option? Hit the comments!

Write a Plus Tutorial

Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at

Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.

Write a PLUS tutorial

Tags: Other git github
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...