This is a followup to our previous post on the new blog design. While that post explains the way the new blog works and the philosophy behind the name change, this post will get into the nitty-gritty of the move itself, covering most of the issues we had in the process.

Choosing a Platform

We decided to switch from CuteNews to Jekyll for two main reasons. The first was that it required a bit of hack-ish magic to get it to play nicely with Git. The second was that the CuteNews admin dashboard did not seem very robust. Once it deleted a post I was attempting to edit, but left links to it all over the dashboard as if it were still an existing post. I developed a workaround to prevent this since the bug only seemed to happen under certain circumstances, but since then I started searching for a more robust and customizable alternative.

At first I looked at some of the conventional dynamic server-side platforms like Wheatblog and Anchor, but these usually needed SQL or something similar. While I have nothing against SQL (I use it for my own projects quite often) it just seemed like there had to be a better way.

It was then that I came across Jekyll. Their home page read exactly like a description of my dream-platform. Small, fast, robust, easy to customize – these were exactly the things I was looking for. A couple terminal commands later I was sold.

Creating a Template

Creating the template was straightforward enough, as I had already done built the basic layout a few months ago on CodePen. One thing that did take me a while to understand was where the post-listing section of the home page was located. At first I thought it would be in the _layouts or _includes directory, but by changing these files I only succeeded in breaking the site. After some Google searches and a little experimentation I finally realized that it is not in either of those directories after all, but instead is located at $JEKYLL_PROJECT_DIRECTORY/index.html.

After I figured that out the rest of the template integration was relatively easy. One nice thing about Jekyll is that you can attach custom variables to any post. We use this feature for the post-specific background images. In the post itself I just set the variable like so:

---
# Default Jekyll stuff

background-image: "/assets/images/backgrounds/background-image.svg"
---

And in _includes/head.html we added:

<style>
    {% if page.background-image %}
        html {
            background-image: url('{{ page.background-image | prepend: site.baseurl }}');
        }
    {% else %}
        html {
            background-image: url('{{ assets/images/backgrounds/default.svg | prepend: site.baseurl }}');
        }
    {% endif %}
</style>

This sets the background image to page.background-image if the post has that variable set, otherwise it sets the background to a default image.

Deploying the Blog

Like Top Page Design, Lightbulb! is hosted on Openshift. Since it is not really part of the Top Page Design portfolio site, we decided to give it it’s own CNAME, which required putting it on another application. At first I tried out Openshift’s Jekyll application, but the version installed on it was old and it didn’t seem easy to upgrade it, so I just settled for a simple PHP web server, which would allow me to host PHP apps on this application, should the need arise. It also works well for serving my static HTML.

Questions?

If you want to know how we did something on this blog that I did not explain here, feel free to submit a comment right down there below my long-winded bio.

About Mark Fischer, Jr.

Mark is a web developer and programmer. He likes reading classic novels, listening to classical music, skiing, and eating donuts.

Filed under jekyll