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.
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.
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.
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.
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;
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:
The Settings > User tab gives us the following, usable in single post view only:
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:
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 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 very clearly defined stages that you’ll work through in the process of creating a Ghost theme are:
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.
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:
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.
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
However, the following isn’t included in a Ghost theme:
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.
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.