Ghost is a blogging platform that has been gaining traction of late. It is fast, lightweight, open-source and focused on content publishing. The first question people often ask about Ghost is: how is this different from Wordpress? Here is a quick, bullet-point comparison:

(Ghost vs. Wordpress)

  • Blogging platform vs. blogging platform turned content management system
  • Lightweight vs. feature rich
  • Faster (Node.js) vs. slower (Apache/PHP)
  • Handlebars templating vs. PHP/HTML spagetti code
  • Markdown vs. text editor for writing articles
  • In development vs. stable

We recommend Ghost for people with some background in programming. If you have experience with modern Javascript frameworks, Node and Markdown, you will find that Ghost uses patterns and libraries that you are already familiar with. It is also a joy to use as it is written in a modern way.

Ghost Themes: An Overview

As Ghost is relatively new, there aren't that many themes out there yet. One of the things you'll want to do after setting up your Ghost blog is to customize its look. Fortunately, John O'Nolan has made sound architectural choices that make customization a breeze. Casper and other existing themes serve as a great reference points for making your own.

Ghost themes are located in /content/themes/{theme_name}. When stripped to its core, a theme has three main files:

  • default.hbs: Base template file for index.hbs and post.hbs
  • index.hbs: Displays recent posts
  • post.hbs: Displays single post

The relationship between these files is illustrated in the diagram below.

With this knowledge, you're set to dive into these files and create a customized theme. Note that there are other optional files (e.g. tag.hbs), but these three form the core.

default.hbs

The default.hbs file is the base template file that other template files inherit from. It defines headers, footers, css and scripts that are consistent throughout the blog.

The barebones layout of default.hbs is shown below. Other template files like index.hbs and post.hbs are rendered into the {{{body}}} tag. Think of the {{{body}}} tag as ng-view in an Angular app.

<head>  
<!-- Usual headers -->  
<!-- Links to fonts and CSS -->  
</head>  
<body>  
<!-- Header -->  
{{{body}}}
<!-- Footer -->  
<!-- Links to Javascript files -->  
</body>

index.hbs

Index.hbs is the home page of your blog where a list of recent posts are populated. The array of post objects are passed into the index.hbs template when rendered. Index.hbs is set up so it iterates over these posts and renders each one. This is similar to The Loop in Wordpress.

The stripped down structure of index.hbs is shown below. You can use HTML/CSS to customize the look and feel of your home page, much like how you'd use Handlebars or any other templating system.

{{!< default}}
<!-- Start of Loop -->  
{{#foreach posts}}
<li class="post">  
  <a href="{{url}}">
  {{title}}
  {{date format="D MMMM YYYY"}}
  {{excerpt}}
  Tagged: {{#if tags}}
    {{tags separator=" "}}
  {{/if}}
  </a>
</li>  
{{/foreach}}
<!-- End of Loop -->

post.hbs

Likewise, post.hbs displays content for a single post: title, date, content, tags etc. The stripped down structure of post.hbs is shown below.

{{!< default}}
<!-- Single Post -->  
{{#post}}
  {{title}}
  {{date format="MMMM Do YYYY"}}
  {{{content}}}
  Tagged: {{#if tags}}
    {{tags}}
  {{/if}}
{{/post}}
<!-- Single Post Ends -->

Conclusion

That's it! Hopefully this helps you wrap your head around Ghost templates and makes it easy for you to come up with your own.