Switching my blog engine to Ghost

My plan to move the blog.

A couple of months ago there was a campaign on Kickstarter that offered to create a new blogging platform – Ghost. It sounded promising so I become a backer.

After I received an invitation and tried the platform I decided to switch to Ghost after they open source the code on GitHub. To do so I started planning the migration process which I want to share with you today.

First things first. As the platform is very new it’s important to get creative in order to have more than “just a blogging platform”. (With this slogan the providers wants to stress that they have no intention to develop another Content Management System (CRM), like WordPress has become.)

What does Ghost offer?

Today it offers a very rudimentary blogging platform with a markdown editor as writing tool. They use Node.js as environment and have a very clean code base – certainly because at the time there isn’t very much code at all. As a developer it is a nice opportunity to get involved in an upcoming platform and influence the direction with suggestions or by pull requests via GitHub.

As of today the main limitations are the missing comment system and the (work in progress) file and image administration.

The not existing comment system isn’t a problem, it’s a feature! If you want a comment system you can use a comment system service like Disqus. Later, there will be plugins therefore, due then you need to modify the theme.

My current comments are on Disqus and I wouldn’t have a problem to switch them to Ghost as long as the links to the posts will still be the same. The reason therefore is that Disqus links the comments with the post via the post url. But this shouldn’t be a problem as every link staying the same is a priority of mine to maintain the connection with other sites that have posted links to my content.

Rather than stay with Disqus I would like to implement the Google+ comment system. It would need just a few steps to archive this but I would lose all preview comments. In order to achieve this without losing my comments, I adopted the Google JavaScript to find a way to add my old comments. I had no luck with that but I hope that there will be a solution in the near future – maybe Google opens the API? In the meantime I’m fine in using Disqus.

The file system can also be obtained by a service – search for “image cdn service”. On the one hand, I think from a visitor’s perspective this is the appreciated way to serve your images. Because of the high performance and optimization of this services they can decrease the loading time significantly. On the other hand I’m rather skeptical about getting my images to other parties because if my blog goes over the free traffic limit of this services I have to pay for the service beside my normal hosting fees. Furthermore, if the service is down my site won’t show any images – you can still read my blog without comments but without images it’s a poor user experience.

Probably, I will try the Azure storage account combined with their Content delivery network (CDN) service. I know that it’s not a cheap solution but I prefer having full control over my content. Additionally, I am planning to move the whole blogging environment to Azure, read more about it below.

A custom Theme for a new platform.

Being sure to switch my blogging platform I thought about a custom theme. I like a clean theme that works well on all browsers and concentrates on the text and reading experience. Ghost is eager to provide such a theme, so why develop one by myself?

I am going to develop a custom theme because I have a few requirements that I always need to implement by myself. Therefore I prefer to build my own. One of the main requirements is to post code. I need a theme that highlights the code and scales it for small and large devices. The second requirement is to use micro formats for defining the author and the post. This is important for search engines in order to improve the preprocessing of the information.

The theme developing process.

Although Ghost was not accessible for me yet, I started to develop my theme because it is easy to guess what information’s will be displayed in a blog and from the Kickstarter campaign I knew that the content will be displayed via handlebar.js. Handlebar.js is a template engine for JavaScript. Having created my theme I just need to switch the static content with the appropriate handlebar syntax to dynamically display my content.

To start with development I made a snapshot of my browser and removed the content in Photoshop. As a result I got my border template for the new blog. Then, I started to search the web for blog themes I like and collected them. With this collection I started playing around, creating a design prototype in Photoshop. Below you can see two pictures of my template but they are still not finished because I iterate over the process and customize the images as soon as I have a new idea to see if it works out.

Website prototype iteration 4

At NightlyBuild I have published the current state of the process. This is a good way for testing the template on different devices and also let friends check it out to get feedback.

As a side note: I have hosted it at x10hosting.com. It is free as long as you login once a month, you can add your own custom domain and they have a very comprehensive toolset.

Website sidebar prototype iteration 4

The hosting and developing plans.

I was searching for a (very) stable hosting provider that offers me to run a Node.js application and is not too expensive for my low bandwidth usage. Many services offer to run Node.js applications but they are very expensive if you just plan to run a little website on it. After looking around I thought about Azure.

Usually, Azure is not really cheap but it offers the best flexibility and for testing something out it’s very cheap because you can run you applications for a few minutes on Azure, check if they work like intended and then shut down everything again. So I started calculating how expensive it would be to run a little server on Azure and what I would need to run a Node.js application. It turned out that you can use an Azure website to run such an application and it costs 9$ the month. Not cheap but for the flexibility you can get it is definitely interesting.

So I looked into it and found out that you can easily deploy new versions of your application by providing a Git repository connection in the configuration of your Azure website. This is a really nice feature that was totally new to me. It means that I could add the Ghost GitHub repository in my configuration and would be able to update my blog to the newest version with a click of a button. There is also a panic button that reverse the process if anything goes wrong.

The setup.

Finally I decided to build the following setup to develop and host my new blog. Because I want to be able to develop my own theme and maybe some extensions, I need a test environment and an own source control system. As source control system I choose my existing Team Foundation Server (TFS) service. You can host your source code for free and since a couple of months they provide you with the option to use Git as source repository – perfect! The same system as the Ghost project uses, making copies between my source code and the official source easy.

5 branches in one project – oh my.

I created a new Git project on my TFS service and added 5 branches. The first is for cloning the main branch of the Ghost GitHub project to my repository. The second for my html theme. The third is my nightly build branch dedicated for the active development on plugins and merging the html theme. Another branch for integrating the official branch and the nightly branch and the last branch is the public branch. The code of the public branch will be used to publish new versions of my blog.

Don’t worry, I have created an overview to visualize my idea. Read on, it will show up bellow.

4 Azure websites, because I can.

On Azure I created one website as shared. This means that I have to pay 9$ per month and get the possibility to add my own domain to it. This will be the website for my blog.

The other three sites will cost me nothing because you can host up to 20 websites on Azure for free – as long as you do not need custom domain names. One of the three sites will be used for testing new versions of the (cloned) official GitHub repository in order to see the new features in action and decide if I should push the changes to my blog as well. The other two sites are for testing the nightly build branch and of course for the integration branch.

Below you can see a diagram that illustrates my setup.

Diagram of the setup

In summary.

I know my setup is oversized for such a little blog but in my job as developer I’m used to have this kind of setup to ensure a high quality of our releases. So I’m familiar with it and it won’t take me long to get this setup and running.

As you know my last blog post was a few months ago. It’s because I have switched my company and had to get back in my routine. But now my love for writing is back and I will keep you posted on this project. In the meantime I’d like to hear what you think about my plans :-)

4 thoughts on “Switching my blog engine to Ghost

      1. but won’t Auzre overwrite the database if it redeploys your website to different hardware? Or is your database with all your posts included in your git repo?

        1. Haven’t thought about that and didn’t get a solution by a quick Google search.
          I think it’s not a problem for the test environments, I don’t care if my repository overrides the server db file.
          However for the main/public branch I need to keep in mind to backup/sync the db file before I deploy.

Leave a Reply

Your email address will not be published. Required fields are marked *