That time of year again

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.