Setting up this blog, Part 3

Full Series: Part 1, Part 2, Part 3, Part 4

Once I had my environment ready, I needed to actually create the blog. While blogs can be a complex CMS, I didn’t want mine to be. I’m a fan of recent trends for statically compiled websites and GitHub Pages natively supports Jekyll- it was an easy match.

Jekyll

I initially used GitHub Pages’ automatic Jekyll compilation, but quickly switched to local compilation to take advantage of newer features (at the time of writing, GitHub runs Jekyll v1.5.1 while v2.1.1 is available). The features I wanted to use were: Frontmatter Defaults and Plugins (although I don’t actually use any plugins yet). I disabled GitHub’s by adding an empty .nojekyll file to the root of my source branch.

To get started on the blog, I created a single HTML page representing the landing page. I wanted a minimal look, drawing focus directly to the content. To help visualize, I hacked in some fake posts to have content to work with. I grabbed Bootstrap for grid layout and theming. Of course, creating a webpage layout and styling didn’t just happen, I spent hours across days fine tuning it into something I was happy with.

With a structure in place, I needed to get posts to dynamically show instead of being hardcoded. Jekyll uses Liquid Templates to handle dynamic behavior. Here’s a snippet of the loop I used:

{% for post in site.posts limit: 10 %}
<div class="post well">
  <small>{{ post.date | date: "%B %-d, %Y"}}</small>
  <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
  {{ post.content }}
</div>
{% endfor %}

With the above block, I now had a webpage that could dynamically load the latest 10 posts. Jekyll expects posts to be in a folder named _posts and named in a specific way. I then migrated a few posts from the old blog system using Markdown for content layout (see my _posts folder on GitHub).

Now I had a website and some content, but for Liquid to dynamically load posts I needed to compile the website into a static page. Jekyll makes it easy!

jekyll build

Boom. This created a _site folder with the compiled HTML ready to go. Wait, go where?

Next Part: Deploying to GitHub Pages.