Blogging with Ghost

Welcome to my new blog! I was intending to move from Blogger to a self-hosted blogging platform for quite some time now. Initially, I was looking into Python-based solutions which support Markdown or ReStructuredText, but I wasn't entirely happy with the available themes for any of the options there. Then, I discovered Ghost, an open source JavaScript application that runs on Node.js, with posts written in Markdown, and a default theme that looks great on desktop and mobile devices alike. You are looking at the result right now. The only adaption I did was to implement syntax highlighting for source code (see below).

Since I haven't blogged a lot over the last years, I decided to not include the old articles here, but rather start from scratch, with the intention to write articles on a more regular basis. The old blog ist still available here and URLs to old articles will be forwarded automatically. I also decided to switch off reader comments (at least for now). Instead, each post has links for sharing on social networks.

In the following I will give a brief walk-through of some of the more technical aspects of setting up this new blog.

Installing Ghost

I pretty much followed this tutorial, as it not only explains how to install Ghost itself, but also how to deploy it using Apache (which I happen to use on my virtual server). I did, however, decide to use an init script for starting Ghost instead of the suggested solution which uses Forever, since an init script will also make sure my blog is up and running after a server reboot.

Implementing syntax highlighting

I wanted syntax highlighting of source code on my blog. Since Ghost does not have this feature by default, I needed a third-party solution. While there are several options to get syntax highlighting of HTML <code> blocks, I decided to use Prism, as it has a plugin that allows adding a line numbers.

Installing Prism

I first configured the colour scheme to use (I chose the default), the languages to be highlighted and the plugins to be included, and downloaded the resulting prism.js and prism.css files to <path to ghost installation>/content/themes/casper/assets/js/ and <path to ghost installation>/content/themes/casper/assets/css/ respectively. I then edited my <path to ghost installation>/default.hbs file to include those files:

{{!-- Somewhere at the top --}}
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

{{!-- Somewhere at the bottom --}}
<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>  

As I wanted to keep the background of the highlighted code blocks consistent with non-highlighted ones and inline code, I uncommented all lines in <path to ghost installation>/content/themes/casper/assets/css/prism.css that defined <pre> or <code> elements.

Fixing default Ghost theme

I also wanted to fixe some issues with the way the default Ghost theme shows <pre> and <code> elements by making sure their definition in <path to ghost installation>/content/themes/casper/assets/css/screen.css includes this:

pre {  
    word-wrap: normal;
    -moz-hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
    }
pre code, pre tt {  
    white-space: pre;
    }

Forwarding old articles

Even though I decided to not have my old blog articles listed on my new blog, I still wanted links to them to continue to work. Since the old article URLs included a time stamp, it was easy enough to create a redirect rule (within the proxy definition) in the Apache config for my site in /etc/apache2/sites-available/:

RedirectMatch ^/(\d{4})/(\d{2})/(.*)$ http://fladd.blogspot.com/$1/$2/$3  

And that's it, blog.fladd.de is running on Ghost now.