Learning Ghost theme design

Published 23. August 2014.


Ahem...I've been on the fence about trying Ghost out for at least a month. Then I ran across an excellent tutorial on Tutsplus on how to build a Ghost theme from scratch. Highly recommended to learn the whole process.

I already had node.js installed to learn how to use Stylus as my CSS pre-processor so I spun up a local instance of Ghost and got to work.

I've been spending the past couple of weeks ripping apart the Inspyr theme for Wordpress and running into many little roadblocks when customizing the PHP, frustrating.

My experience so far with Ghost and Handlebars to handle templating has been near sublime in comparison. Setting up new page templates and understanding how partials work was so much quicker than wrapping my head around how hooks work in practice.

LESS to Stylus

The tutorial series linked above was excellent, with only one downside: the entire CSS workflow was built on using LESS...but I was going to use Stylus for it's python-esque elegance, especially after discovering the awesomeness of Jeet for managing a grid system.

Translating LESS syntax, especially around the math, ended up being an excellent way to learn the correct Stylus syntax, so a win-win there, even with a bit more time spent.

But finishing a single tutorial, however long, isn't a sign of actually learning how to theme Ghost. Next step? Theme this blog.

Oh, and then theme another existing blog which I'll be porting onto Ghost on a Digital Ocean droplet, because I hear that service is awesome.

Other challenges to try out:

  • Mirror this Ghost development workflow to a Windows environment.
  • Learn more about node.js, ember.js, and Javascript in general in order to extend Ghost's functionality, or at least lend a helping hand.
  • Might be a ways down the road, but now that I've migrated this site onto Ghost properly I'll be trying my hand at a more specific theme. I like this one, but nothing like building your own sometimes.