How To Deploy Jekyll Blogs with Git
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.
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
gem install jekyll
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
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
#!/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 firstname.lastname@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>