Project: Migrate WordPress Blog to Jekyll 4

Unix Tutorial RU based on Jekyll 4

I’ve finally decided to try running Unix Tutorial RU, copy of this blog in Russian, in Jekyll 4 CMS instead of WordPress.

Motivation for this Project

There’s a few reasons that make migration to Jekyll a very interesting project for me.

Before you ask: there’s nothing wrong with WordPress and I’m still a huge fan! But I’m embracing more and more of git-based workflows for creating and deploying things lately, so it’s a good opportunity to try blogging with git as well.

Improvements I Expect With Move to Jekyll

Here’s what I expect this project improves for me:

Much easier blog development and updating

All the development is done locally on my laptop, with any changes done and debugged locally before committing them into local git or pushing to GitHub.

Bonus: there’s no CPU/memory overhead for this development – so this is better and quicker than any VM, Docker (for WPengine dev) or even native httpd/mysql based WordPress setup.

Easier content editing

Specifically, creation of new posts and pages in Markdown using my editor of choice – Sublime Text 3. It’s possible to find plugins for Markdown editing in WordPress, but they are fairly limited, especially with the latest move towards block-based content editing.

Bonus: I can edit/write new posts without any connection to Internet (think WordPress desktop app either supports or plans to support it soon).

Better Code Examples and Shell Commands Snippets

I don’t know why, but process of posting syntax-highlighted snippets of code is more involved that necessary. Especially if one expects a preview right there in the WYSIWYG editor.

In Jekyll posting code is much simpler, even within Markdown text.

Bonus: because I’m editing the actual part of code that will be published, there’s no plugin or WYSIWYG or block editor dynamic formatting risking that some syntax will be corrupted.

Easier images management

I’m making a lot of screenshots and they use specific naming convention. If I upload them as is – files named like 2020-03-08-22-44-00-screenshot.png – it becomes rather tricky to later rename them for better SEO performance. With Jekyll renaming an image is as simple as renaming the image and updating Markdown page linking to it.

Bonus: any image uploads are as quick as moving files on my SSD drive! But yes, I obviously need to upload them into GitHub repo later.

Historical tracking of changes

This is becoming a very important point for me – it helps so much to keep track of all page updates as git commits! It’s possible to see latest update and previous versions of a page in WordPress as well, but there’s no easy way of seeing a timeline of all changes with description of changes. I’m using Jetpack status updates right now in WordPress environments and it helps, but you get only a week of history and even then you get a list of pages updated, but not the list of commit-style descriptions of what you changed.

Since I’m hosting Jekyll blogs on GitHub, I get to enjoy history, roll-back and automated deployments. Awesome!

Project Plan for Migrating WordPress Blog to Jekyll

These are the elements of migration as I see them:

Most of the high-level steps are generic enough, but here are notes of the modifications I made to date.

Implement Linking to Original Pages in English

I added a few new variables to the Front Matter section of page/post code:

translation: https://www.unixtutorial.org/sublime-text-3
translation_text: "Sublime Text 3"
translation_flag: /images/en-flag.png

In _layouts/post.html I added the following section to make sure of these variables:

Current Progress on this Project

Here is what I got done over this weekend:

  • setup new Jekyll blog
  • created private GitHub repo (can’t make it public yet because I’m using a paid Jekyll theme)
  • linked GitHub repo to my free Netlify account
  • created sidebar widgets
  • updated Jekyll theme to match top menu of UnixTutorial.org
  • manually created the first few pages
  • created first few posts
  • implemented support for translation links (back to Unix Tutorial)

Possible Next Steps

  • Make GitHub repo for Unix Tutorial RU a public one
  • Further develop sidebar widgets
  • Integrate with Pateron or similar service

See Also




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