Ghost Theme Development

Themes
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.

3 Likes
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?

1 Like
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:

6 Likes
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.

2 Likes
7

My workflow almost matches your workflow. Do you use any specific tool or method for A11y testing (without the keyboard navigation)?
Any suggestion will be helpful and appreciated. :smiley:

8

Not particularly, I try to incorporate what I know about a11y into the theme development process. Unfortunately, I have no concrete evidence that what I’m doing is actually useful, but with my limited interactions with screen readers, it seems to be good enough. Lighhouse does include some a11y suggestions, so running it is always a good idea :slight_smile:

1 Like
9

Okay, Thanks for the information. I will try screen readers. And lighthouse indeed a very good tool. :slight_smile: