How to install jekyll on Ubuntu 22.04

Jekyll is a free and open source static site generator, that allows you to create a static site or even a blog without having a database. Yes, in jekyll everything is powered by text, which means you can create a blog with no database at all.

Not only you can create a blog without database, but you can also host your blog for free on Github if you don't have a server.

Jekyll is very useful if you want to be able to generate static sites from the terminal.

In this tutorial, you will learn how to install jekyll on Ubuntu 22.04, and how to create a site on it.

Step 1 - Update the system

Before you install jekyll, make sure to update the package database on your Ubuntu 22.0 machine.

Updating package database is necessary before installing jekyll, to ensure that jekyll will be installed with no issues.

Check for updates on your Ubuntu 22.04 by running the command below.

sudo apt update -y

And proceed to upgrade the outdated packages, by using the upgrade command.

sudo apt upgrade -y

Step 2 - Install requirements

Jekyll is written in ruby, so in order to install and use jekyll in Ubuntu 22.04, you must install ruby and other required packages.

To do so, simply run the command below.

sudo apt install ruby-full build-essential zlib1g-dev

Step 3 - Add Ruby gem to PATH

Now you need to add Ruby package manager in your ~/.bashrc file, to ensure that you can use Rubygem to install Jekyll in the next step.

To add Ruby gem on ~/.bashrc run the commands below

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc

Next, proceed to source ~/.bashrc so that changes take effect.

source ~/.bashrc

Step 4 - Install jekyll

Once you have updated your system, and installed Jekyll requirements, you can now install Jekyll in your Ubuntu 22.04 machine.

To install Jekyll, run the following command.

gem install jekyll bundler

Next, you will see the following output in your terminal, this means that jekyll is being installed in your system, so all you have to do now is wait for the installation process to finish.

Step 5 - Create your site

Now you should be able to create your site using Jekyll.

Creating a site in Jekyll is quite simple, and you can easily create your site by following the steps below.

1) Create your site

First, you need to create the directory where your site files will be hosted. So the name of the directory should be the name of your website.

jekyll new owlhowto-jekyll

2) Change directory to website

Next, you need to cd into the new directory that you created.

For example, the name of the directory that we created is owhowto-jekyll

cd owlhowto-jekyll

3) Launch your site

Next, proceed to run Jekyll and start webserver. To do so, simply run the command below.

bundle exec jekyll serve

Jekyll runs on port 4000, and to access your site you need to navigate to 127.0.0.1:400

How Jekyll Works

In your site directory, you will find directories and files as mentioned below. Each file and directory has a function.

_config.yml

In this file you can define settings that will apply to your whole blog. For example, baseurl allows you to set the base url for your blog.

Title - Allows you to set the title of your blog

Description - Description of your blog

Theme - You can set any theme you want, all you have to do is replace the default theme minim with your theme.

Plugins - Lets you add your plugins.

_config.yml looks like this

title: Your awesome title
email: your-email@example.com
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog
url: "" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username:  jekyll

# Build settings
theme: minima
plugins:
  - jekyll-feed

_site

When you start Jekyll webserver, it builds the site based on your settings, so the generated site will be in this directory.

This is the directory that you will need to upload it in your server in your public_html directory.

_posts

This is the directory that contains the posts of your blog, whenever you want to publish a new post, you need to add it on this directory.

Adding posts in Jekyll is very easy, but it needs to be done in the correct way.

The syntax that you need to use when creating posts in Jekyll is

`YEAR-MONTH-DAY-title.MARKUP`

For example, a normal post would look like

2023-01-07-welcome-to-jekyll.markdown

---
layout: post
title:  "Welcome to Jekyll!"
date:   2024-01-07 11:46:34 +0100
categories: jekyll update
---
Post content here

Based on the settings above, the url structure of this post will be

127.0.0.1:4000/jekyll/update/2024/01/07/welcome-to-jekyll

As you can see, the post above will be published under the defined categories, if you don't want to add your post in a category, then simply remove categories from the markdown of your post.

So the post should look like this.

---
layout: post
title:  "Welcome to Jekyll!"
date:   2024-01-07 11:46:34 +0100
---
Post content here

_drafts

The drafts directory allows you to add new posts without publishing them on your blog. So any post added in the _drafts category will not be published.

How to create a post on Jekyll

All you have to do is create a new file in the _posts directory, by using the correct syntax.

1) Create the post by using nano text editor

sudo nano 2024-01-08-this-is-my-new-jekyll-post.markdown

2) Add post content

This is the layout that you need to use in order for post to be valid. Copy the content below, and paste it to the post you created.

---
layout: post
title:  "Welcome to Jekyll!"
---
Post content here

3) Start Jekyll webserver

Now all you have to do is start Jekyll webserver, in order to generate and publish the new post that was added.

jekyll serve

Like we said, you will find all posts that are published in the _site directory.

Conclusion

In this tutorial, you learned how to install Jekyll in Ubuntu 22.04, how Jekyll works and also how to create a post on a Jekyll blog.