How To Install Jekyll in Linux Mint 19

jekyll-serve-glebreys-unixtutorial.jpg

I’m still fascinated with the Jekyll approach to website management, and am working on converting one of my blogs (not Unix Tutorial just yet!) to Jekyll website. This short post shows how to install Jekyll on a Linux Mint system.

Install Ruby and Bundler

First things first: you need to install Ruby:

greys@xps:~/proj$ sudo apt install ruby
Reading package lists... Done
Building dependency tree 
Reading state information... Done
The following package was automatically installed and is no longer required:
libssh-4
Use 'sudo apt autoremove' to remove it.
The following additional packages will be installed:
libruby2.5 rake ruby-test-unit ruby2.5
Suggested packages:
ri ruby-dev
Recommended packages:
fonts-lato libjs-jquery
The following NEW packages will be installed:
libruby2.5 rake ruby ruby-test-unit ruby2.5
0 upgraded, 5 newly installed, 0 to remove and 317 not upgraded.
Need to get 3,227 kB of archives.
After this operation, 14.8 MB of additional disk space will be used.
Do you want to continue? [Y/n] y
Get:1 http://archive.ubuntu.com/ubuntu bionic-updates/main amd64 ruby2.5 amd64 2.5.1-1ubuntu1.1 [48.6 kB]
Get:2 http://archive.ubuntu.com/ubuntu bionic/main amd64 ruby amd64 1:2.5.1 [5,712 B]
Get:3 http://archive.ubuntu.com/ubuntu bionic/main amd64 rake all 12.3.1-1 [45.1 kB]
Get:4 http://archive.ubuntu.com/ubuntu bionic/main amd64 ruby-test-unit all 3.2.5-1 [61.1 kB]
Get:5 http://archive.ubuntu.com/ubuntu bionic-updates/main amd64 libruby2.5 amd64 2.5.1-1ubuntu1.1 [3,066 kB]
Fetched 3,227 kB in 1s (3,576 kB/s) 
Selecting previously unselected package ruby2.5.
(Reading database ... 272296 files and directories currently installed.)
Preparing to unpack .../ruby2.5_2.5.1-1ubuntu1.1_amd64.deb ...
Unpacking ruby2.5 (2.5.1-1ubuntu1.1) ...
Selecting previously unselected package ruby.
Preparing to unpack .../ruby_1%3a2.5.1_amd64.deb ...
Unpacking ruby (1:2.5.1) ...
Selecting previously unselected package rake.
Preparing to unpack .../archives/rake_12.3.1-1_all.deb ...
Unpacking rake (12.3.1-1) ...
Selecting previously unselected package ruby-test-unit.
Preparing to unpack .../ruby-test-unit_3.2.5-1_all.deb ...
Unpacking ruby-test-unit (3.2.5-1) ...
Selecting previously unselected package libruby2.5:amd64.
Preparing to unpack .../libruby2.5_2.5.1-1ubuntu1.1_amd64.deb ...
Unpacking libruby2.5:amd64 (2.5.1-1ubuntu1.1) ...
Processing triggers for libc-bin (2.27-3ubuntu1) ...
Processing triggers for man-db (2.8.3-2ubuntu0.1) ...
Setting up rake (12.3.1-1) ...
Setting up ruby2.5 (2.5.1-1ubuntu1.1) ...
Setting up ruby (1:2.5.1) ...
Setting up ruby-test-unit (3.2.5-1) ...
Setting up libruby2.5:amd64 (2.5.1-1ubuntu1.1) ...
Processing triggers for libc-bin (2.27-3ubuntu1) ...

… and now use the gem command to install bundler gem:

greys@xps:~/proj$ sudo gem install bundler
Successfully installed bundler-2.0.1
Parsing documentation for bundler-2.0.1
Done installing documentation for bundler after 1 seconds
1 gem installed

Install the Jekyll gem

Excellent, we’re really close to getting this working.

Only small problem: when installing the jekyll gem, there’s an error:

greys@xps:~/proj$ sudo gem install jekyll
Building native extensions. This could take a while...
ERROR:  Error installing jekyll:
ERROR: Failed to build gem native extension.

    current directory: /var/lib/gems/2.5.0/gems/ffi-1.10.0/ext/ffi_c
/usr/bin/ruby2.5 -r ./siteconf20190329-23694-7cpq9s.rb extconf.rb
mkmf.rb can't find header files for ruby at /usr/lib/ruby/include/ruby.h

extconf failed, exit code 1

Gem files will remain installed in /var/lib/gems/2.5.0/gems/ffi-1.10.0 for inspection.

Results logged to /var/lib/gems/2.5.0/extensions/x86_64-linux/2.5.0/ffi-1.10.0/gem_make.out
I first thought I did something wrong or that I have an old version of Ruby (2.5.0 as you can see). But now, it seems the minimal required version for Jekyll is Ruby 2.1.0 so it should all work.
The hint is in the error message:
mkmf.rb can’t find header files for ruby at /usr/lib/ruby/include/ruby.h
This include file is indeed missing, because previously we simply installed Ruby binaries, but not the development packages.
Once we install ruby-dev package:
greys@xps:~/proj$ sudo apt install ruby-dev
Reading package lists... Done
Building dependency tree 
Reading state information... Done
The following package was automatically installed and is no longer required:
libssh-4
Use 'sudo apt autoremove' to remove it.
The following additional packages will be installed:
ruby2.5-dev
Recommended packages:
ruby2.5-doc
The following NEW packages will be installed:
ruby-dev ruby2.5-dev
0 upgraded, 2 newly installed, 0 to remove and 317 not upgraded.
Need to get 68.3 kB of archives.
After this operation, 351 kB of additional disk space will be used.
Do you want to continue? [Y/n] y
Get:1 http://archive.ubuntu.com/ubuntu bionic-updates/main amd64 ruby2.5-dev amd64 2.5.1-1ubuntu1.1 [63.7 kB]
Get:2 http://archive.ubuntu.com/ubuntu bionic/main amd64 ruby-dev amd64 1:2.5.1 [4,604 B]
Fetched 68.3 kB in 0s (198 kB/s) 
Selecting previously unselected package ruby2.5-dev:amd64.
(Reading database ... 273441 files and directories currently installed.)
Preparing to unpack .../ruby2.5-dev_2.5.1-1ubuntu1.1_amd64.deb ...
Unpacking ruby2.5-dev:amd64 (2.5.1-1ubuntu1.1) ...
Selecting previously unselected package ruby-dev:amd64.
Preparing to unpack .../ruby-dev_1%3a2.5.1_amd64.deb ...
Unpacking ruby-dev:amd64 (1:2.5.1) ...
Setting up ruby2.5-dev:amd64 (2.5.1-1ubuntu1.1) ...
Setting up ruby-dev:amd64 (1:2.5.1) ...
The header files for Ruby should appear now (although in a slightly different path):
/usr/include/ruby-2.5.0/ruby/ruby.h
/usr/include/ruby-2.5.0/ruby.h
and the Jekyll gem install will complete:
greys@xps:~/proj$ sudo gem install jekyll
Building native extensions. This could take a while...
Successfully installed ffi-1.10.0
Fetching: rb-inotify-0.10.0.gem (100%)
Successfully installed rb-inotify-0.10.0
Fetching: rb-fsevent-0.10.3.gem (100%)
Successfully installed rb-fsevent-0.10.3
Fetching: listen-3.1.5.gem (100%)
Successfully installed listen-3.1.5
Fetching: jekyll-watch-2.2.1.gem (100%)
Successfully installed jekyll-watch-2.2.1
Fetching: sass-listen-4.0.0.gem (100%)
Successfully installed sass-listen-4.0.0
Fetching: sass-3.7.3.gem (100%)

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
http://sass.logdown.com/posts/7081811

Successfully installed sass-3.7.3
Fetching: jekyll-sass-converter-1.5.2.gem (100%)
Successfully installed jekyll-sass-converter-1.5.2
Fetching: concurrent-ruby-1.1.5.gem (100%)
Successfully installed concurrent-ruby-1.1.5
Fetching: i18n-0.9.5.gem (100%)
Successfully installed i18n-0.9.5
Fetching: http_parser.rb-0.6.0.gem (100%)
Building native extensions. This could take a while...
Successfully installed http_parser.rb-0.6.0
Fetching: eventmachine-1.2.7.gem (100%)
Building native extensions. This could take a while...
Successfully installed eventmachine-1.2.7
Fetching: em-websocket-0.5.1.gem (100%)
Successfully installed em-websocket-0.5.1
Fetching: colorator-1.1.0.gem (100%)
Successfully installed colorator-1.1.0
Fetching: public_suffix-3.0.3.gem (100%)
Successfully installed public_suffix-3.0.3
Fetching: addressable-2.6.0.gem (100%)
Successfully installed addressable-2.6.0
Fetching: jekyll-3.8.5.gem (100%)
Successfully installed jekyll-3.8.5
Parsing documentation for ffi-1.10.0
Installing ri documentation for ffi-1.10.0
Parsing documentation for rb-inotify-0.10.0
Installing ri documentation for rb-inotify-0.10.0
Parsing documentation for rb-fsevent-0.10.3
Installing ri documentation for rb-fsevent-0.10.3
Parsing documentation for listen-3.1.5
Installing ri documentation for listen-3.1.5
Parsing documentation for jekyll-watch-2.2.1
Installing ri documentation for jekyll-watch-2.2.1
Parsing documentation for sass-listen-4.0.0
Installing ri documentation for sass-listen-4.0.0
Parsing documentation for sass-3.7.3
Installing ri documentation for sass-3.7.3
Parsing documentation for jekyll-sass-converter-1.5.2
Installing ri documentation for jekyll-sass-converter-1.5.2
Parsing documentation for concurrent-ruby-1.1.5
Installing ri documentation for concurrent-ruby-1.1.5
Parsing documentation for i18n-0.9.5
Installing ri documentation for i18n-0.9.5
Parsing documentation for http_parser.rb-0.6.0
Installing ri documentation for http_parser.rb-0.6.0
Parsing documentation for eventmachine-1.2.7
Installing ri documentation for eventmachine-1.2.7
Parsing documentation for em-websocket-0.5.1
Installing ri documentation for em-websocket-0.5.1
Parsing documentation for colorator-1.1.0
Installing ri documentation for colorator-1.1.0
Parsing documentation for public_suffix-3.0.3
Installing ri documentation for public_suffix-3.0.3
Parsing documentation for addressable-2.6.0
Installing ri documentation for addressable-2.6.0
Parsing documentation for jekyll-3.8.5
Installing ri documentation for jekyll-3.8.5
Done installing documentation for ffi, rb-inotify, rb-fsevent, listen, jekyll-watch, sass-listen, sass, jekyll-sass-converter, concurrent-ruby, i18n, http_parser.rb, eventmachine, em-websocket, colorator, public_suffix, addressable, jekyll after 26 seconds
17 gems installed
Great stuff! Now we can serve my project and browse to the Jekyll page (I skip the jekyll steps for starting new website because they’re described in my Jekyll website with GitHub Pages article):
greys@xps:~/proj/glebreys.com$ bundle exec jekyll serve
Configuration file: /home/greys/proj/glebreys.com/_config.yml
Source: /home/greys/proj/glebreys.com
Destination: /home/greys/proj/glebreys.com/_site
Incremental build: disabled. Enable with --incremental
Generating... 
Jekyll Feed: Generating feed for posts
done in 0.614 seconds.
Auto-regeneration: enabled for '/home/greys/proj/glebreys.com'
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
That’s it for today!

See Also




Unix Tutorial Projects: GitHub Pages with Jekyll

Screen Shot 2019-03-11 at 14.17.35.png

This past weekend I decided to finally learn how to use GitHub Pages and to publish my static website using Jekyll. Please let me know if you find anything wrong with my approach, I’m not a software developer and have only used GitHub very little so far.

GitHub Pages

It’s possible to host your basic website directly from GitHub repository. By default, this must be a public repository, but you can make it private if you upgrade to GitHub Pro account.

Benefits of using GitHub Pages

  • use GitHub and git repository for making, tracking and pushing your website changes
  • no hosting fees – GitHub Pages are free
  • no need to install CMS or blogging software, unless you actually need a blog
  • save a copy of your website (no need for your hosting backups)
  • pick up and improve your git and GitHub skills as you go!

Project Plan for GitHub Page with Jekyll

  • setup a new GitHub repository named greys.github.io (it must match the GitHub username of yours, so if you’re UnixGuy on GitHub, your URL will be unixguy.github.io)
  • Learn Jekyll basics
  • Pick a Jekyll theme, clone it into my local working directory of website repo
  • Update the necessary files
  • Push website copy onto GitHub
  • Once greys.github.io works, update domain name

Project Implementation

New GitHub repo

  • The repository for GitHub Pages must follow strict naming convention. For a user page (not a project), it must be username.github.io.  
  • This should be a public repository, unless you have GitHub Pro account. Kind of makes sense for most websites, cause they’re meant for public accesso on the Internet. Still, double-check that you don’t publish any sensitive information on your Jekyll website!

    Usernames wise, f you’re UnixGuy on GitHub, your URL will be unixguy.github.io and your repo will be github.com/unixguy/unixguy.github.io)

For instructions, visit the https://help.github.com/en/articles/create-a-repo page.

That’s it! My new repo is public and available at the expected URL: https://github.com/greys/greys.github.io

Learning Jekyll basics

Jekyll is a static website generator written in Ruby. It depends on Ruby packages (gems) and uses bundle package manager. 

First, install Jekyll. On my MacBook, I did the following:

$ sudo gem install jekyll bundler

Jekyll has a great website, including the Quick Start guide. I also have done the step-by-step tutorial – give it a try, it’s really straightforward.

Jekyll Theme: Sustain

After browsing through a bunch of Jekyll themes, I decided on the Sustain theme.

Firstly, I cloned it into a local directory:

greys@maverick:~ $ cd /Users/greys/proj
greys@maverick:~/proj $ git clone https://github.com/jekyller/sustain.git

Now I rename it to proj/gleb.reys.net (just so that I know what project this is):

greys@maverick:~/proj $ mv sustain gleb.reys.net
greys@maverick:~/proj $ cd gleb.reys.net

Jekyll related updates (bundle update will take a while to install required packages and plugins):

greys@maverick:~/proj/gleb.reys.net $ mkdir .bundle
greys@maverick:~/proj/gleb.reys.net $ bundle update

And that’s it! We can start Jekyll’s local webserver to view the resulting website:

greys@maverick:~/proj/gleb.reys.net $ bundle exec jekyll serve
Configuration file: /Users/greys/Documents/proj/gleb.reys.net/_config.yml
Source: /Users/greys/Documents/proj/gleb.reys.net
Destination: /Users/greys/Documents/proj/gleb.reys.net/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.339 seconds.
Auto-regeneration: enabled for '/Users/greys/Documents/proj/gleb.reys.net'
Server address: http://127.0.0.1:3000/sustain//
Server running... press ctrl-c to stop.

After this I can access my page in the local browser – http://127.0.0.1:3000/sustain:

Screen Shot 2019-03-11 at 13.46.41.png
 

Now it was time to make the updates. For now I just commented out the original values in code:

  • fixed colours in static/css/main.css
  • updated font to Verdana
  • updated default font size to 18px
  • updated _layouts/layouts.html to remove the Fork Me on GitHub ribbon (there’s still a link to the project at the bottom of resulting page)
  • changed projects.html and created a few more pages for my online interests
  • updated the _config.yml with my profiles and full name

Pushing changes to GitHub

This is the most fun part. For this tutorial, I actually initialise git repo only here, but in reality I’ve created it at the very start and had plenty of fun editing and committing changes – I discarded them all cause they’re not relevant for this task.

Tidy up git repos

Since we closed git repository of , there’s going to be .git directory in our website’s project. So it’s best to remove it:

greys@maverick:~/proj/gleb.reys.net $ pwd
/Users/greys/proj/gleb.reys.net
greys@maverick:~/proj/gleb.reys.net $ rm -rf .git

Now we can proceed with initialising git repo of our own.

First, let’s initialise the repository and add files:

$ git init .
Initialized empty Git repository in /Users/greys/Documents/proj/gleb.reys.net/.git/

… let’s add all the files:

$ git add -A

… and commit them to git repository:

$ git commit -m "First commit" 

Now, let’s add the remote repository, the online one from GitHub:

$ git remote add origin https://github.com/greys/greys.github.io

We are ready to push the code:

$ git push --set-upstream origin master
Counting objects: 54, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (49/49), done.
Writing objects: 100% (54/54), 477.84 KiB | 6.29 MiB/s, done.
Total 54 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), done.
To github.com:greys/greys.github.io.git
* [new branch] master -> master
Branch master set up to track remote branch master from origin.

After a minute or two, your GitHub Pages URL should start serving your website. In my case, http://greys.github.io showed my pages.

Setup custom domain name

Since I’m using gleb.reys.net as the website URL, I need to update it in the GitHub settings for the repository:

Secure website with HTTPS

This may take a bit, the Enforce HTTPS option is not immediately available:
Screen Shot 2019-03-11 at 13.32.48.png

While you’re waiting, here’s the action plan:

Final website check

This is it! The website should be online and ready – in my case at the https://gleb.reys.net URL. As you can see, it’s a secure website served over HTTPS now:

Screen Shot 2019-03-11 at 13.35.25.png

That’s it for today. Am really happy with this project!

Give it a try and let me know if you need any help getting this setup. 

See Also