Tutorial

How To Deploy Jekyll Blogs with Git

Published on September 12, 2013
Default avatar

By Matt Harzewski

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>

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Matt Harzewski

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
10 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Kamal Nasser
DigitalOcean Employee
DigitalOcean Employee badge
July 2, 2014

@fareez.ahamed:

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

I can’t get this to work. When I try to push (locally, that is), I get “Warning: remote port forwarding failed for listen port 52698”. If i disconnect from the ssh, and then do the push, then it seems to work. But I still don’t get anything at the location I should.

I’m not sure what information is necessary, but at least I have not created the awesomeblog directory beforehand. Is that something I need to do?

I also see that someone mentioned that there is no “jekyll serve” in the script. Should that be added?

Is the assumption in this that you aren’t using any gems, or that they’re installed globally or something? Because I have no idea how this ever worked.

I was getting errors when trying to get the droplet to build the site. This post solved my issues: https://www.digitalsuzie.com/blog/2017/01/21/starting-a-blog-2.html

Don’t know if this will be seen at all, but I followed this tutorial and have one general question, which to be honest is probably because I don’t understand Gemfiles all that well. My script was failing when I ran this line

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

I didn’t have all the dependencies installed, and so I added this line to the post-receive script, before building my site.

bundle install --deployment

It solved my problem, but now it installs the gems everytime I push. I don’t belive this is ideal…Does anyone have a suggestion for what I could do instead. Thanks!

#!/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

Is this script missing jekyll serve so the server starts after pushing?

If you like me use SSH and a custom port number to login to your droplet then you can use something like this to add a git remote:

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

however the /~/ part means that i connect to the home folder of my user where i have a www/username/ folder inside. You may want to connect to a different route of course. But some of us want to connect to the home folder of the ssh user. Thats why i gave this explanation.

You can also edit that remote configuration (once is added) directly on the .git folder of your local repo, just go to your repo by using cd .git and then open the config file with sudo vim config (or u can use the nano editor instead)

Hi, I have followed the instructions and deployed my site with jekyll. However, the markdown posts are not being compiled into html for some reason. As a result, when I open the posts, they show up in plain markdown. There is no error message on deploy which is why I’m not even sure where to look at. Any clue what it might be? Happy to provide more info if needed.

Hi

Would like to ask if you need to run nginx to serve the jekyll site?

Thanks

Hi great article! It’s very easy and clean.

But I got an error when push my code, jekyll needs a javascript runner in the machine (please see: https://github.com/jekyll/jekyll/issues/2327). It’ll be perfect if you update the article with this :)

Thanks

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel