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/
Social Links
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.