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?

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 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.

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

Git Clone

Let's clone the GitHub repo now.

git clone git@github.com:Your-User-Name/awesomeProject.git

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: http://demo.jeffrey-way.com/awesomeProject.

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:

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.

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 http://demo.jeffrey-way.com/awesomeProject/github.php.

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?