By Matt Harzewski
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
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…)
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"
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
Back on your local machine, add a remote to your blog’s Git repository.
git remote add droplet email@example.com: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.
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.Sign up now
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!
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
I didn’t have all the dependencies installed, and so I added this line to the post-receive script, before building my site.
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 serveso 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:
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 .gitand 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.
Would like to ask if you need to run nginx to serve the jekyll site?
Hi great article! It’s very easy and clean.