Using Git to Maintain Your Website

Intro

git is an open source version control system written by Linus Torvalds. It’s main goals are to be highly decentralized and dramatically more efficient than its competitors.

The way I use git is to maintain this website. Yes, I know git isn’t supposed be used for such a menial task, i.e. one developer and one copy of the code, but it works better than the alternatives for me, so I use it.

The goal of this article is to illustrate how to make changes to a local copy of a website’s code at home or on a laptop, and then have those changes take effect on a web host on the Internet. Here’s how to set that up.

Installation

Simple.

# Gentoo
emerge git

# Debian/Ubuntu
apt-get install git-core

# RedHat/Fedora
yum install git

Initial Setup

You’re going to enter into your web directory on your server and initialize your git repository.

# enter your web directory
cd /$wherever/html/

# initialize the repository
git init

# recursively add all the contents to the repository
git add .

# commit your initial import
git commit -a -m "The Initial Import."

Then back out to your html directory’s parent directory and clone your new git-ized web root.

# back out to where you can see your html directory
cd ..

# clone your web directory into html.git
git clone --bare html html.git

You’ve now initialized your repository, added your entire directory (recursively) to that repository, made your initial commit, and then created a bare git clone of your webroot. That git directory (html.git) is the key piece to the whole process.

Getting a Copy to Your Development Environment

1. Go to your development system
2. Install git
3. Run the following from your preferred development directory:

git clone ssh://yoursite.com/path/to/html.git

You now have a complete local copy of the server version of your website.

Make Your Web Directory a Clone of Your Git Directory

Remember, your html.git directory is the key here, not your existing html directory, so you need to swap them out. Back out to the directory that your html and html.git directories are in, then:

# move html out of the way and replace it with the clone
mv html html.backup; git clone html.git

This puts a clone of your html.git directory in the current directory, which will, of course, be named html. This is why we had to move the old html directory out of the way.

Enabling Auto-Updates Upon Pushing Changes From Your Dev Box

Ok, one last warning on offending the git Gods. This is not how git was meant to be used. This hack we’re doing is like taking a space shuttle to 7-11. What we’re about to do is push changes we’ve made locally immediately to our “production” website. This is great for home use but horribly lame for any type of professional application. As long as you know the difference then there’s no problem whatsoever in doing things this way.

Let’s proceed.

git has the ability to execute instructions at different stages of the update process using something called hooks. There are pre-commit hooks, post-commit hooks, and the one we’re concerned with is the post-update hook. So this is the hook that’s run after changes are pushed to the repository in question.

Add this to your post-update hook within your html.git directory.

cd ../htdocs
env -i git pull

Then make that hook executable:

chmod +x post-update

Making Changes in Your Dev Environment

Now, to edit your website, just open a new TextMate Project (you do use TextMate, right?), and drag the html directory you cloned into the drawer. Your whole web structure will be there, ready for you to edit.

1. Make changes like you normally would
2. Save your changes
3. Run the following script using a shortcut, e.g. (QuickSearchBox, TextMate, etc.):

# This is for an OS X box
cd /Users/daniel/Development/html/
git commit -a -m "Another update."
git push

This is basically running the two important commands for pushing changes to the remote git repository: commit (note your mark point(you can roll back if you want)) and push (send them to the server).

[ Depending on your OS and git installation, you may have to chmod +x your hooks on your local box before you can proceed ]

Fin

Now, as soon as you push a change the post-update hook will activate and your changes will seamlessly be pulled into your live web directory.

And if you change something on the server side the process works basically the same: git commit and git push, then git pull on your dev box to sync back up. You can also script that if you want.

The key is that both your dev box and your new webroot are both clones of the central git repository, which is at html.git one hop back from your webroot (html), and that’s the pivot point that’s getting updated when you make changes in each direction (see the image at the top of the post).

If you can think of anything else to add, or know of a more efficient way of doing this let me know. ::

Resources

• Many thanks to Jason for helping me get setup using git. He’s the one who walked me through the whole process when I first started doing this, and still helps out when I get stupid.
• Another good write-up on this topic by Abhijit Menon-Sen can be found at http://toroid.org/ams/git-website-howto. It often helps to read multiple explanations for something. ::