Building my website with Jekyll
Recently I decided to update my personal website using Github Pages and Jekyll. One big selling point was that I could use Markdown to create my pages and posts. I was inspired by this blog post, which was a great starting point for me to dive into Jekyll. Here, I write about my own experience getting started. Rather than writing a comprehensive how-to post, I’ll just point to online resources that I learned from and highlight some troubleshooting items that I encountered.
See here for a nice overview of what Jekyll is and how it works.
To install Jekyll on my Mac, I followed the instructions on the official website. There were a few pre-requisites that I had to take care of first. I first had to update RubyGems and update my Xcode Command-Line Tools.
I also needed to install NodeJS.
Choosing a theme
With Jekyll 3.0, there were some changes that affected the rendering of Poole. As of this writing, it seems that Poole hasn’t been updated to be compatible with Jekyll 3.0.
When I tried to serve the website for the first time, I ran into some errors:
I found the solution here. I had to install the missing gem for paginate as it is no longer included in 3.0. I also installed gist as I’ll probably use it in the future.
I next made some changes in my
_config.yml file. The first was to add
the installed gems by adding the following lines:
Lastly, I removed the
relative_permalinks: true line.
A lot of my additional customizations were taken from here, which included how to add a navigation bar. I also made a few other adjustments, including right-justifying the navigation panel. To right-justify, I followed the changes from this user’s GitHub Page.
First, I enclosed the navigation bar with a
<nav> HTML tag in
Then, I added the float attribute to the CSS file
For fun, I also included some icon links using Font Awesome in the footer. I created a new HTML snippet called
icons.html and saved it inside the
_includes sub-directory. This blog post provides a nice explanation on how to integrate
social media links using Jekyll. Beautiful Jekyll also uses a similar approach.
Here, I’m only showing icons for Home
and GitHub, but I had also included others like e-mail and RSS in the real file.
To control which icons get shown, I added a custom variable
Be sure to add all the required site variables for this to work. For example:
Lastly, I added hover effects to the navigation items by borrowing some CSS code from a Bootstrap theme I previously used.
index.html from Markdown
Since I wanted my front page to be my “About Me” page. I replaced the default
index.html with a Markdown version
index.md, where I could write my profile in Markdown.
Jekyll automatically parses this file and creates an
index.html file when
serving or building the site.
Changing blog location
I wanted to keep my blog in a sub-directory.
A quick Google search led me to this blog post, which was
really helpful. Following Solution 2, I created a new sub-directory called
blog and added a new index file within that sub-directory. Then, in
I added a line to set how I want the blog post URLs to look like:
In this case, I wanted my URL to include the
blog subdirectory, followed by the
title of the blog post*. You could also include
the date in the filename as well by doing something like:
*Update: I actually decided to use this latter format to make it easier to see the date of posting in the URL.