blog.jason_writes_code

A few days ago I decided that Blogger is just too hard to work with. It takes me so long to write a blog post that I either end up pasting a bunch of code into a post and calling it complete or not writing them. This frustration led me to start exploring what other people are using for their blogs.

I’ve used Wordpress before and on many hosting site it can be installed with a click of a button. That’s great and there are tons of themes out there, but when you get into it, I still find it hard to customize a theme. For one thing, there’s about a thousand PHP files to look through and edit after you install a theme.

This led me to Ghost which looks awesome and easy to use, plus their hosting plan will take care of any setup needed. Ghost is a nodejs based site which it promotes as making it lightning fast compared to other platforms. Unfortunately, a lot of basic web hosts don’t support nodejs sites, so if you decide to use your own web host you might run into some issues. I ended up not using Ghost because it’s not free. :)

Finally, I came across Jekyll. The difference with Jekyll is that it’s not really a blog site or platform like WordPress or Ghost, but a site generator. What is also neat is that it doesn’t use a database.

How do you write posts?

Since Jekyll is a site generator, you are free to build or download whatever html template you want. After you have your html code, you can start slicing it up and adding liquid markup where ever you want your dynamic content to go. For all your posts, they go in the _posts folder (drafts go in the _drafts folder) and can be written using markdown. More on directory structure can be found here: jekyllrb.com/docs/structure. Then when you run jekyll build from the command line, your static blog site is generated and put into the _site folder.

I can’t tell you how much nicer it is to be able to write your posts using markdown. The command jekyll server with actually spin up a quick node server so you can preview your website at http://localhost:4000/ and it even watches for changes allowing you to edit the markdown, and instantly view the compiled output in your browser.

There are Jekyll themes out there and I ended up using one called Twenty by HTML5 UP from jekyllthemes.org as a base layout for my blog. Downloading and looking at the template, I was able to easily tweak everything as I wanted because it’s just html. As for the formatting of my code samples, I’m using Prismjs which I discovered while viewing other popular blog sites. It is quite a step up from Syntax Highlighter that I was using on Blogger.

Hosting of GitHub

Maybe I’m late to the table on this but GitHub allows you to host your site from a public GitHub repository. Just create a new repo named username.github.io, where username is your username (or organization name) on GitHub. After that clone the repo to your computer, copy all your files that Jekyll has copied to the _site folder, run git push and your site is live.

Any code examples?

With all this I did have to figure out one thing and good old stackoverflow came to the rescue. The template I downloaded was for a whole site, but right now I only have a blog so I cut out everything but the blog page and made that my index.html page. The template was setup to display all blog entries with an excerpt and a read more link. This wasn’t going to work, I only wanted my most recent blog entry featured with navigation to all my other entries in a side bar. Being really new to Jekyll and the Liquid templating markup, I had no idea where to start.

Thankfully, someone had already figured this out: stackoverflow.com/questions/19086284/jekyll-liquid-templating-how-to-group-blog-posts-by-year.

This is the code I ended up using from that post, and it worked quite nicely.

{% for post in site.posts  %}
    {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
    {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %}
    {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
    {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %}

    {% if forloop.first %}
    <h2 id="{{ this_year }}-ref">{{this_year}}</h2>
    <h3 id="{{ this_year }}-{{ this_month }}-ref">{{ this_month }}</h3>
    <ul>
    {% endif %}

    <li><a href="{{ post.url }}">{{ post.title }}</a></li>

    {% if forloop.last %}
    </ul>
    {% else %}
        {% if this_year != next_year %}
        </ul>
        <h2 id="{{ next_year }}-ref">{{next_year}}</h2>
        <h3 id="{{ next_year }}-{{ next_month }}-ref">{{ next_month }}</h3>
        <ul>
        {% else %}
            {% if this_month != next_month %}
            </ul>
            <h3 id="{{ this_year }}-{{ next_month }}-ref">{{ next_month }}</h3>
            <ul>
            {% endif %}
        {% endif %}
    {% endif %}
{% endfor %}