My previous attempt at a Github Pages website used Vue.js to help simplify the construction process. Since the site was mostly meant to serve as a resume website (past project lists, employment history, education, etc.), it was mostly lists of objects. Using Vue.js meant I could construct my lists in JSON format. However, when I wanted to shift gears from a resume website to a blog, I knew that it would take too much time to continue to develop it in Vue.js. Eventually, after some googling, testing, and head-scratching I determined that the best solution is sometimes the simplest. In this case, that means Jekyll.
For this project I had a couple of objectives:
- The website should be publishable on Github Pages
- The website should have blogging functionality
- The website should be easy to update
- Teh website should have a simple and pleasing theme
In reviewing all of these requirements, I decided that a Jekyll site published to Github Pages would be the appropriate solution.
While it was not immediately aparent how to implement a Jekyll site (despite this very sussinct tutorial), it can actually be done in relatively few steps assuming you are starting from scratch.
While I could feasibly do all of my development work from within Github, I find it better if I can see my changes live. In order to do that, I needed to prepare a few things:
Find a Jekyll theme that I liked on GitHub. There are many out there (including officially supported GH-pages themes) but I chose Hydeout for this blog. Once i had cloned the repository to my local machine (
git clone https://www.github.com/[user]/[repo].git) I could then rename the containing folder to something more appropriate (in my case, change “hydeout” to “home”).
Ensure the theme works by running
jekyll servefrom within the project directory (./home in this case). After navigating to https://localhost:4000 I could see the theme’s website which means that it works.
Now for the fun part! After I tested the site to ensure operability, I could start to make the blog my own. I took this time to change all personal information, remove demo blog posts, and update miscellaneous information. Some of the _config.yml and other settings that were changed and not so obvious (to me) were:
- updating the theme to “jekyll-theme-hydeout”
- updating the budler dependency to version 2.4.1 in jekyll-theme-hydeout.gemspec with the following line:
spec.add_development_dependency "bundler", "~> 2.1.4". For some reason, I was running into an issue where it expected version 1.* and all I had was version 2.*. While this is clearly a shortcut, it seems to work now so I’m going with it.
- When testing I need to make sure that I’m in the root folder (/Home/ in this case) before I run
jekyll serve. Failing to do so will cause your build to fail. The same root folder is the folder that I needed to push to github (not the hydeout folder that is bundled with the repo after cloning).
- The tagline of the website is hidden in /_includes/sidebar.html
- Turning off commenting with Disqus is done by commenting out the following code in the layout pages (i.e. /_layouts/post.html)
% include comments.html %
Moving my site to a public location was fairly straight forward since I’m already familiar with Github Pages. All that was required was to push my home directory (/Home/*) to my github repo under a gh-pages branch. Then, in the repo settings, make it public and tell Github to publish the gh-pages branch.
While I’m clearly late to the party, I think Jekyll will be a great solution to my current need. I know there is tremendous room for growth and many areas where I can expand my learning (Ruby is chief among them), but I’m very happy with my shiny new blog for now.