How to Install Jekyll on Windows

This post shows how to install Ruby and Jekyll via Chocolatey on Windows 8.1 or Windows Server 2012 R2 Update 1.

Chocolatey

If you do not have Chocolatey, you can install it by following the instructions on chocolatey.org. You may also see this post for instructions on how to set the Chocolatey cache location.

Ruby

Install

Open PowerShell as Administrator and run the following command:

choco install ruby

This will install Ruby 2.1.6 in C:\tools\ruby21\bin.

Configure

Close PowerShell and open it again, so it can pick the changes to the PATH environment.

Test

ruby --version
ruby 2.1.6p336 (2015-04-13 revision 50298) [x64-mingw32]

Ruby DevKit (2.0+)

Install

Open PowerShell as Administrator and run the following command:

choco install ruby2.devkit

This will install Ruby DevKit 2.0+ and its dependencies- in C:\tools\DevKit2.

Configure

Open C:\tools\DevKit2\config.ymland add C:\tools\ruby21 path at the end. The complete config.yml should look like this:

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---
 - C:/tools/ruby21

Run the DevKit installer:

cd C:/tools/DevKit2
ruby dk.rb install

Jekyll

Install Bundler

gem install bundler

Create Jekyll Site

Create a jekyll directory under your home:

cd ~
mkdir jekyll

Create a New Bundle

cd ~/jekyll
bundle init

Jekyll Gem

For Jekyll we need the jekyll gem.

Syntax Highlighter Gem

We will use rouge as a syntax highlighter. This comes in the rouge gem.

Auto-generation Gem

Jekyll has a built-in auto-regeneration feature that watches your source folder for changes and then re-builds your site. On Windows, you need to install the wdm gem to enable this functionality.

Gemfile

Open the Gemfile file and add jekyll, rouge, and wdm packages. Here is the final file:

# A sample Gemfile
source "https://rubygems.org"

gem "jekyll"
gem "rouge"
gem "wdm"

Install Gems

Install gems locally:

bundle install --binstubs --path vendor

Create Site

cd ~/jekyll
bundle exec jekyll new site

Configure

Syntax Highlighter

Open ~/jekyll/site/_config.yml. Add this line at the end to set rouge as a syntax highlighter:

highlighter: rouge

Test

Build

cd ~/jekyll/site
chcp 65001
bundle exec jekyll build --watch

Serve

Open a second PowerShell window

cd ~/jekyll/site
chcp 65001
bundel exec jekyll serve

Open a browser and navigate to http://localhost:4000. You should see a basic Jekyll site running.

Auto-generation

Go to ~/jekyll/site and open About.md with a text editor capable of using UTF-8 encoding, e.g. Sublime Text. Change the title from About to About Me. Save the file. Refresh your browser and navigate to http://localhost:4000/about/. You should see the page has the new About Me title.