In the first part of this series, I would like to tell a story about tools I used to build this blog, why I chose them and how much they confused me at the beginning.

“Shopping list”

Despite of the popularity, setting up a blogging platform never lacks of “suprises”. With all of tutorials on the Internet, I still encountered many difficulties to setup this webiste. That’s why I think it could be a good idea to start my very first posts to write about how I set up the site.

Firstly, I decied to go Jekyll because of its popularity and, in fact, I used it long time ago on Github Page but then for many reasons (*cough* la~~~zy *cough**cough*) I stopped writting there. This time, I decided to setup my own site instead of keeping using Github Page because I want to learn more about how they do it, as well as having more control on the way i can config it. It could be fun 😜, couldn’t it?

So, let’s go through my “ingredients” list:

• OS: Ubuntu 20.04.
• Jekyll 3.8 (the newest one at the time of writing this post is 4 but I will explain why later).
• Octopress 3: a CLI wraps arounds Jekyll 3 to perform some tasks easier and more efficent. This is the “later” reason of using Jekyll 3.8 🤣.
• Jekyll-Text-Theme: I find it a very customizable Jekyll theme.
• Nginx
• Git
• A domain name, korstic.com 😎
• Certbot: the application for automating certificate issuance of Letsencrypt to setup HTTPS protocol for our site.
• An it-is-not-scary mindset 😆.

In the next section, I will quickly introduce about the tools above. They gave me some confusion at the beginning 😟.

And for easing our mind reading this post, I have some styling convention applicable for all of my posts:

• If a path starts with / it means at the root of the project ( root of the blog directory ). Unless there is a $ / then it really means the root directory.
• If a code block start with $ it means the code is run in the terminal.
• If !! (bang without sha 🤣) appears at the begin of the code block then it will describe the file in which the code rests.

So let’s go 😸

Jekyll, Octopress, and Jekyll-TeXt-Them

I will not talk more about Jekyll, you can find most of information about it here. For a quick introduction, Jekyll is a static file blog platform. It means that as the result, Jekyll will generate a fully static HTML website, whose .html pages are stored in directories and linked to the others by the full link to their .html files 😃. Let’s imagine our very first HTML website we built in school with a bunch of direct or relative URLs to other .html files. It’s what Jekyll creates! (and more of course but please KISS 💋)

Jekyll installation is very straight-forward. You can find the full instruction on their website. However, on the very first search on Google, you may see another name Octopress. While many people recommend to use it, Octopress is not always clear about what it does and how we can use it. The website’s last post was from Jan 15th, 2015. And documents on their website are for version 2. So what is Octopress and how it helps to build Jekyll more easily.

Jekyll vs (and) Octopress

Before going to talk about Octopress, we should know why we need it first.

Firs of all, Octopress is a tool to help us using Jekyll easily (or “like a hacker” as they advertised because of its CLI). It provides a set of CLI commands that we can use to quickly scarford a new blog with a Gemfile for required gems (like you run jekyll new PATH¹), and create page, post, draft² etc…

I know that many of us feel that Jekyll is already very easy and ready to use. It is true. But it doesn’t mean that it couldn’t be easier 😄. For example, in Jekyll, in order to create a post you must create a file under _posts whose name must be in the following format:

YEAR-MONTH-DAY-title.MARKUP

Andddd the… laziness comes from here 🤣

When we have to keep checking and typing the date in the filename, I don’t know about you but this is a deadly point for me 🤣. And as you can guess, the most important feature of Octopress (for me) is to create posts with current date prepended in the name 🤣

Furthemore, since it can create post, Octopress can also create draft and page from CLI too.

To make it more flexible, Octopress allows us to create posts, drafts, pages from custom predefined templates. Example, if we always want to add the same set of front matters to all the posts, we can put them in a file named post under /_templates.

!! /_templates/post
---
title: {{ title }}
date: {{ date }}
---

So that the next time you run

$ octopress new post <TITLE>

A new post /_posts/<TITLE> will be created with the title as <TITLE> and date is the datetime when the post is created (see this for the date variable). These information is added by Octopress when we use its CLI 😎.

Although we can always set the default front matters in the config.yml file, specifying them in the template has another benefit to give a hint of what should be change in the matters e.g title, date etc… SOOO, cool!!!

There are other useful features in Octopress that you may find interesting such as:

• Publishing: convert a draft to a post. I got an error when trying this feature. However, I found a solution by myself. You can have a look at it here
• Unpublishing: the other way around.

Above is the features which are most useful for me. You can find all the Octopress 3 features on their website.

Fix Octopress publish command

When the first time I run Octopress publish command ³, I got this error

$ octopress publish _drafts/how-to-build-korstic-part-i.markdown
...
/.../.rvm/gems/ruby-2.7.0/gems/titlecase-0.1.1/lib/titlecase.rb:34:in `replace': can't modify frozen String: "" (FrozenError)

I found a solution for this by editting the source code of Octopress. I pushed it to a cloned version of Octopress in my Github.

Why Jekyll 3

When you create a new blog scarford, Octopress will also create a Gemfile including jekyll version 3. I tried to replace it by version 4, however when I do that I cannot use Octopress CLI anymore e.g. create post, draft etc… So that’s why I must stick with Jekyll 3 till now.

Jekyll-TeXt-Theme

Setting up a blog and styling it are two different things. By default, Jekyll styles the page with default Twitter bootstrap style. I know that it’s flexible but so boring. Moreover, Jekyll provides a very open way to config the files structure. If you have time and want to design your own site with your own structure, you can build everything from scratch. Otherwise, available Jekyll themes will be a great choice. Additionally, you can always edit the chosen theme to suite your taste. They are either in Ruby gems or Git repo form.

After a research, I decided to implement Jekyll-TeXt-Theme for my blog 🥰. It is very well designed and covers most of everything I need for a website from styles to functions. The theme provides many options for theme styles and a vast number of layout designs. It is a great work! Thank you!

Although the author made a good documentation for using the theme, there are many things not in it. However, we can go to their blog and use the “edit on Github” button on every post to see the markdown codes behind the page. In addition, I read directly the theme source code where I found many things that I can hack around to create my desired outputs.

And I think it is enough for today (yay😁!!!). In the next posts, I will write in details about how I actually setup and config my website and the theme to achieve this result.