Best Steps to Install and Configure Jekyll on Ubuntu 20.04

By Posted on

Best Steps to Install and Configure Jekyll on Ubuntu 20.04

Best Steps to Install and Configure Jekyll on Ubuntu 20.04

This tutorial, brought to you by Orcacore, aims to guide you through the process of installing and configuring Jekyll on Ubuntu 20.04. Jekyll is a straightforward, blog-aware static site generator. Built with Ruby and leveraging the Liquid templating engine, Jekyll is ideal for creating blogs, portfolios, personal websites, and even sophisticated business websites. It boasts built-in plugins that simplify the addition of features like pagination, tags, categories, social sharing buttons, Disqus comments, Google Analytics tracking, and email subscription forms.

Before we begin, ensure you have access to an Ubuntu 20.04 server as a non-root user with sudo privileges and that a basic firewall is configured. You can follow our guide on Initial Server Setup with Ubuntu 20.04 to achieve this.

Now, let’s dive into the steps required to Install and Configure Jekyll on Ubuntu 20.04.

1. Install Ruby on Ubuntu 20.04

Since Jekyll is a Ruby-based application, Ruby needs to be installed on your Ubuntu server.

First, update your local package index:

sudo apt update

Next, install Ruby along with the necessary build tools and development libraries:

sudo apt install make build-essential ruby ruby-dev

Verify the Ruby installation by checking its version:

ruby -v
**Output**
ruby 2.7.0p0 (2019-12-25 revision 647ee6f091) [x86_64-linux-gnu]

2. Set up Jekyll Site Generator on Ubuntu 20.04

Now, we will configure the Ruby Gems path and then install Jekyll on your Ubuntu server.

Configure Ruby Gems Path

Open your .bashrc file using your preferred text editor. Here, we use vi:

vi ~/.bashrc

Add the following lines to the end of the file:

# Install Ruby Gems to ~/.gems
export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH

Save the changes and close the file.

Apply the changes by sourcing the .bashrc file:

source ~/.bashrc

Install Jekyll Site Generator on Ubuntu 20 Server

With the Ruby Gems path configured, install Jekyll and Bundler using the gem command:

gem install jekyll bundler
**Output**
Successfully installed bundler-2.4.4
Parsing documentation for bundler-2.4.4
Installing ri documentation for bundler-2.4.4
Done installing documentation for bundler after 0 seconds
1 gem installed

To update Ruby gems, run the following command:

gem update --system

Configure Firewall for Jekyll

By default, Jekyll runs on port 4000. Open this port in your firewall:

sudo ufw allow 4000

Reload the firewall to apply the new rule:

sudo ufw reload

3. Create a New Demo Site with Jekyll

Now that you have learned to Install and Configure Jekyll on Ubuntu 20.04, let’s create a new demo site.

Navigate to your home directory and create the demo site:

# cd ~
# jekyll new demo-site

You can inspect the created directory structure with the tree command. If you don’t have tree installed, you can install it:

# sudo apt install tree
# tree demo-site
**Output**
demo-site
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── index.md
└── _posts
    └── 2023-01-07-welcome-to-jekyll.markdown

1 directory, 6 files

Run Web Server with Jekyll

Jekyll can now monitor the files in the demo-site directory and generate a static site on Ubuntu 20.04. It will automatically regenerate the site when changes are made.

To start the web server, use the following commands:

# cd ~/demo-site
# bundle add webrick
# jekyll serve --host=<your-host-ip-address>

Note: If no host is specified, Jekyll will serve the site on localhost.

**Output**
Auto-regeneration: enabled for '/root/demo-site'
    Server address: http://ip-address:4000/
  Server running... press ctrl-c to stop.

When the command is executed, Jekyll will use configurations and content in the directory _site

tree ~/demo-site
**Output**
/root/demo-site
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│   └── 2023-01-07-welcome-to-jekyll.markdown
└── _site
    ├── 404.html
    ├── about
    │   └── index.html
    ├── assets
    │   ├── main.css
    │   ├── main.css.map
    │   └── minima-social-icons.svg
    ├── feed.xml
    ├── index.html
    └── jekyll
        └── update
            └── 2023
                └── 01
                    └── 07
                        └── welcome-to-jekyll.html

9 directories, 15 files

You can also run the Jekyll server in the background:

jekyll serve --host=<host-ip> > /dev/null 2>&1 &

Access Jekyll Site on Ubuntu 20.04

Access the site by typing the following URL in your web browser:

http://<IP_Address>:4000

You should see the Jekyll Welcome page.

[Image of Jekyll welcome page site]

Now, let’s add a post to your Jekyll site on Ubuntu 20.04.

Create a Sample Post on Jekyll

Posts are added to the _posts directory with the following format:

YEAR-MONTH-DAY-title.MARKUP

Where:

  • YEAR is the year of the post.
  • MONTH is the month of the post.
  • DAY is the day of the post.
  • title is the title of the post.
  • MARKUP is the file extension, such as .md for Markdown or .html for HTML.

For example, create a "hello world" post:

vi ~/demo-site/_posts/2023-01-07-hello-world-blog.md

Add the following content to the file:

---
layout: post
title:  "Hello World!"
---

# Welcome

**Hello world**, this is my first Jekyll blog post.

I hope you like it!@OrcaCoreTeam

Save the file and close it.

Refresh your Jekyll site page, and you will see:

[Image of Add a Jekyll Post]

You can click on your post to view its content:

[Image of Jekyll Post content]

Conclusion

This guide has shown you how to Install and Configure Jekyll on Ubuntu 20.04. The Jekyll Site Generator is a powerful tool for building blogs, portfolios, personal websites, and complex business websites.

Hope you enjoy it. You may also like these articles:

Install Brotli Compression on Ubuntu 20.04

Install and Configure XAMPP on Ubuntu 20.04

How To Install PHP 8.1 on Ubuntu 20.04

Set up Python 3.10 on Ubuntu 20.04

Alternative Solutions for Setting Up a Static Site on Ubuntu 20.04

While Jekyll is a fantastic option, other tools can achieve similar results. Here are two alternative methods for generating and serving static sites on Ubuntu 20.04:

1. Using Hugo:

Hugo is another popular static site generator, known for its speed and ease of use. It’s written in Go and offers excellent performance, making it suitable for larger websites.

Explanation:

Unlike Jekyll, which relies on Ruby, Hugo is a single binary executable, simplifying the installation process. It uses Markdown (or other formats) for content creation and templates to generate HTML. Hugo also has a built-in server for previewing your site during development.

Installation and Usage:

a. Download Hugo: Visit the Hugo releases page (https://github.com/gohugoio/hugo/releases) and download the appropriate binary for your system (Linux amd64).

b. Install Hugo: Extract the downloaded archive and move the hugo executable to a directory in your system’s PATH, such as /usr/local/bin.

sudo mv hugo /usr/local/bin/

c. Create a New Site:

hugo new site my-hugo-site
cd my-hugo-site

d. Add a Theme: Hugo uses themes to define the look and feel of your site. Find a theme you like from the Hugo Themes site (https://themes.gohugo.io/) and add it to your site’s themes directory. For example, to add the "ananke" theme:

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo 'theme = "ananke"' >> hugo.toml

e. Create Content:

hugo new posts/my-first-post.md

f. Start the Server:

hugo server -D

This will start a local development server. Open your browser and navigate to http://localhost:1313 to view your Hugo site.

2. Using Eleventy (11ty):

Eleventy is a simpler static site generator that promotes a more flexible and unopinionated approach. It uses JavaScript and works with various template languages (Markdown, Liquid, Nunjucks, etc.).

Explanation:

Eleventy’s strength lies in its simplicity and extensibility. It’s a good choice if you prefer working with JavaScript and want a more customizable solution than some of the more opinionated generators. Eleventy is also known for its progressive enhancement approach to building static websites.

Installation and Usage:

a. Install Node.js and npm: If you don’t already have them, install Node.js and npm (Node Package Manager) on your Ubuntu system.

sudo apt update
sudo apt install nodejs npm

b. Create a New Project:

mkdir my-eleventy-site
cd my-eleventy-site
npm init -y
npm install @11ty/eleventy --save-dev

c. Create an Input File (e.g., index.md):

echo '# Hello, Eleventy!' > index.md

d. Create a Configuration File (.eleventy.js): (Optional, but recommended for customization)

// .eleventy.js
module.exports = function(eleventyConfig) {
  return {
    dir: {
      input: ".",
      output: "_site"
    }
  };
};

e. Run Eleventy:

npx @11ty/eleventy

This will generate the static site in the _site directory.

f. Serve the Site: You’ll need a separate server to serve the generated static files. You can use a simple Python server:

python3 -m http.server

Then, access your site at http://localhost:8000. Alternatively, you could use npm install -g serve and then serve _site.

These alternative solutions offer different approaches to static site generation, allowing you to choose the tool that best suits your needs and preferences. Hugo provides speed and efficiency, while Eleventy offers flexibility and simplicity. Both are viable alternatives to Jekyll for creating static websites on Ubuntu 20.04.

Related posts: