Need a hand with tech consulting? I can help!
Learn more about how we can work via black.af .

Static Web Pages + Git = Awesome Deployment

Push to deploy. Like a touch-to-start car, but like for static Web pages.

:pencil: by Jacky Alciné Jacky Alciné :book: an development post :bookmark: git , jekyll , octopress , sites :clock7: written :eyeglasses: about 3 minutes, 675 words :link: Comments - 0 Mention(s) - Permalink

I’ve been having a lot of fun working with Octopress; working with it to make it as simple for me to use. Fortunately, this hasn’t been much of a challenge. With a bit of trial and error, I’ve even managed to abstract the act of static web page deployment without too much help! It’s possible to implement “Heroku-like” deployment. Towards the end, I even throw in a tip on how to do something similar to how Heroku might have deployment done as well!


By continuing from here, I’m going to assume that you either:

That’d allow for you to view changes real-time. Another assumption is that you’re familiar with Git hooks and the difference between the two. If enough confusion incurs, I might make a separate post about it.

Setting up the Remote Environment

First, make sure you got Git up and running on your system.

$ git --version
git version

Secondly, ensure that you can SSH as a user or at least provide yourself with access.

Next, set up the bare repositories that you’ll be using to push your changes.

$ cd ~
$ mkdir -p ~/repos/swag
$ cd ~/repos/swag
$ git init --bare

We use the --bare option here to tell Git that we only want the Git-specifics (the index, configuration options, etc) on the server, nothing more.

Next, we go on to set up our hooks. We go back into our mighty console and execute the following:

# (from working directory ~/repos/swag)
$ cd hooks
$ vi post-receive

With in the post-receive hook, we enter the following content:

You’ll want to change the values of the following:

With this, you’ve fully set up your remote enviroment. Now, you can continue off back to your local development machine and continue.

Setting up the Local Environment

On your awesome local machine, the act of instant deployment begins. Now, the best part about this is that you can do this with an existing Git branch that has static files or work on this with from scratch if you’re just starting out.

In a new directory, clone the repository from the server, add some files, commit and push; the typical personal Git flow.

# (from an awesome folder)
$ git clone joe@acme.net:~/repos/swag swag
# You might get a warning about cloning an empty repository; it's fine.
$ git add .
# Move in the files from the old repository (if it exists)
$ mv file1 ../files
$ git add .

$ git commit -m "Swag 1 point"
$ git push

After you push, you might notice information about checking out done in your remotes. That’s the post-recieve hook updating the code in reaction to the branch that you pushed.


I have to admit, in the Gist shown above, there’s a few problems I’m going to have to adapt this post to show.

  1. Single branch push support - If you pushed using git push origin --all or whatever remote you specify, currently this hook would not be able to notice such a push, or rather, parse it properly. I’m experimenting with a clean way to do this.

  2. Merging issues - If, for some reason, there was a merging problem, there’s no way for you to tell, from what I know.