We hope you find this tutorial helpful. In addition to guides like this one, we provide simple cloud infrastructure for developers. Learn more →

How To Deploy Jekyll Blogs with Git

PostedSeptember 12, 2013 34.6k views Deployment Git Ruby Ubuntu


Jekyll is a tool that generates static HTML sites from a directory of Markdown files. This is advantageous since the resulting web site is fast, portable, and easy for servers like nginx to concurrently serve to many users without resorting to caching.

The most popular way to use Jekyll is to keep your site's files in a Git repository, edit them locally, and use git push to deploy the site to your VPS.

Local Installation

If you haven't already, you need to install Ruby, Jekyll and Git on your local machine.

For Ruby, you can install the latest release of Ruby 2.0 with RVM using a single command:

curl -L https://get.rvm.io | bash -s stable --ruby=2.0.0

Once that's done (it will take several minutes), log out and log back in. Installing Jekyll is a simple matter of grabbing the jekyll gem.

gem install jekyll

Now you need Git, which you can download from the official website or use a package manager to install. (Mac users can use Homebrew, those on Linux probably already know what they're doing...)

Creating a Blog

The Jekyll website has a quick start guide to using the tool, as well as thorough documentation. We'll cover the absolute basics here, but for day-to-day usage and customization, you should refer to their guides.

Navigate to wherever you want to store your blog files on your local machine, and create a new blog like so:

jekyll new awesomeblog

This will create an awesomeblog directory containing the configuration files, posts directory and other required bits. Now you can change to that directory and fire up a server process to preview it in your browser.

cd awesomeblog
jekyll serve

Jekyll will build your blog, and after a few seconds you should be able to visit http://localhost:4000 in your browser.

Now let's initialize a Git repository in the same directory, so any changes you make can be tracked.

git init
git add .
git commit -m "Initial commit"

Prepare the VPS

For brevity's sake, I will assume you already have a VPS running a web server like nginx or Apache. (I'll also assume your public HTML folder is /var/www, though it may be different depending on your distro and configuration.) If you haven't done this yet, refer to the many available tutorials on nginx.

First, install Git on your VPS. In the case of Ubuntu or Debian, you install the git-core package with the following command.

apt-get install git-core

If you're using another distro, this may vary. Fedora, for example, uses yum install git-core instead.

You'll also need to install Ruby and Jekyll, too. The same as before:

curl -L https://get.rvm.io | bash -s stable --ruby=2.0.0
gem install jekyll

Second, change to your home directory and create a new "bare repository" to deploy to.

cd ~/
mkdir repos && cd repos
mkdir awesomeblog.git && cd awesomeblog.git
git init --bare

Following that, we need to set up a post-receive hook. This is a shell script that Git runs when files are pushed to a repository. Create it like so:

cd hooks
touch post-receive
nano post-receive

Now paste in the following script, adjusting the variables accordingly. GIT_REPO is the path to the bare repository created in the previous step, TMP_GIT_CLONE is a location where the script will check out the files to and build the blog before copying them to /var/www. PUBLIC_WWW is the path where the final site will reside. In this example (assuming your web root is /var/www) the site would appear at http://example.org/awesomeblog, whereas it would appear at http://example.org if PUBLIC_WWW read /var/www instead.

#!/bin/bash -l

jekyll build --source $TMP_GIT_CLONE --destination $PUBLIC_WWW

Save the file by pressing control+O and hitting the enter key. Then give the file executable permissions.

chmod +x post-receive

Add a Git Remote

Back on your local machine, add a remote to your blog's Git repository.

git remote add droplet user@example.org:repos/awesomeblog.git

Now you should be able to push your latest commits to the server with the following command:

git push droplet master

Any time you make a new blog post in Jekyll, commit the changes to the Git repository and push to your VPS. The cloud server will build the site and the changes will go live within seconds.

Article Submitted by: Matt Harzewski


Creative Commons License