Enter Ghost
Turns out I’m not alone in my desire for a dead-simple blogging platform. The creators behind Ghost have gone to great lengths to strip out all of the cruft we’ve added to the blogging process, and build a simple, speedy publishing platform that will get the job done. It’s a whole different beast. It operates on the philosophy that a CMS for blogging should do one thing, and do it well. You won’t see any magazines launched on this platform without a lot of customization. It’s a blog, and turning it into anything else would sort of defeat its purpose. Then, there’s the fact that it's built on new technologies. Ghost is built on Node.js, which executes JavaScript code on the server rather than in the browser. It is loved by the same people who love PaaS hosting, and all of these new systems that people like me are struggling to understand. In a sense, it’s been future-proofed from the get-go. It’s part of the first generation of a new breed of CMS. Mind you, from the blogger’s perspective, it’s just a simple interface for blogging. From the end user’s perspective, nothing’s really changed except maybe the default blog theme looks a bit “flat”. But under the hood, we’re seeing something totally new, and that’s a good thing.Installing Ghost (the easy way)
Installing Ghost the easy way. Typically, you’d have to install a component or two separately to get Ghost installed and running on a local machine. You’d have to install Node.js, and then you'd have to go in and start installing some extra Node packages manually from the command line. That’s right, the typical setup for Ghost requires using the command line. For people more used to WordPress’ “five-minute setup” process with MySQL databases and a graphical installer, this may be uncomfortable. It could be a pain in the neck if you’re not used to using the command line on a Mac or Linux machine. Luckily, the kind people over at Bitnami made graphical installers for Windows, Mac, and Linux. Here are all of the steps you'll need to follow:- Download the appropriate installer for your OS here: https://bitnami.com/stack/ghost/installer
- When you run the installer, provide the following information: where you want it installed, what login info you want to use for the blog, and what IP address you want to use for testing. (I recommend 127.0.0.1.)
- Run the thing, and start playing. It comes with a cool control panel, and a start menu entry.
Making a theme for Ghost
Ghost themes are fairly easy to make, as long as you know HTML and CSS. Programming knowledge is helpful, but not strictly necessary. Ghost’s templating system is simple, and even rather intuitive, if you’ve built themes for WordP... ahem, other CMSs before. I know, I know. The comparison to WordPress is old. But that one bit of software has dominated the market for years now — much like Photoshop has for images — the comparisons are inevitable. In this case, they’re even useful. People who have built WordPress themes will find some of the file structure and templating language to be familiar, though much simpler. WordPress’ PHP functions give you a lot of flexibility; but they also complicate the theme coding process. Ghost’s templating system (built with Handlebars), is semantic, powerful, and a lot more readable than the raw PHP functions that we’re used to working with. Personally, I just find it a lot easier to use. On the other hand, it is meant purely for building blogs. You won’t be building a hybrid news site/social network/forum with this thing. Simpler, but limited. That’s the trade-off inherent in the entire platform. Creating a basic theme for Ghost.Setting up your theme
Now, if you’ve watched the video (you really should), you’ll know the very basics. You’ll have your Ghost installation in development mode, and you’ll have a very, very limited theme to work with. To recap, technically you only need three files to make a Ghost theme:index.hbs (This template will list your posts)
post.hbs (This will display a single post)
package.json (This contains theme information)
However, there are other basic templates that you probably want to include. You can, of course, create custom templates for pages, posts, authors, tags, and more. We’ll get to all of that over time.
For now, I want to focus on only the basics: theme structure, extending template files, and where to put all of the HTML. This means adding some extra files and folders to our Ghost theme up there. Let’s have a look at the revised structure:
default.hbs
index.hbs
page.hbs
post.hbs
package.json
assets/
css/
images/
javascript/
partials/ (Just examples, here. Not required.)
navigation.hbs
loop.hbs
default.hbs will act as the basis of your theme. Your <html>, <head>, and <body> tags will go here. Every other template will be rendered ‘inside’ of this one. Now, you don’t have to do it this way; but it is standard practice, and comes highly recommended by the Ghost devs themselves.
page.hbs is exactly what you think it is, the template for static pages. The assets folder is fairly self-explanatory.
The partials/ folder is where you would keep bits and pieces of code that you use more than once, on various templates. For example, navigation.hbs might include your site name/logo and primary navigation. loop.hbs might output a list of posts with some generic HTML and styling. This could be used in a number of places on the site.
Mixing Handlebars and HTML
So let’s show you exactly how simple the templating can be. First, we’ll set up our default.hbs file:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
{{! Here we see the functions for page titles and descriptions. }}
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{! Anything in the assets/ folder can be easily linked to, like so: }}
<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />
{{! This function here outputs meta keywords, some styling information, stuff like that. }}
{{ghost_head}}
</head>
<body class="{{body_class}}">
<div class="wrap">
{{! Any .hbs file in the partials folder can be called in like this. }}
{{> header}}
{{! This is where the content of all the sub-templates will be output. }}
{{{body}}}
{{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }}
{{ghost_foot}}
</div>
</body>
</html>
Now let’s create the navigation.hbs template, because that’s going to be on every page:
<header id="page-header">
{{! This should be fairly self-explanatory. }}
<h1>{{@blog.title}}</h1>
<nav>
<ul>
{{! This function calls in the navigation links, which can be managed in the Ghost admin panel. Note that the template *must* be called "navigation.hbs" for this to work. }}
{{#foreach navigation}}
<li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="presentation"><a href="{{url absolute="true"}}">{{label}}</a></li>
{{/foreach}}
</ul>
</nav>
</header>
Now we create the loop to display excerpts of the posts. To be honest, I ripped this one (almost) straight from the default theme, because the markup is perfect for what I have in mind. Put all of this in partials/loop.hbs:
{{! Each post excerpt will be displayed with this same markup. }}
{{#foreach posts}}
<article class="excerpt {{post_class}}">
<header>
<h2 class="post-title"><a href="{{url}}">{{{title}}}</a></h2>
</header>
<section>
{{! The actual excerpt. Not the variable that allows you to call in exactly as many words as you want. }}
<p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">»</a></p>
</section>
<footer>
{{! This is the post's meta information. }}
{{author}}
{{tags prefix=" on "}}
<time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time>
</footer>
</article>
{{/foreach}}
{{! Links to the next and previous pages of links. You can define how many links are on each page in the admin panel. }}
{{pagination}}
Now we’re going to tie it all together with the index.hbs template, which will also act as the home page, unless you specify otherwise. The code for this, seeing how we’ve divided and organized most of the HTML elsewhere, is very simple:
{{!< default}}
{{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}}
<section class="posts">
{{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }}
{{> loop}}
</section>
Conclusion
And that’s it. Told you it was simple! If you have trouble, check out Ghost’s default theme, and the documentation. Play with the HTML, play with the template system, and start styling your theme. Next time, we’ll dig a little deeper. In the meantime, have fun! Featured image uses Ghost image via Shutterstock.Ezequiel Bruni
Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.
Read Next
3 Essential Design Trends, November 2024
Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…
20 Best New Websites, October 2024
Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…
Exciting New Tools for Designers, October 2024
We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…
15 Best New Fonts, September 2024
Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…
By Simon Sterne
3 Essential Design Trends, October 2024
This article is brought to you by Constantino, a renowned company offering premium and affordable website design
You…
A Beginner’s Guide to Using BlueSky for Business Success
In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…
By Louise North
The Importance of Title Tags: Tips and Tricks to Optimize for SEO
When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…
By Simon Sterne
20 Best New Websites, September 2024
We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…
Exciting New Tools for Designers, September 2024
This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…
3 Essential Design Trends, September 2024
September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…
Crafting Personalized Experiences with AI
Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…
By Simon Sterne
15 Best New Fonts, August 2024
Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…
By Ben Moss