Hello! My name is Dan Eden, and I recently updated my workflow to include Git and GitHub. It’s made my work more portable, my workflow more secure, and helped me learn more about the command line interface, thus making me look awesome.

But what’s the point in looking and acting smart if you can’t help the rest of the world look and act smart too? There isn’t one. So I made this short tutorial on how to get Git and GitHub integrated into your workflow.

Need-to-knows

This tutorial is going to assume a few things. Namely:

Got all that? Excellent. Let’s get started. In the examples below, we’ll be adjusting our FTP-based workflow on an existing site to integrate Git and GitHub.

Step 1

Setting up repositories

First things first. We need repositories on our local environment, our GitHub account, and our remote website. The first two are easy.

  1. In GitHub, click the “Create a new repo” link. Give the repository a name (like example.com), a description, and choose whether to make it public or private. Private repos are definitely a good idea for client and personal work, but require a paid plan.
  2. On the next page, click “Setup in Mac.” GitHub for Mac will open, where you can choose a location for the repository (somewhere you can access it via your local server)

Great - now you can make changes on your local copy and it’ll sync up to GitHub. But we’re still missing the clever part - getting those changes from GitHub to the remote server.

So our next step is setting up the repository on the remote server. Let’s do that now.

  1. Open up a terminal and SSH into your remote server (ssh example.com)
  2. Navigate to the folder where you want the repository. In this example, the files are all in example.com/html/, so that's where we want our repo.
  3. Initialise a git repository with git init
  4. Add the GitHub repo as a remote with git remote add origin git@github.com:daneden/example.com.git
  5. Finally, add your files with git add ., commit with git commit -am "Initial commit" and push to GitHub with git push -u origin master (Note the -u flag which sets up tracking, meaning in future you'll only need to use git push)

If you’ve gotten this far, well done. After you sync your local repo in GitHub for Mac one more time, you’ll have identical copies of your site on your local server, remote server, and on GitHub. Give yourself a high five.

Step 2

.gitignore, WebHooks, and other smart stuff

I’m willing to bet that the files you now have three instances of combine to form some sort of database-driven web application. And I’m willing to bet you have a different database configuration on your local server than your remote. You want to tell Git to ignore your database configuration files so that you don’t end up with local database settings on the web, and vice versa.

Create a file called .gitignore inside your repository. In there, you can make a list of all the files you want Git to ignore. For instance, in WordPress you’ll want to ignore wp-config.php, so the contents of your .gitignore file might simply be:

wp-config.php

You can ignore files with a particular extension, and recognize files in previously ignored locations:

# Ignore these files and folders
wp-config.php
wp-content/uploads/*

# Ignore data and junk files
*.DS_Store
*Thumbs.DB

# Recognise these files in previously ignored locations
!wp-content/uploads/.htaccess

Commit and sync the repo, and it’ll go on up to GitHub too. But wait a second, we’re still missing that final step - getting our code from GitHub to the remote server. Well, we need one more file for that.

The final touch

Create a PHP file - the name doesn’t matter, just don’t make it easy to guess - with the following contents:

<?php
	`git pull`;

Commit, sync, then SSH back into your server and run git pull inside your remote repository.

Once you’ve done that, go to the Admin section of your GitHub repository and click on “Service Hooks.” Click on “WebHook URLs” and enter the URL for the script you created a few minutes ago.

Take a deep breath, then click “Update Settings.” Congratulations. You are awesome. From now on, any changes that you make to your Git repository - locally, remotely (with git push), or on GitHub.com will be pushed live to your site.

Step 3

Make this guide better

With any luck, this short guide has helped you to get Git and Github integrated in your workflow. But it was written by a designer (yuck! Am I right, developers?) who’s new to all this stuff. There are bound to be missing steps, typos, and downright stupidness in the information above.

Luckily, this entire guide is on GitHub, meaning that you can fork it and improve it for yourself and other people.

If you found this guide useful, (or if you hated it) please let me know by tweeting me. If you really liked it, you could share it on Twitter.