How To Deploy Jekyll Blogs with Git

Introduction

---

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
GIT_REPO=$HOME/repos/awesomeblog.git
TMP_GIT_CLONE=$HOME/tmp/git/awesomeblog
PUBLIC_WWW=/var/www/awesomeblog

git clone $GIT_REPO $TMP_GIT_CLONE
jekyll build --source $TMP_GIT_CLONE --destination $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit

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.

<div class=“author”>Article Submitted by: <a href=“https://twitter.com/redwall_hp”>Matt Harzewski </a></div>

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

 jekyll build --source $TMP_GIT_CLONE --destination $TMP_GIT_CLONE/_site

bundle install --deployment

git remote add droplet ssh://your_username@your_droplet_ip:portnumber/~/www/username/awesomeblog.git/