Deploy Jekyll with a Github Webhook

Jan 06, 2013

I use Jekyll to generate this site. I really like the way it works, but I quickly got tired of having to re-upload the entire site via FTP every time I made a change. So I decided to figure out how to make deployment a little easier.

What I learned seemed useful, so I thought I’d share. Here’s what we’re going to do:

  1. Initialize a local Git repository on our Jekyll site directory.
  2. Create a remote repository for our site on Github.
  3. SSH into our web server and clone the Github repo.
  4. Edit/Write our .htaccess file.
  5. Write a small PHP file to run git pull.
  6. Create a Github webhook that points to this PHP file.

Git & Jekyll

To begin, let’s initialize a Git repository on our existing Jekyll site directory. When doing so, be sure not to initialize it in the folder that Jekyll generates (by default, this is the _site folder) as every time it runs it will delete all of your .git files/folders.

The easiest thing to do would be just go up one folder, where all of the Jekyll source files are, and initialize there. This will create a bit of a hassle when we finally get the repo onto our web server, but we’ll solve that later with a bit of .htaccess magic.

Github

Not much to explain here. Create a repository on Github, and push your local repo to it.

Your Web Server

After you’ve pushed to Github, you’ll want to SSH into your web server. I use typical shared hosting from HostGator, and by default shell access is turned off. Fortunately for me, turning it on was as simple as going into my account settings.

Once you’re in, navigate to the directory you’d like to clone your repo. Personally, I chose to clone the repo into my public_html folder to keep things simple. When you’re there, go ahead and clone the repo.

.htaccess

Because our repo includes both the Jekyll source files and the Jekyll generated site, and because we are in a subdirectory of our public_html folder, we’ll need to redirect our domain. This is where .htaccess comes in handy.

If this file doesn’t already exist in your public_html folder, just go ahead and create it however is easiest.

Below is what to add to your file. I found the original here, and tweaked it a bit to make more sense for a Jekyll generated site.

Lines starting in a hash are of course comments and can be deleted from your actual file should you choose to do so.


# Do not change the line below.

RewriteEngine on

# Change YOURDOMAIN.COM to be your main domain.

RewriteCond %{HTTP_HOST} ^(www.)?YOURDOMAIN.COM$

# Change 'SUBFOLDERPATH' to be the path to the folder you will use for your main domain. For instance: /MYREPO/JEKYLL/_SITE

RewriteCond %{REQUEST_URI} !^/SUBFOLDERPATH/

# Don't change the lines below.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# Change 'SUBFOLDERPATH' to be the path to the folder you will use for your main domain.

RewriteRule ^(.*)$ /SUBFOLDERPATH/$1

# Change YOURDOMAIN.COM to be your main domain.
# Change 'SUBFOLDERPATH' to be the path to the folder you will use for your main domain.
# Followed by / then the main file for your site, index.html, index.php, etc.

RewriteCond %{HTTP_HOST} ^(www.)?YOURDOMAIN.COM$
RewriteRule ^(/)?$ SUBFOLDERPATH/index.html [L]

Ok. Almost there! We’ve got our repos set up and we’ve got our domain pointing to the right place. Most of the legwork is over with. The only thing missing yet is the final automation.

If we were to leave things as they were, every time we wanted to update our web server, we’d have to SSH in, navigate to our repo directory, and do a git pull. Which wouldn’t be terrible. But why not automate that?

PHP

The first step to automating that git pull is creating a PHP file on our server. I created a file called github.php, and added the following:


<?php `git pull`; ?>

That little trick comes courtesy of this article. I’ll let the author explain why it works. You can find the section which explains it about halfway down the page.

Once you have created this file, you’re going to want to place it in the same folder that you have pointed your domain to above. You also want to make it executable.

To do so, SSH in again (if you aren’t still) and navigate to the folder you placed the file in and run the following command:


chmod +x github.php

Replacing github.php with whatever the name of your file is. Now it will be executable.

The Webhook

This is the easy part. Back on Github, under your repo, open up the settings and select “Service Hooks” from the menu.

There will be a big list of available service hooks, we want to choose “Webhook URLs”. Once selected, simply put in the web address of the PHP file you created above. There is no need to specify the entire path here because our domain is being redirected.

For example: http://www.YOURDOMAIN.com/YOURFILE.php

And that’s it! Now every time you push changes from your local machine to your Github repo, the webhook will fire and your server will run the PHP file, which will execute a git pull. And your server will be up-to-date!

These last two sections should really be credited to Jeffrey Way for his excellent article on Nettuts. Again, it can be found here.

Credit should also be given to my developer buddy Jesse for helping me out along the way.

I hope this helps!