Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)
The process of building themes for Ghost is incredibly smooth, simple and very easy to learn. But before you start building an actual Ghost theme it's important and helpful to understand the role themes play in the overall Ghost ecology so that you can design in the optimal way.
The best way to do this is not to jump headfirst into design or code, but by gaining a thorough understanding of Ghost itself as your foundation.
In this first part of our tutorial series you'll gain that foundation and, once you do, you'll be perfectly placed to start building your first theme.
What Is Ghost and Who Is It For?
Ghost is an Open Source application dedicated to content publishing.
Over the past several years content publishing tools have evolved to allow people to self manage just about any type of site they could possibly need. Whether it's a complex online store, a business presentation, or a fully fledged CMS, users can handle everything themselves with relatively little experience.
But Ghost is not about any of those complex things. Ghost is about putting the focus back onto one simple thing: writing.
It is a platform built upon the principle of simplicity. Its core objective is to help writers blog more and focus less on the content publishing tool part of the blogging equation.
For theme developers this introduces a change of pace. While theming for other platforms is often driven by user demand for themes to add all kinds of functional complexity to their website, the Ghost platform is driven by one thing only. The tagline for Ghost tells us what that is:
Just a blogging platform
Since Ghost is 100% focused on blogging, Ghost is: Just for bloggers.
And in line with this, Ghost theme design is also driven by one thing only: Just blogging themes.
These might seem like obvious statements but they are important to emphasize, because on a platform focused on writing, being used by people who are focused on writing, so too must Ghost themes be designed with a focus on writing.
Ghost Theme Design Philosophy
As part of his Kickstarter campaign the founder of Ghost, John O'Nolan, said the following:
...it's not just about making something that looks good, it's about giving writers tools to push blogging and to push journalism to the next level.
Therein lies the philosophy that Ghost theme designers need to adopt in order to best serve the users of Ghost: First and foremost make sure a user's content is always front and center.
It's a common approach in web design to focus on the graphics and overall appearance of design, with styling of typography and content happening last. But in a Ghost theme content should never take a back seat to other aspects of the design.
As a Ghost theme designer your very first consideration should be how content will appear, with a strong emphasis on typography, and the rest of the theme's design should unfold in support of it.
You'll gain more insight into how this works later in the tutorial series once we start building an actual theme, but before we can do that we need to learn more about the Ghost platform itself.
The Ghost Platform
There are a few fundamental aspects of Ghost to be aware of that make it different to other platforms you may be used to.
Unlike most of the currently popular website building applications that are PHP based, Ghost is built on Node.js.
Many people consider Node.js to be the way of the future for a number of reasons; speed being one of them. Node.js has been demonstrated to perform significantly faster than PHP across numerous benchmarking tests, it is a key component behind why Ghost runs so blisteringly fast.
To work on a Ghost theme in a local environment you will need to install Node.js locally. Fortunately, doing so is a very quick and easy process. We'll point you to instructions on how to do that before we start the process of building a theme in the second part of this tutorial series.
Note: You should be aware that in the short term you might encounter some growning pains deploying your Ghost sites. Just about every host in the world right now is configured to accommodate PHP applications, but since Node.js is still relatively new the "push button" setup on live domains that you might be used to with other applications is not quite ready. A number of hosts are already building new infrastructure specifically to facilitate Ghost, so it will only be a short wait until deploying Ghost will be just as easy as any other application if not easier. Additionally, starting in November you'll be able to use Ghost's in-house hosting service.
User Driven Settings Available for Theming
A further aspect of Ghost that may be different to other platforms you've themed for in the past relates to settings users can control in the back end.
Ghost's user driven settings determine a large percentage of what can be output on the front end which, in turn, influences the type of content available for theming.
There are still lots of new things planned for Ghost, however the approach we're going to be taking in this tutorial series is to work with the settings that are usable now.
Certain settings for future Ghost functionality exist right now. For example, there is an admin UI for creating nav menus on the way, as well as preliminary functionality for outputting them in Ghost's core. However, we don't know exactly how these things are going to function (and won't until they are released) so we won't be doing any design for them in this tutorial series. We'll leave that for the day when the Ghost team actually releases them.
This brings us to what users can control in the back end of Ghost right now, which are settings that break down into two areas;
- Admin settings
- Post editing controls
Let's look at each of those areas now.
Ghost's admin settings are broken into two tabs: General Settings and User Settings. Both the general and user settings tabs control content we can style in our themes.
The Settings > General tab gives us the following elements, usable anywhere in a Ghost theme:
- Blog Title
- Blog Description
- Blog Logo
- Blog Cover
The Settings > User tab gives us the following, usable in single post view only:
- Cover image
- Profile image
Post editor controls
Ghost's post editing interface is certainly one of its most compelling features. Designed by writers for writers, it offers a fantastic environment for content creation.
Its major contrast against other editing environments is how clean and minimalist it is designed to be. There's no clutter from formatting toolbars, meta boxes or other custom fields. The vast majority of the screen space is devoted entirely to the writing area.
The most relevant aspect of the post editing area to theme designers is the backbone of Ghost post formatting: Markdown.
Rather than using styling buttons or raw HTML, Ghost's content is formatted using Markdown, a simple inline syntax that means writers don't have to pause at any time during content creation. Because of this simplified approach there is a relatively short list of things to be styled that the post editor controls:
- Regular text
- H1 through H6 tags
- Link states
- Inline code
- Horizontal rules
Note: Markdown will also accept raw HTML, which means videos from services like YouTube can easily be embedded via copy and paste iframe code. For that reason, it's also a good idea to consider the styling of iframes in your themes as well.
Ghost themes control presentation only
Ghost is designed around a clear separation of presentation and content.
Ghost itself handles all content generation and any additional required functionality is handled by plugins. This leaves the Ghost theme dedicated to pure presentation.
The separation of content and presentation is a principle of web design that is not new. The basic idea is that if content and presentation are separated into independent entities it becomes possible for one to be changed without altering the other. In other words, one theme can be switched out for another without the user having to change their content in any way.
When themes contain functionality that is not purely presentational, a user can no longer change their theme without also altering the way their content looks. They become tied to the presentation they have, and the foundational purpose of a theme is essentially lost.
With Ghost, however, the foundational purpose of a theme remains intact at all times.
Note: In the future, as plugins for Ghost roll out, it will be possible to build Ghost themes with plugin dependencies. This is another feature that will be made possible thanks to Ghost being built on top of Node.js. We will still be able to see enhanced overall packages available to users, but the method for doing so will consistently preserve the benefits that come from a separation of content and presentation.
The Two Stages of Ghost Theme Design
The two very clearly defined stages that you'll work through in the process of creating a Ghost theme are:
- Template File Creation - Writing template files with template tag placement and markup
- Styling - Adding design and responsiveness, predominantly through writing of CSS
The next sections of this tutorial series will provide you complete step-by-step instructions on how to proceed through these stages to build your first Ghost theme. Before then, however, it is helpful to understand a little more about the templating language that powers Ghost themes.
Introduction to Logic-less Templating with Handlebars.js
Ghost themes use a fantastic templating language named Handlebars.js to power the placement of content. Handlebars is a templating language in the proper sense of the term, whereby its role is simply to output pre-fetched content in specified positions within a template file.
Handlebars is characterized by the use of curly brackets, (which look like handlebars), to add predefined tags into templates that will be replaced with content when the file is served.
Example handlebars.js template tag:
Handlbars.js is referred to as a logic-less templating language because it cannot be used to write functions, hold variables, or to otherwise prepare content for display. Other than rendering content where tags are placed, its only operations are simply to:
- Check whether or not a given piece of content exists, e.g. a logo
- Iterate a set of content that contains multiple records, e.g. a group of latest posts
It's the logic-less functionality behind each Ghost theme that ensures each theme controls attributes of presentation only.
Ghost themes also do nothing to determine what content the handlebars template tags will be replaced with - that's all handled by Ghost itself. The theme is, however, used to determine how the output will be marked up and styled.
Thanks to logic-less templating, marking up and styling Ghost's output is easily achieved and helps guarantee very clean code in your templates. In turn this makes it easy to write semantic markup that is up to date with the latest SEO and accessibility standards.
Components of a Ghost Theme
Here is a quick "at a glance" list of everything that is, and is not included in the two stages of designing a Ghost theme.
What is in a Ghost theme: Templating
- Placement of handlebars tags in template files
- Semantic markup of those template tags
- Layout control
- Color scheme & overall design
However, the following isn't included in a Ghost theme:
- Functionality additions
- Custom admin area controls
- Modified database queries
You might find it helpful to think of the two-stage design process as being summarized by the "SAMWYS" principle, or "Style And Markup What You're Served".
When designing a Ghost theme we don't have to work with logic or database queries because Ghost handles all of that for us. SAMWYS reminds us all we have to do is place template tags, write quality markup and put together great theme styling that showcases user content.
Coming Up Next
Everything we've discussed so far provides you with a foundational understanding of Ghost.
From here we can move on to the actual step-by-step process of creating your first theme.
The next part of our tutorial series begins with the first stage of the theme creation process; the templating stage. You'll learn exactly how to setup your theme's file structure, how to place template tags and how to write a markup skeleton.