(Last Updated On: June 21, 2018)

Jekyll is one of the most popular static site generators with all features you’ll need in a Content Management System (CMS). Its key focus in performance and security, unlike other database-driven CMS systems. With Jekyll, you can transform your plain text files into static websites and blogs in seconds.

Jekyll Features

Jekyll is Simple:  You don’t need to understand database administration, comment moderation, or pesky updates to install – just your content.

Fit for Static content: You can use Markdown, Liquid, HTML & CSS go in. Static sites come out ready for deployment on a web server of your choice.

Jekyll is Blog-aware: It handles Permalinks, categories, pages, posts, and custom layouts pretty well.

In this tutorial, we will install Jekyll on Ubuntu 18.04 and create a sample website. We will also cover content generation, then publish and deploy to production.

Step 1 — Installing Jekyll on Ubuntu 18.04

We will start by updating all system packages to the latest releases. Then proceed to install Jekyll.

$ sudo apt-get update
$ sudo apt-get upgrade

Jekyll requires a working Ruby development environment which includes libraries. Use the following commands to install Jekyll and required build tools.

$ sudo apt-get install make build-essential

Install Ruby package and development tools:

$ sudo apt-get install ruby ruby-dev

We now need to instruct Ruby’s gem package manager to place gems in logged in user’s home directory. Add below line to ~/.bashrc or ~/.zshrc depending on your shell,

export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH

Now source your .bashrc|.zshrc file for the changes to take effect.

$ source ~/.bashrc
$ source ~/.zshrc

Once this has been done, will use gem to install Jekyll and Bundler which is a tool used to manage Gem dependencies.

$ gem install bundler
Fetching: bundler-1.16.2.gem (100%)
Successfully installed bundler-1.16.2
Parsing documentation for bundler-1.16.2
Installing ri documentation for bundler-1.16.2
Done installing documentation for bundler after 3 seconds
1 gem installed

Install Jekyll:

$ gem install jekyll

Step 2 — Creating a new website with Jekyll

Now that all required things have been set, let’s proceed to add a site for Jekyll. For this, we will use the command jekyll new site.This will initiate bundle installation of required dependencies with a default Jekyll theme. After a successful installation, you should see output like:

 $ jekyll new blog.computingforgeeks.com

Running bundle install in /home/jmutai/blog.computingforgeeks.com... 
  Bundler: Don't run Bundler as root. Bundler can ask for sudo if it is needed, and installing your bundle as root will break this application for all non-root users on this
  Bundler: machine.
  Bundler: The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
  Bundler: Fetching gem metadata from https://rubygems.org/...........
  Bundler: Fetching gem metadata from https://rubygems.org/.
  Bundler: Resolving dependencies...
  Bundler: Using public_suffix 3.0.2
  Bundler: Using addressable 2.5.2
  Bundler: Using bundler 1.16.2
  Bundler: Using colorator 1.1.0
  Bundler: Using concurrent-ruby 1.0.5
  Bundler: Using eventmachine 1.2.7
  Bundler: Using http_parser.rb 0.6.0
  Bundler: Using em-websocket 0.5.1
  Bundler: Using ffi 1.9.25
  Bundler: Using forwardable-extended 2.6.0
  Bundler: Using i18n 0.9.5
  Bundler: Using rb-fsevent 0.10.3
  Bundler: Using rb-inotify 0.9.10
  Bundler: Using sass-listen 4.0.0
  Bundler: Using sass 3.5.6
  Bundler: Using jekyll-sass-converter 1.5.2
  Bundler: Using ruby_dep 1.5.0
  Bundler: Using listen 3.1.5
  Bundler: Using jekyll-watch 2.0.0
  Bundler: Using kramdown 1.17.0
  Bundler: Using liquid 4.0.0
  Bundler: Using mercenary 0.3.6
  Bundler: Using pathutil 0.16.1
  Bundler: Using rouge 3.1.1
  Bundler: Using safe_yaml 1.0.4
  Bundler: Using jekyll 3.8.3
  Bundler: Fetching jekyll-feed 0.10.0
  Bundler: Installing jekyll-feed 0.10.0
  Bundler: Fetching jekyll-seo-tag 2.5.0
  Bundler: Installing jekyll-seo-tag 2.5.0
  Bundler: Fetching minima 2.5.0
  Bundler: Installing minima 2.5.0
  Bundler: Bundle complete! 4 Gemfile dependencies, 29 gems now installed.
  Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.
New jekyll site installed in /home/jmutai/blog.computingforgeeks.com.

A directory will be created with Jekyll source files used to create a static site:

$ tree blog.computingforgeeks.com/
blog.computingforgeeks.com/
├── 404.html
├── Gemfile
├── Gemfile.lock
├── _config.yml
├── _posts
│   └── 2018-06-20-welcome-to-jekyll.markdown
├── about.md
└── index.md

1 directory, 7 files

Note that you have to cd to this directory before you can start using it.

$ cd blog.computingforgeeks.com/

Jekyll’s built-in lightweight web server will serve content on port 4000. If you have firewall service enabled, allow access to this port:

$ sudo ufw allow 4000

Jekyll is designed to support live development by automatically detecting changes of files and automatically regenerating the static site whenever a change is saved.

Step 3: Start Jekyll Web Server

To start Jekyll built-in web service, navigate to site directory and start Jekyll web server using jekyll serve command followed by host IP address to bind to.

$ cd ~/blog.computingforgeeks.com
$ jekyll serve --host=178.128.164.211

When jekyll serve command is executed, Jekyll will parse configuration and pushes content files into a directory called  _site. It then serves the content in this  _site directory:

$ ls -1 _site/
404.html
about
assets
feed.xml
index.html
jekyll

You should get output like below:

Configuration file: /home/jmutai/blog.computingforgeeks.com/_config.yml
Source: /home/jmutai/blog.computingforgeeks.com
Destination:/home/jmutai/blog.computingforgeeks.com/_site
Incremental build: disabled. Enable with --incremental
Generating... 
done in 0.372 seconds.
Auto-regeneration: enabled for '/home/jmutai/blog.computingforgeeks.com'
Server address: http://178.128.164.211:4000/
Server running... press ctrl-c to stop.

Jekyll will also watch for new changes on ~/blog.computingforgeeks.com directory when a change to a post or page is saved, it will automatically rebuild the static site. Place all site posts under the _posts directory.

Visit server’s IP address and port 4000 to see default web page.

If you are using Web server like Nginx or Apache, you need to copy content inside _site/ to its Web document root.