Ghost Theme Development


#1

Hello,

I want to start developing Ghost themes, but my main issue is that i am not finding many resources. Do you have any suggestions for me? From where should I start? Is there any Starter Theme for Ghost?

Thank you,
Madalin.


#2

Casper is the default Ghost theme and is a good example of a theme that can be worked on. Take a look at the workflow to see how you might develop your theme, or use the theme as a starting point to create theme. What specifically do you have questions about?


#3

Hello vikaspotluri123, thank you for your suggestion. I was interested in a workflow :smiley:

Casper looks like a very good starting point. Any other suggestions?


#4

The workflow I generally follow (but of course, there’s no one correct workflow :wink:) is:

  • Design / visualize / mockup
  • Develop a static version of design - don’t worry about ghost
    • iterate until you’re happy
    • I generally make all of the pages statically, including things like 404, tag, author, etc. There will be some duplication which will be abstracted in the conversion
    • Focus on the design here, not the nitty gritty
  • Convert to Ghost theme
    • Abstract core layout to default.hbs
    • Abstract components to partials/component.hbs
    • This generally shouldn’t take too much time, as you’ve done most of the heavy lifting in templating. The biggest things are:
      • make sure your theme passes gscan, since gscan should catch any big things you might miss (for example, forgetting {{ghost_head}})
      • get rid of the duplication that happened in the second stage
      • Add dynamic functionality (e.g. {{get}} helper things)
      • don’t forget pagination!
  • Prepare for production
    • Make sure build tools are properly set up and functioning (i.e. uglify actually happens)
    • Add demo content, make sure nothing was missed
    • A11y testing (one thing I try to do a lot throughout development is navigate the site using only the keyboard to find any pain points). Fix issues as they arise, so you don’t burn out at the end.
    • Testing using Lighthouse (part of the Chrome Developer Tools)
    • Testing using various online services in a staging environment

I prefer not worrying about converting my design into a theme until the end, as the template can easily be converted into another format if needed - i.e. for Jekyll, Gatsby, Wordpress, etc.

Let me know if you have any other questions :slight_smile:


#5

That’s some really good advices. Thanks a lot.


#6

I tend to start work my way out from the code. I used Casper as the starting point for my first theme, and my first theme as the starting point for my second theme. Eventually I got tired of this. I looked for a boilerplate theme that would fit my needs, and didn’t find one. So I wrote my own.

Now, I use my Undefined Starter Theme as the basis for all my themes:

It has all the essentials that a Ghost theme needs, and leaves the opinionated choices up to you. Just drop in your framework and tooling of choice and you’re off the races.