Designing a Ghost Theme: Handlebars.js + NodeJS

Designed the theme that's running this website.

Hosted:
GHOST_URL/ (What you see is what you get)
Github:
https://github.com/InvasiveLionfish/ghost_technical_blog
(Look above: If you paste a link with underscores the markup goes wonky)

Instead visit this unbroken link: The repository.

Tech Stack: NodeJS + Handlebars.js + HTML/CSS/JS

Done

  • Customized the default Ghost Casper theme to create a technical blog with a portfolio component.
  • Utilized the Ghost Public API (still in Beta) to set internal tags for separating projects and blog posts.
Challenges & Gotchas

-> Setting up the environment. Jeez node. And the clustermuck that inevitably followed me around git.

-> Maybe because it's my first theme design, but I spent more time with bugs and errors than actually creating.

-> The get helper from the beta API doesn't work with pagination at this stage. Diagnosing the problem was a source of pain. Fortunately I finally searched the ghost slack page and lo and behold it's a known problem. The team at Ghost is working on addressing this by creating something called channels.

Minor Inconveniences:

  • Setting up the local dev environment with all the necessary dependencies. Tried doing it on my host machine, then took a detour with Docker/Vagrant. The best and frictionless setup is with Cloud9.
  • Switching themes takes some time for the changes to go live in production.
  • Small bugs with me goofing around with the design. Ghost has it's own quirks about menu/navigation.

Enjoyed:

  • When you get the hang of it, developing in Ghost is worthwhile. It's a full-stack blog setup with plenty of opportunity to explore the client and server side in JavaScript, and learn how a CMS is designed.
  • Handlebars.js templating engine; I've used it before with an Ember.js project. The linking structure makes it very intuitive and useful to work with.
Future Features
+ This is a work in progress. And there are many bugs still here. I will continuously be tinkering.