Technical Blog 9: Jekyll


To the untrained eye, this website almost exactly like it did last week. There’s still the same picture of me, my beard, and my baby on the home page. You can click on links to learn more about me, projects I’m working on, and read blogs I’ve written. The first two pages are still works in progress with nothing to show but a “Coming Soon” notice.

However, there’s a lot going on behind the scenes that make the site cleaner, more functional, and easier to update. Here’s the rundown:

First, the homepage has newly designed headers and footers. I’m using Jekyll again, something I implemented way back at the beginning of this whole adventure. I removed it in order to really get into the DBC challenges and create something from scratch. Now it’s back, and I actually understand it well enough to make more personal changes. Jekyll allows you to dissect your html sections into separate documents, so I now have footer.html, header.html, and head.html. There’s an index page (that’s the main home page) that links to all of those and inserts the content into the right place. This makes it much easier to update the content once and have it take effect across the entire site, rather than having to update every single page during a redesign.

Also new on the home page, I’ve added an excerpt window for my Blog posts. Every time I write a new post, a snippet of it will be viewable in this window. Clicking on the Blog page used to take us to a timeline layout that I built. Essentially, it was a horizontal line with lots of little vertical lines coming out of it, and in those lines were my blog titles and links to the blogs. I liked it, but it took too long to update. Now, my Blog page is an organized list of all of my posts, sorted in reverse by date. You can even subscribe to my Blog through RSS at the bottom of the page.

The great thing about Jekyll is that this is all automatic. I don’t need to use CSS to move objects and text to a specific place. I don’t need to manually take a snippet and put it into the preview window on the home page. When I write a blog, as I’m doing now, all I need to do is provide a little information at the top of the page that looks like this:

—
layout: post
title: “Everything Old is New Again”
date: 2015-04-03
categories: blog
excerpt: “To the untrained eye, this website looks exactly like it did last week. There’s still the same picture of me, my beard, and my baby on the home page. You can click on links to learn more about me, projects I’m working on, and read blogs I’ve written. The first two pages are still works in progress with nothing to show but a ‘Coming Soon’ notice.”
—

Jekyll takes this information and automatically updates my Blog page to include the new post title and date. It also formats each blog post based on the layout style. If I’ve included an excerpt snippet, it places it in my preview window on the home page.

As for changes you can’t see, there are several. For starters, I’m no longer writing this blog in HTML, where I used to spend more time constantly updating every little aspect rather than just writing the damn post. Instead, I now write in MarkDown, which allows me to write plain text without need for extra tags or formatting. As soon as I write the blog and save it inside the right folder, Jekyll automatically formats it into HTML and sorts it on the Blog page based on its date.

You’ll notice I didn’t say that I ‘pushed’ my blog to GitHub to publish it. That’s because Jekyll comes with its own local server! This is probably the most amazing part of building a site with Jekyll. As soon as I turn the server on (with command ‘jekyll serve’), it automatically starts watching my entire website folder for any changes. Whenever I make a save, it catches the changes and publishes it to my live site instantly.

Also of note, I updated all of my code snippets to use Jekyll’s built-in syntax highlighter. This means that all my Ruby code samples have color changes so it’s easier to read and understand.

This site is also a LOT more mobile friendly. The home page isn’t super nice, but blog posts automatically format to the size of the reader’s screen, which is a huge step in the right direction.

Overall, the site is much cleaner and more streamlined. I’m looking forward to making updates and keeping up with my writing. Speaking of which, this is the last tech blog I’ll be writing for Phase 0 of DBC, but that doesn’t mean the writing ends here, Oh no. You’re in for a world of words.

My name is Edwin Unger, and I’m a web developer in training.