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:

• setup new Jekyll blog and host it on GitHub
• create sidebars
• implement linking to original posts/pages on Unix Tutorial
• recreate the same permalink structure for posts and pages
• migrate content for the first few posts and pages

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

• Unix Tutorial Projects
• Project: Setup Jekyll Blog and Host it on GitHub Pages

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:

 

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:

• Read https://help.github.com/en/articles/quick-start-setting-up-a-custom-domain
• Visit https://github.com/greys/greys.github.io/settings
• Populate the Custom domain field in under GitHub Pages section
• Update your DNS provider settings (I’m using CloudFlare, can’t recommend them enough!): gleb.reys.net is a CNAME pointing to greys.github.io.
• Double-check repo settings. Eventually it should recognise your DNS update and will show you something like this in the GitHub Pages section:
  

Secure website with HTTPS

This may take a bit, the Enforce HTTPS option is not immediately available:

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

• Read https://help.github.com/en/articles/securing-your-github-pages-site-with-https
• Visit https://github.com/greys/greys.github.io/settings
• Tick the Enforce HTTPS option under GitHub Pages section

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:

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

• Unix Tutorial projects
• Unix Tutorial Project: Centralised RSyslog
• Unix Tutorial Project: Compiling Brave browser in Linux
• Private repositories on GitHub are now free!

 

Good news, everyone!

Starting yesterday, GitHub allows free accounts to have unlimited number of private repositories. The number of collaborators for such repos is limited to 3, but this is still a massive improvement and something I’ve personally been faiting for. There’s just too many little things in a sysadmin’s life that could benefit from git tracking but won’t justify a premium price tag.

Updated GitHub pricing

This is how pricing looks now:

How To Create a Private Repository in GitHub

Assuming you already have a GitHub account and you’re logged in, creating new repository is fairly straightforward:

Previously, selecting the Private type of repo would show a pop-up asking for paid upgrade of your account, but as you can see on the screenshot above, this is not the case anymore!

Once you click the Create Repository button, you should see your brand new repo:

Adding your SSH key to GitHub repository

If you haven’t done this yet, now would be the time to access Settings in your profile (open URL https://github.com/settings/profile in another browser tab) and go to the SSH and GPG keys section there.

This will let you upload your existing SSH key that you later can use for accessing your GitHub repositories:

As seen on the screenshot, you provide some title to the SSH key and then copy-paste the whole key (I’m not including it in the screenshot fully).

The good sign that your key is added should be something that shows it like this:

 

Connecting to your GitHub repo using SSH

Going back to your GitHub repository, in the top right section you should see a green button called Clone or download. If you click it, you’ll see a window with URL to your private repo. Don’t forget to click the Use SSH there and you should see something like this:

Copy this onto your Linux/Unix desktop and run this in the command line:

greys@maverick:~/proj/unixtutorial/github $ git clone [email protected]:greys/unixtutorial.git
Cloning into ‘unixtutorial’…
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.

You should see a new subdirectory created in your location:
greys@maverick:~/proj/unixtutorial/github $ ls
unixtutorial

and if you change into that directory, it would contain your private GitHub repository copy – which at this early stage only has the README.md

file:greys@maverick:~/proj/unixtutorial/github $ cd unixtutorial/
greys@maverick:~/proj/unixtutorial/github/unixtutorial $ ls
README.md

That’s it! Hope you like the good news about free private GitHub repositories and stay tuned for more news and Unix/Linux How-To’s!

See Also

• ssh command
• Change passphrase to your private SSH key