Publishing websites using Jekyll

Introduction

Jekyll is a static site generator. It generates static html pages from content written in Mark Down or HTML. Its different from other website publishing tools in that it does not use a database.

The user writes his content in text files using HTML or Mark Down. Jekyll converts these files to html. The benefit of this approach is that it avoids the security and performance related problems of database driven websites. In this article I will describe my experience with installing “Crisp DNA”, a website based on Jekyll.

Installation

Jekyll is based on the Ruby programming language. It is actually distributed as a Ruby Gem, which means it can be installed easily using the gem install command.

Installing Ruby

Ruby is an interpreted language with a focus on simplicity and productivity. It is similar to the Python language, but unlike Python is used mainly for developing websites. Ruby may be installed using the Ruby Version Manager (RVM). RVM allows installing multiple version of Ruby each with its own set of Ruby Gems.

To install RVM, we need to first install the package signing keys using the command:

gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB

Next we need to install RVM using the command:

curl -sSL https://get.rvm.io | bash

Once RVM has been installed, we can use it to install Ruby. For example to list all the available versions of Ruby we can use the command:

rvm list known

To install a specific version of ruby, for example version 2.5.1, we can use the command:

rvm install ruby-2.5.1

Installing Crisp DNA

Crisp DNA is a consulting company. It has released the source code of its website on Git Hub under the Creative Commons License. The website of Crisp DNA is based on Jekyll. The website provides a detailed description on how the Crisp DNA company works. The website text is provided in the form of Mark Down files.

To install the website locally, we first need to download the website from Git Hub. Next we need to install the packages that are required to run the website.

We can do this with the commands:

gem install bundle

followed by:

bundle install

Next we need to run the command:

jekyll serve

from the root folder of the website. Alternately, we may run the ./run script which is provided with the website. This will start the Jekyll server on the localhost port 4000.

Structure of a Jekyll website

The installation and configuration of Jekyll is well documented on the Jekyll quick start quide. A website based on Jekyll has the following main components:

• _config.yml. This is a configuration file for the website. It supports many options. Some of the useful settings are the host, port and baseurl.
• _includes. This a folder that contains include files such as header, footer, sidebar etc.
• _layouts. This a folder that contains the layout files for the website. A layout file is a base file which contains sections such as header, footer, main content, sidebar etc. A website may have several layout files.
• posts. This is a folder that contains files with user content. The content may be formatted using HTML or Mark Down. Mark Down is a light weight markup language which is easy to use. A collection is a group of related files. The posts collection is a default collection. The user may create his own collections, which should be listed in the _config.yml file.
• _site. This folder contains the static HTML files. These files are auto generated by Jekyll. One of the useful features of Jekyll is that user content may be modified while Jekyll is running. The Jekyll server does not have to be restarted each time a file needs to be changed.

A new Jekyll website may be created with the command: jekyll new website_name. This command will create the default folder structure. The folder structure is well documented on the Jekyll website.

Since Jekyll version 3.2, a default theme called minima is provided which provides a default theme for new websites. To use this theme we need to add the lines:gem “minima” to the Gemfile of the website and the line theme: minima to the _config.yml file.

Jekyll Admin

The Jekyll Admin is a useful web based tool that allows editing Jekyll website files. The Jekyll Admin is a Ruby Gem. To install the Jekyll Admin, we just need to add the lines:

gem 'jekyll-admin', group: :jekyll_plugins

to the Gemfile used by the Jekyll website. Next we need to start the Jekyll server. The Jekyll Admin should then be accessible on the URL: http://localhost:4000/admin.

Jekyll Plugins

The Jekyll plugin system allows us to add functionality to a Jekyll website without having to edit the Jekyll source code.

The plugins can be grouped as Generators, Converters, Commands, Tags, Filters and Hooks. For example the Jekyll SEO Tag plugin allows us to perform Search Engine Optimization (SEO) related tasks on our website.

Jekyll also provides import tools for transferring content from popular content management platforms such as WordPress, Blogger, Drupal etc to Jekyll.

Conclusion

Jekyll provides a unique approach to serving website content. It is a popular tool supported by a large open source community.