It’s almost new year and the urge to upgrade my blog comes back.

Well, has been a while since I’m using Octopress and so far was working great, but the lack of updates(I know Octopress 3.0 is coming) and plugins make me wanted something new, I started searching for a replacement, I tried Pelican, Hexo and Ghost.

The standard choice would be Pelican, since it’s Python. But Ghost was the chosen one, because it’s simple, fits my needs and the writing/preview post looks bad ass.

Getting Started

Ok, new blogging platform has been chosen. I followed this documentation to install it. Keep in mind I’m using default Ghost default theme Casper with a few tweaks.

What now? My blog is not complicated, below my requirements:

  • Disqus integration.
  • Import posts from Octopress
  • Social links
  • Static pages
  • Google Analytics

Import posts from Octopress

This is the crucial part because I will not write all that again. I used this script https://www.npmjs.com/package/oghost. It’s simple to use, inside _posts folder run:

npm install oghost -g
oghost > ~/exports.json

But it’s not perfect, I had to fix all the images and some code blocks.

Disqus Integration

Ghost documentation is very well made and the tutorial to implement Disqus integration is pretty straightforward: http://support.ghost.org/add-disqus-to-my-ghost-blog/

Google Analytics

Again Ghost documentation shines, http://support.ghost.org/add-google-analytics-blog/

I’m using Font Awesome icons, first I created the file partials/social-links.hbs

<p class="social-links">
	<a href="https://twitter.com/user"><i class="fa fa-twitter"></i></a>
	<a href="https://github.com/user"><i class="fa fa-github"></i></a>
	<a href="https://linkedin.com/in/user"><i class="fa fa-linkedin"></i></a>
	<a href="{{@blog.url}}/rss/"><i class="fa fa-rss"></i></a>
</p>

Paste the code below inside Code Injection, Code Injection is very handy, no need to edit files to try a new css for example:

<style>
.social-links {
			background-color: #222;
    		background: none;
			display: inline-block;
			font-size: 3rem;
			@include border-radius(0.8rem, 0.8rem);
			@include opacity(0.3);
			padding: 0.8rem;
			transition: opacity $my-animation-duration;
			width: auto;

			@media #{$medium-breakpoint} {
				font-size: 2rem;
			}
			&:hover {
				@include opacity(1);
			}

			a {
				color: #000;
				padding: 0 0.3rem;

				&:hover {
					color: $secondary-color;
				}
			}
</style>

The last step is to add social-links to index.hbs, you can add after @blog.description:

{{> social-links}}

I’m still testing syntax highlighting, but so far Ghost is working great for me.