A Git Hook for Deploying Static Websites

With Kenny Luong telling me about his ability to make local edits to his personal websites and remotely push his changes to his Webfaction server through git, I thought I would give it a try for my personal website. With help from Totoid, I was able to implement this time-saving tool to make git pushes into a remote repository with a detached work tree where a post-receive hook runs a git checkout -f.

Setup On Your Local Computer

First I created a local respository titled joshuatrivera and initalized a git repository with a index.html file.

$ mkdir joshuatrivera 
$ cd joshuatrivera
$ git init
$ echo "Hello, world!" > index.html
$ git add index.html
$ git commit -m "First commit"

Performing the Web Host Setup

In webfaction, I needed to create two applications: a git app and a app to hold my website source code.

1. Setting Up Applications In WebFaction

Under applications I created an Application named Git with the App Category Git and App type set to the default Git 1.7.4.1. Next I create an Application for my personal website joshuatrivera with the App Category set to PHP and App type to the default Static/CGI/PHP-5.5.

2. Creating The post-receive Hook In The Git App

When I ssh into my WebFaction and visit the webapps folder, I see the two applications I created Git and joshuatrivera. Then I created a bare .git folder within the git app to generate the post-receive files used to update files in joshuatrivera.

$ cd git/repos
$ mkdir joshuatrivera.git 
$ cd joshuatrivera.git
$ git init --bare

This creates the necessary files and folders for our git setup. Inside the joshuatrivera.git folder we just created, there is a hooks folder where you will create a file named post-receive where the scripts will go.

$ cd hooks
$ vi post-receive

I added these lines in the post-receive file I just created and opened

1 #!/bin/sh
2 GIT_WORK_TREE=/path/to/webapp git checkout -f master

For my case, path/to/webapp for me was /home/doswah/webapps/joshuatrivera. Then I needed to provide the necessary permissions so the post-receive script can write to the appropriate file. So after creating the post-receive file, type

$ chmod +x post-receive

Connect To Post-Receive File Through SSH

After that setup in our WebFaction setup, now we need to create the functionality I wanted on my local machine. I created a remote to the .git repository I made in WebFaction.

$ git remote add joshuatrivera
ssh://<webfaction_login>/home/doswah/webapps/git/repos/joshuatrivera.git
$ git push joshuatrivera +master:refs/heads/master

In my case, my is doswah@web351.webfaction.com . Now the files I push through the git push command will appear in the joshuatrivera application.

Updating My Website

Finally. Now when I make changes on my local machine, to update this to the WebFaction server I can just run

$ git push joshuatrivera

This transfers any pushed commits from my local repository where the post-receive hook will update joshuatrivera for me!

GitHub Setup

I then setup a GitHub repository then added a remote. Since I created a commit already, I made a commit to the master.

$ git remote add origin
git@github.com:Doswah/joshuatrivera.com.git
$ git push -u origin master