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
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North
6 Best AI Productivity Apps in 2024
There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…
By Simon Sterne
3 Essential Design Trends, February 2024
From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…
Surviving the Leap from College to Real-World Design
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
By Simon Sterne
20 Mind-Bending Illusions That Will Make You Question Reality
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton