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 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
$ 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:
A directory will be created with Jekyll source files used to create a static site:
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=220.127.116.11
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:
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.