How to Set Up and Configure Jekyll Development Site on Ubuntu 16.04

UbuntuWeb DevelopmentSoftware & Coding

In this article, we will learn how to setup and configure Jekyll Development Site. Jekyll provides the benefits of the Content Management System (CMS) with performance and security which appears in the database-driven sites. It is also called as blog-aware which has features of handling the date-organized contents. It is especially suitable for the people who work off-line, which also provides the lightweight editor with content management which has the version control for tracking the changes made on their websites.

Prerequisites

  • A machine with Ubuntu 16.04 installed.
  • A user with Sudo permissions on the machine.

Installing the Jekyll Development Site on Ubuntu 16.04

Before we start the actual installation, we will first update the system with the below command.

$ sudo apt-get update
Output:
Hit:1 http://in.archive.ubuntu.com/ubuntu xenial InRelease
Get:2 http://in.archive.ubuntu.com/ubuntu xenial-updates InRelease [95.7 kB]
Hit:3 http://security.ubuntu.com/ubuntu xenial-security InRelease
Hit:4 http://in.archive.ubuntu.com/ubuntu xenial-backports InRelease
Fetched 95.7 kB in 1s (58.1 kB/s)
Reading package lists... Done

Once the update is done, we will install the dependencies required for the Jekyll, as we needed Ruby and the development libraries like Make and GCC to compile and install the Jekyll.

$ sudo apt-get install ruby ruby-dev make gcc

Output:

Reading package lists... Done
Building dependency tree Reading state information... Done … …
Setting up libgmp-dev:amd64 (2:6.1.0+dfsg-2) ...
Setting up libjs-jquery (1.11.3+dfsg-4) ...
Setting up make (4.1-6) ...
Setting up manpages-dev (4.04-2) ...
Setting up rubygems-integration (1.10) ...
Setting up ruby-dev:amd64 (1:2.3.0+1) ...
Setting up ruby (1:2.3.0+1) ...
Setting up rake (10.5.0-2) ...
Processing triggers for libc-bin (2.23-0ubuntu3) ...

Once the installation is completed, we can install Ruby’s gem package along with Jekyll as a bundle.

Below is the command to install the Jekyll Development server using the gem installer.

$ sudo gem install jekyll bundler
Fetching: liquid-3.0.6.gem (100%)
Successfully installed liquid-3.0.6
Fetching: kramdown-1.12.0.gem (100%)
Successfully installed kramdown-1.12.0
Fetching: mercenary-0.3.6.gem (100%)
Successfully installed mercenary-0.3.6
..
..
..
Installing ri documentation for rb-inotify-0.9.7
Parsing documentation for listen-3.0.8
Installing ri documentation for listen-3.0.8
Parsing documentation for jekyll-watch-1.5.0
Fetching: bundler-1.13.6.gem (100%)
Successfully installed bundler-1.13.6
Parsing documentation for bundler-1.13.6
Installing ri documentation for bundler-1.13.6
Done installing documentation for bundler after 5 seconds
19 gems installed

Configuring the Firewall to Allow Jekyll

First, we will check the status of the Firewall so that the site is permitted for the development sire on the web browser. Below is the command to check the status of the Firewall –

$ sudo ufw status
Output:
Status: active
To             Action             From
--             ------             ----
22             ALLOW             Anywhere
80             ALLOW             Anywhere
22 (v6)        ALLOW             Anywhere (v6)
80 (v6)        ALLOW             Anywhere (v6)

As we can see that, only SSH and WWW services have enabled means port 22 and port 80 are allowed, we need to open port 4000 for the Jekyll which is a default port for the Jekyll development server.

Below is the command to enable 4000 port on the firewall –

$ sudo ufw allow 4000
Output:
Rule added
Rule added (v6)

Now, we will check the Firewall status for cross checking the port 4000 if it is enabled or not.

$ sudo ufw status
Output:
Status: active
To          Action       From
--          ------       ----
22          ALLOW        Anywhere
80          ALLOW        Anywhere
4000        ALLOW        Anywhere
22 (v6)     ALLOW        Anywhere (v6)
80 (v6)     ALLOW        Anywhere (v6)
4000 (v6)   ALLOW        Anywhere (v6)

As the necessary ports are open for the development, we will create the development sites.

Creating a Demo Development Site

In our home directory, we will create a scaffolding for the demo site in a folder called www.

$ cd ~
$ jekyll new www
OutPut:
New jekyll site installed in /home/ubuntu/www.
Running bundle install in /home/ubuntu/www...
Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Using public_suffix 2.0.4
Using colorator 1.1.0
Using ffi 1.9.14
Using forwardable-extended 2.6.0
Using sass 3.4.22
Using rb-fsevent 0.9.8
Using kramdown 1.12.0
Using liquid 3.0.6
Using mercenary 0.3.6
Using rouge 1.11.1
Using safe_yaml 1.0.4
Installing minima 2.0.0
Using bundler 1.13.6
Using addressable 2.5.0
Using rb-inotify 0.9.7
Using pathutil 0.14.0
Using jekyll-sass-converter 1.5.0
Using listen 3.0.8
Using jekyll-watch 1.5.0
Using jekyll 3.3.1
Installing jekyll-feed 0.8.0
Bundle complete! 3 Gemfile dependencies, 21 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
Post-install message from minima:
----------------------------------------------
Thank you for installing minima 2.0!
Minima 2.0 comes with a breaking change that
renders '<your-site>/css/main.scss' redundant.
That file is now bundled with this gem as
'<minima>/assets/main.scss'.
More Information:
https://github.com/jekyll/minima#customization
----------------------------------------------

This will specify the default theme with its Gemfiles, we will now run the bundle for installing the themes.

$ cd www
$ bundle install
Output:
Using public_suffix 2.0.4
Using colorator 1.1.0
Using ffi 1.9.14
Using forwardable-extended 2.6.0
…
…
Using jekyll-watch 1.5.0
Using jekyll 3.3.1
Using jekyll-feed 0.8.0
Bundle complete! 3 Gemfile dependencies, 21 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

The tree structure of the www will look like the below –

.
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
└── _posts
└── 2016-11-15-welcome-to-jekyll.markdown
1 directory, 6 files

We need to make some configuration changes in the _config.yml file before we proceed for the next steps.

$ vi ~/www/_config.yml
Output:
The configuration file will be looks like this
title: Your awesome title
email: your-email@domain.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: "ubuntu-16" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username: jekyll
# Build settings
markdown: kramdown
theme: minima
gems:
- jekyll-feed
exclude:
- Gemfile
- Gemfile.lock

We need to find the below line and need to replace the example with your domain name for the site

url: "http://example.com" # the base hostname & protocol for your site, e.g. http://example.com

Once the configuration is completed, we now start the Jekyll’s web server.

Starting the Jekyll’s Server

We needed to start the Jekyll’s web server which will support the site development by monitoring the files in the directory which will also generate the static web-site and any time the changes are saved.

$ jekyll serve --host=192.168.2.117
Output:
Configuration file: /home/ubuntu/www/_config.yml
Configuration file: /home/ubuntu/www/_config.yml
Source: /home/ubuntu/www
Destination: /home/ubuntu/www/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.372 seconds.
Auto-regeneration: enabled for '/home/ubuntu/www'
Configuration file: /home/ubuntu/www/_config.yml
Server address: http://192.168.2.117:4000/
Server running... press ctrl-c to stop.

Once the server is running, the Web site is running and up we can access the site using the IP address or the domain name as this is demo site we will access it from the local IP address, https://192.168.2.197. In this article, we shall learn to set up and configure Jekyll and install the dependencies and configure the Jekyll to set up a demo website, we also learn how to start the Jekyll web server.

raja
Published on 20-Jan-2020 10:59:24
Advertisements