How to translate the Ghost platform. A nasty approach.

I came across this awesome blogging platform a couple of weeks ago and instantly decided to take a stab at it. As a vivid fan of minimal design I loved the concept (and the Casper theme). But what really caught me was the fact that cmd+s actually saves your draft on the platform, come on guys! that was a good one :D

Once I got it working in my site, I installed it for one of my clients but quickly realized the lack of support for translating the platform to spanish. Having a background in Magento I'm used to have some sort of translate.csv file which does it all for you. Well, Ghost doesn't have one and they ask in their website to Please do not send in translations for Ghost just yet, we are still setting up the best way to do this. We really don't want to throw away anyone's work.

So, I came up with a quick, unclean and nasty workaround (had to admit it) to translate the platform. Here is how you should do it for the casper theme:

1. Translate credits

  • Open the file ghost/content/themes/casper/default.hbs
  • Locate the following line
<section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>  
  • Translate it
<section class="poweredby">Orgullosamente publicado con <a href="https://ghost.org">Ghost</a></section>  

2. Translate pagination

  • Open the file ghost/core/server/helpers/tpl/pagination.hbs
  • Locate the following lines:
<a class="newer-posts" href="{{page_url prev}}"><span aria-hidden="true">&larr;</span> Newer Posts</a>  
<span class="page-number">Page {{page}} of {{pages}}</span>  
<a class="older-posts" href="{{page_url next}}">Older Posts <span aria-hidden="true">&rarr;</span></a>  
  • Translate them
    <a class="newer-posts" href="{{page_url prev}}"><span aria-hidden="true">&larr;</span> Posts Nuevos</a>
<span class="page-number">Página {{page}} de {{pages}}</span>  
<a class="older-posts" href="{{page_url next}}">Posts Antiguos<span aria-hidden="true">&rarr;</span></a>  

3. Translate navigation

  • Open the file ghost/content/themes/casper/partials/navigation.hbs
  • Locate the following lines
<h3 class="nav-title">Menu</h3>  
<a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>  
  • Translate them
<h3 class="nav-title">Menú</h3>  
<a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Suscribir</a>  

4. Translate the nav title

  • Open the following files:
    • ghost/content/themes/casper/author.hbs
    • ghost/content/themes/casper/index.hbs
    • ghost/content/themes/casper/page.hbs
    • ghost/content/themes/casper/post.hbs
    • ghost/content/themes/casper/tag.hbs
  • Locate the following line in each file:
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>  
  • Translate them:
<a class="menu-button icon-menu" href="#"><span class="word">Menú</span></a>  

5. Translate the post footer

  • Open the file ghost/content/themes/casper/post.hbs
  • Locate the following lines:
<p>Read <a href="{{url}}">more posts</a> by this author.</p>  
<h4>Share this post</h4>  
  • Translate them
<p>Lee <a href="{{url}}">más posts</a> de este autor.</p>  
<h4>Compartir post</h4>  

6. Translate the post-meta prefix

  • Open the following files:
    • ghost/content/themes/casper/post.hbs
    • ghost/content/themes/casper/partials/loop.hbs
  • Find the following line on both files:
{{tags prefix=" on "}}
  • Translate it
{{tags prefix=" en "}}

This pretty much sums up what's necessary to show your blog in your desired language.

Disclaimer: I strongly do not recommend this approach as it is a hardcoded, unclean solution. If you're interested in participating on the conversation about i18n support implementation and translating the platform the correct way, you should get into the Ghost slack conversation.

Disclaimer 2: You should really take a look at the Transifex code injection approach for localizing your Ghost website. I just don't like.