Jekyll on Heroku
Jekyll is a fantastic static site generator, allowing you to turn plain text into websites or blogs with just a few clicks!
Static site generators have been growing in popularity over the past year thanks to their speed, simplicity, portability and ease of management. Essentially they allow you to focus on your content and host the output almost anywhere, instead of you having to spend time configuring and maintaining a traditional content management solution (e.g. WordPress, Drupal, etc.).
Thanks to its Ruby roots and open-source nature, I’ve started to host a number of blogs using Jekyll and have found the experience to be a developers dream.
Arguably the easiest way to host Jekyll is via GitHub Pages, however I have a lot of apps already running on Heroku and therefore favour it as a service.
This post will explain how to deploy your Jekyll site to Heroku in five simple steps:
Prerequisites:
Before proceeding, I assume you have already installed Jekyll. If not, start by checking out the excellent Jekyll Installation Documentation.
Step 01:
Add a Gemfile
in the Jekyll project containing and Bundle Install
.:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'jekyll'
gem 'kramdown'
gem 'rack-jekyll', :git => 'https://github.com/adaoraul/rack-jekyll.git'
gem 'rake'
gem 'puma'
Step 02:
Create a Procfile
which tells Heroku how to serve the web site with Puma:
web: bundle exec puma -t 8:32 -w 3 -p $PORT
Step 03:
Create a “Rakefile” which tells Heroku’s slug compiler to build the Jekyll site as part of the assets:precompile Rake task:
namespace :assets do
task :precompile do
puts `bundle exec jekyll build`
end
end
Step 04:
Add the following to the “_config.yml” file:
gems: ['kramdown']
exclude: ['config.ru', 'Gemfile', 'Gemfile.lock', 'vendor', 'Procfile', 'Rakefile']
Step 05:
Add a config.ru
file containing:
require 'rack/jekyll'
require 'yaml'
run Rack::Jekyll.new
That’s it! You can now push your code to Heroku like normal.
To save you time, feel free to use my “Jekyll on Heroku Deploy Files” found on GitHub.