Wordpress has always been my go-to solution for blogs, and any website for that matter. But coming to start my own blog, I realized it just wouldn’t do for me. While I love coding in PHP (yeah, you can laugh), I just find dealing with templates, plugins etc. way too frustrating. I wanted something simple, something nice and clean. Something STATIC.
I then stumbled upon this blog and fell in love with its simplicity. From there, the way to finding Jekyll was short.

Beginning of a journey

I fired up Cloud9 which has been my favorite online IDE for more than 5 years now (and has been acquired by Amazon since then. I was lucky enough to get an account in the service’s early years, which basically still gives me free access to the service, even after the acquisition), installed Jekyll to a new Ruby workspace and picked up a nice theme (since Hyde is apparently not playing nice with Jekyll 3).
I really like simple, flat and responsive designes. However, I always feel lost whenever I encounter a website that spreads all around the screen without any anchor (for me, it’s the menu), so it just had to be a design with a fixed left menu like leonids.
I also like dark themes (which are also easy on the eye ;P), so as you probably already noticed, I tweaked the colors a little bit to match my taste. The background and menu colors were borrowed from Fredrik Averpil’s blog. All credits for that to him.
One thing that I liked about Jekyll from the start was the fact that it plays nice with Markdown language, and more precicely with GFM, which is so easy to remember and use, especially when writing code excerpts (or Gists). The default syntax highlighting colors for leonids is for light themes, so I had to bring my own - my favorite Tomorrow Night theme. I found a stylesheet that was compatible with the syntax highlighting of Jekyll, and assigned it with SCSS variables for each color of the theme:

$syntax_background  : $background-color;
$syntax_current_Line: #282a2e;
$syntax_selection   : #373b41;
$syntax_foreground  : #c5c8c6;
$syntax_comment     : #969896;
$syntax_red         : #cc6666;
$syntax_orange      : #de935f;
$syntax_yellow      : #f0c674;
$syntax_green       : #b5bd68;
$syntax_aqua        : #8abeb7;
$syntax_blue        : #81a2be;
$syntax_purple      : #b294bb;

Note: I decided to keep a simple color scheme with two main background colors, and that’s why I went with the menu background color for code excerpts as well.

Tweaking GitHub’s embedded gists (brought by the jekyll-gists plugin) was not as easy, since I couldn’t find a predefined stylesheet, so I had to create my own. Example for that in action can be found down the road on this post.

Next was a small, yet important little tweak. I wanted a nice favicon to match the blog’s atmosphere. I grabbed a royalty-free icon from pixabay and ran it through favicomatic to generate all the required sizes. I then settled on the .ico and 128 versions only, though.

As I already mentioned before, Jekyll is simple. Almost too simple. And that goes also for publishing posts, which requires you to manually create a file and assign it a name with a date in a predefined structure.
I find it kind of annoying, so I borrowed the help of nice plugin called “Publisher”:

It basically saves the hassle to properly name the file for publishing. It goes to _plugins folder, and then whenever a file containing date: unpublished at the post header goes to _publish folder, it’s automatically published.
I ended up removing the following two lines, since I don’t care much about dates inside a post header:

now = DateTime.now.strftime("%Y-%m-%d %H:%M:%S")
replace(f, /^date: unpublished/mi) { |match| "date: \"" + now + "\"" }

Get it out to the world!

So at this point, I got a website running locally (on Cloud9 really, but it’s the same as running locally, really).
I was looking for a way to:

  1. Host it for free.
  2. Update it easily.
Hosting

I once built and hosted a JS-based CMS system on Google Drive. It worked just fine until in 2016 Google decided to put an end to this “feature”. I then moved the system to one of Google’s recommended solution: Firebase Hosting. I had a fairly good experience doing so, so my choice for hosting this time was quite obvious.
Setting up hosting on Firebase is a very straightforward experience to anyone with some decent understanding of internet and computers, and coupling it with 1GB free storage and 10GB traffic each month AND free SSL for custom domains is just too good to be true, for me at least.

Domain

For a domain I also wanted to get something for free. A quick research led me to Freenom, which seemed decent enough and provides free .tk domain registrations (which fits me just perfect).
To connect it with Firebase I went to the Console, chose “hosting” and then “Connect Domain”.
“Verify Ownership” step was a little bit challenging, and here’s what I ended up doing:

  1. On Freenom’s website, My Domains → Manage Domain → Manage Freenom DNS.

  2. Under “Add Record”:

    Name Type TTL Target
      TXT 14440 Value copied from Firebase

    Note: Mind the empty “Name” column.

  3. Once the ownership has been verified, I added up a couple more “A” records suggested at the last step “Go Live”.
  4. Last but not least, I also added an alias for the domain without “www” for ease of access.
Automate the update process

Next I was looking to make the build and deployment process as fast and easy as possible.
For that I decided to use Bitbucket Pipelines. It’s a service that’s built into their Git service which provides free 50 minutes building time each month. For reference, building this website takes less than 2 minutes.
Figuring this out took me some time and digging up. These are the steps I ended up taking: (all steps were performed on Cloud9, and can also be done locally)

  1. Set up Firebase with a wizard: firebase init
  2. Edit firebase.json to point to the correct website folder (_site). This is what the file ended up looking like: 
     {
   "hosting": {
     "public": "_site",
     "ignore": [
       "firebase.json",
       "**/.*",
       "**/node_modules/**"
     ]
   }
 }
  3. Get a token for deployment: firebase login:ci --no-localhost
    Note: I’m working remotely so I had to use --no-localhost
  4. Create a bitbucket-pipelines.yml file: 
     image: radul/jekyll-firebase
 pipelines:
   branches:
     master:
       - step:
           script:
             - '[ -f Gemfile ] && bundle install'
             - bundle exec jekyll build
             - firebase deploy --token TOKEN

    Note 1: I’m using a Docker image I found on Docker Hub which has Jekyll and firebase already installed.
    Note 2: TOKEN on the last command should be replaced with the token aquired in previous step, put inside double quotes "TOKEN"

  5. Create a Gemfile file: 
     source "https://rubygems.org"
 ruby RUBY_VERSION
    
 gem "jekyll"
    
 group :jekyll_plugins do
    gem "jekyll-gist"
 end

    Note: I’m only using jekyll-gist plugin. Any additional plugin should be added with a new line. Ex: gem "jekyll-admin"

  6. Create a .gitignore file: 
     _site
 .sass-cache
 _config.yml
 _drafts
 .ruby-version
 .c9
 node_modules

    Note: .c9 and node_modules are there due to the fact that I’m working from Cloud9.

  7. Push everything to Bitbucket repository!

At this point, an automated build process should take place and can be viewed from the “Pipelines” tab on the repository page.
Note: Should the build fail, a detailed log can be reviewed by going into that specific pipline.

Extra stuff: Making my life easier

For starters, I created a post.sh file that saves me the hassle to type in the commands to push everything to Bitbucket:

#!/bin/bash

git add .
git reset -- _config.yml
git commit -m "update"
git push

Note: I dont care much about logging my commits so I settled for a fixed commit message. Setting the commit message as a variable can be achieved my replacing "update" with $1, which will require an argument each time ./post.sh <commit message>
Update: I ended up adding the second line because .gitignore is not included when adding all files. Not extremely elegant, but it works.

Extra stuff: Google Analytics

leonids has a predefined spot for Google Analytics, so I figured why not. I simply registred an account with my own Google account, and copied the code starting with UA to the dedicated section in _config.yml.

Extra stuff: Disqus comments

In the same fashion, I also enabled embading comments on my Disqus account. I chose a unique shortcode which I put, again, inside _config.yml.

Last words

For my first time using Jekyll, I’m quite pleased with the result overall. The blog looks extremely clean and easy to read from any device (in my opinion, at least), the performance of Firebase is just unmatched - the blog loads up as soon as I hit Enter, and the automated building process with Bitbucket Pipelines it just amazing.

For any questions or suggestions, please don’t hasitate to leave a comment down below.