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:
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:
Download and install Ruby+DevKit using the instructions found here
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 serve
from 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:
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. 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). % 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.