There is a new version of this tutorial available for Ubuntu 22.04 (Jammy Jellyfish).

Jekyll is a free, open-source and most popular static site generators that can be used for blogging or sharing content. It is simple, lightweight and does not require any databases. It requires little memory and is a great alternative to WordPress. With Jekyll, you can create your business websites in minutes by creating markup pages and content. Jekyll is the best choice for you if you want to work off-line and wish to use version control to track changes to your website.

In this tutorial, we will explain how to install Jekyll on Ubuntu 18.04.

Requirements

  • A server running Ubuntu 18.04.
  • A root password is setup to your server.

Getting Started

Before starting, you will need to update your system with the latest version. You can do this by running the following command:

apt-get update -y
apt-get upgrade -y

Once your server is updated, restart your server to apply the changes.

Install Required Dependencies

First, you will need to install some dependencies on your system. First, install Ruby and required build tools by running the following command:

apt-get install make build-essential ruby ruby-dev -y

Once all the dependencies are installed, you will need to add Ruby environment variable in ~/.bashrc file.

nano ~/.bashrc

Add the following lines:

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

Save and close the file when you are finished. Then, activate the environment variable with the following command:

source ~/.bashrc

Once you have done, you can proceed to the next step.

Install Jekyll

First, you will need to install Bundler to manage Gem dependencies. You can install it by just running the following command:

gem install bundler

Once the installation has been completed, you should get the following output:

Fetching: bundler-2.0.2.gem (100%)
Successfully installed bundler-2.0.2
Parsing documentation for bundler-2.0.2
Installing ri documentation for bundler-2.0.2
Done installing documentation for bundler after 2 seconds
1 gem installed

Next, install Jekyll with the following command:

gem install jekyll

Once installed, you should get the following output:

Installing ri documentation for jekyll-4.0.0
Done installing documentation for public_suffix, addressable, colorator, http_parser.rb, eventmachine, em-websocket, concurrent-ruby, i18n, ffi, sassc, jekyll-sass-converter, ruby_dep, rb-inotify, rb-fsevent, listen, jekyll-watch, kramdown, kramdown-parser-gfm, liquid, mercenary, forwardable-extended, pathutil, rouge, safe_yaml, unicode-display_width, terminal-table, jekyll after 25 seconds
27 gems installed

Once you have finished, you can proceed to the next step.

Create A Website with Jekyll

Jekyll is now installed and ready. You can now create your own website with Jekyll.

Let's create a website named test.example.com as shown below:

jekyll new test.example.com

Once the website has been created, you should see the following output:

Bundler: Fetching minima 2.5.1
Bundler: Installing minima 2.5.1
Bundler: Bundle complete! 6 Gemfile dependencies, 31 gems now installed.
Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.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
  Bundler: non-root users on this machine.
New jekyll site installed in /root/test.example.com. 

Now, change the directory to your website with the following command:

cd test.example.com

Now, start your Jekyll web server by specifying your server IP address as shown below:

jekyll serve --host=136.243.240.39

Once the Jekyll web server has been started, you should see the following output:

Configuration file: /root/test.example.com/_config.yml
            Source: /root/test.example.com
       Destination: /root/test.example.com/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
                    done in 0.168 seconds.
 Auto-regeneration: enabled for '/root/test.example.com'
    Server address: http://136.243.240.39:4000/
  Server running... press ctrl-c to stop.

You can stop your Jekyll server any time by pressing CRTL+C.

Access Jekyll Web Interface

Jekyll web server is now started and listening on port 4000 by default. Now, open your web browser and type the URL http://136.243.240.39:4000. You will be redirected to the Jekyll dashboard as shown below:

Jekyll continuously watches for new changes on test.example.com directory and will automatically rebuild the static site when a change to a post or page is saved. By default, Jekyll place all site posts under the _posts directory.

Configure Nginx as a Reverse Proxy for Jekyll

By default, Jekyll runs on port 4000. So it is good a idea to configure Nginx as a reverse proxy to forward requests from port 80 to 4000.

First, install Nginx with the following command:

apt-get install nginx -y

Once Nginx has been installed, create a new virtual host configuration file with the following command:

nano /etc/nginx/sites-available/jekyll.conf

Add the following lines:

upstream jekyll {
  server 127.0.0.1:4000 weight=100 max_fails=5 fail_timeout=5;
}

server {
  listen          80;
  server_name     136.243.240.39;

  location / {
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://jekyll/;
  }
}

Save and close the file. Then, enable the Nginx virtual host file with the following command:

ln -s /etc/nginx/sites-available/jekyll.conf /etc/nginx/sites-enabled/

Finally, restart Nginx service to apply the configuration:

systemctl restart nginx

You can now access your Jekyll server without specifying port 4000 with IP address.

That's it. You have successfully installed and configured Jekyll on Ubuntu 18.04 server. I hope you have now enough knowledge to create your own website with Jekyll. Feel free to ask me if you have any questions.

Share this page:

0 Comment(s)