Building Personal Website with Jekyll (4)

Preparation work and gathering software.

Jekyll and Ruby

Nobody really code their website, right? Well, for a lot of people, writing their own website really means hard coding every single line of text into their html code. Don’t get me wrong, I was once one of them, but you can’t go too far with that approach. Fortunately, one of the biggest advantages of computers vs. human is that they are much, much better on automating things than us. Why don’t we let computer write website for us?

Jekyll and Ruby comes to rescue.

Let me explain a bit, since these two words on their own don’t make any sense by themselves. Ruby to developers refers to a programming language that developers use to tell computers to do things. Very much like I am writing human understandable words to communicate to another human (yes, you!), I can write Ruby code to let our computer know exactly what I want it to do.

Jekyll, on the other hand, can be thought of a piece of software that takes in plain text files (known as the “markdown” files), and generates webpages. In short, it is a webpage generator written in Ruby. Thanks to the developer that created Jekyll, it is easy enough for anyone who doesn’t necessarily know the Ruby programming language to make their site. Let’s get started, shall we?

Setting up

Setting up Ruby

Just like almost everything else on the internet, depending on which operating system you are using, you might or might not have Ruby already installed on your computer. For example, Apple has a good track record of shipping some of the most popular programming language support with its own macOS. However, you don’t get that treatment in Windows, and I have no idea about Linux. Linux is just too difficult for my little brain that I generally avoid it if I can.

The easiest way to see if Ruby is already installed on your computer is by typing the following into a terminal or command line prompt:

ruby -v

It should output something like ruby 3.0.1p64 (2021-04-05 revision 0fb782ee38) [x64-mingw32] that tells you the version, otherwise it is very likely that you don’t have it installed on your computer. Simply visit the Ruby Official Site, follow the directions, and get Ruby installed on your computer.

If you are confused about what we are doing here, it is like teaching your computer to understand a new language so next time when we try to talk with it in this language, it can understand.

Grab your favorite Ruby editor

We also need something that supports Ruby code editing, something to edit markdown text files, as well a terminal.

While you can certainly use different apps for different things, for example, Notepad++ for editing code, Typora for editing Markdown, and Windows Powershell (Or NewTerminal 2 on macOS) for executing command, I personally prefer an all in one solution.

There are two solutions that I recommend, on the free side you can use Visual Studio Code (known as VSCode), and on paid software you have RubyMine developed by Jetbrains.

If you are a student, you can get an education version of RubyMine for free, but it’s totally fine with VSCode since we are doing very basic things and don’t need any advanced features.

I am using RubyMine, but you just need a couple extra steps if you want to use VSCode. Install VSCode from the VSCode Official Website, and once you get it installed, go to the side bar with big icons like “Explorer”, “Search”, “Version Control”, “Run and Debug”, and “Extensions”. Click on Extensions. In the search box, type in ruby and you should see extension for Ruby. Install the “Ruby language support and debugging for Visual Studio Code”. Do the same for markdown, and get Markdown support installed on your VSCode as well.

RubyMine is designed solely for editing Ruby (hence the name RubyMine), and comes with built in markdown support. If you are using RubyMine, you don’t need to do anything.

Grab your favorite Jekyll theme

There is a famous phrase that “There are one thousand Hamlet to one thousand people”, and it is somewhat similar here. After all, all websites that we are visiting, including this site, is nothing more than texts and images, maybe videos (Which essentially is just images played in a very fast speed). What is important is how designers decide to utilize different fonts, colors, and layouts to show the image. For example, if you ask the designer of Apple website and Pinterest website to make a website with the same text, I can guarantee the two will be very different.

Fortunately, we don’t have to decide everything by ourself. There are people who are professional web designers, and they build templates that other people can purchase and build websites. There are certainly free options, here’s a good one that many of my friends in academics use for their academic site: AI Folio

However, I fell in love with a template called Atega when I was researching for information on how to build a jekyll powered site. It does cost money, but it is not expensive. Of course, you can (and you should!) find templates that suits you personally the most. There are many sites that you can purchase templates from, one being https://jekyllthemes.io/, but of course there are other alternatives, and I am not advertising since they never gave me any money - instead, I spent $30…

Anyway, once you got your favorite template, we can move on to the next step, which I will write another blog about since this one is already getting very long.