I'm constantly talking about how much I like Ghost as a blog platform, but I have a confession... I have never found a theme I really loved. There are plenty of good ones, but I kept having to tweak them to look how I want.

I don't post here often and I don't have a ton of followers, but if you remember coming to my blog within the last six months (and are here now), you probably notice things look very different. That's because I finally sat down and created the theme I've always wanted.

The Peep Theme for Ghost

This theme started out as a fun project, but once I got the hang of the Handlebars templating language and looked at the code for other themes, I went nuts and made it into something I would actually use.

Like any good theme, you can drop a zip file onto your server and change the whole look of your site. There are no custom plugins or anything required to make it work properly, and no matter what settings you have configured, nothing breaks. This is mainly due to Ghost's simplicity - not to hate on WordPress, but I've seen themes with plugin dependencies and all kinds of weird incompatibilities across installations, and that's not what I'm about.

No plugins?

Nope - but you can still configure custom aspects of the site without writing any code. The Ghost Theme Configuration Approach is a really cool way to accomplish this using Ghost's built-in code injection and the use of global variables. It creates a global object called __themeCfg that can be modified from the Ghost interface.

Say you want to set up commenting via Disqus. You can provide your channel's shortname via window.__themeCfg.disqusUsername rather than digging into the "real" code. Don't want comments? Simply don't add that variable and the theme will handle the logic. So it's not zero code, but it's pretty damn close.

The contact page

GTCA uses a well-defined spec, and I don't want to mess with that. After all, your site functionality should not break when switching themes, so I added a second global variable, __peepCfg for theme-specific variables.

The custom contact page I use isn't built in the Ghost editor - it comes with the theme. The bad news (depending who you are, I suppose) is that it's backed by AWS Lambda, so there's extra code to write if you want to hook it up. The good news is that this section is conditionally rendered, so it falls back to a "normal" contact page if you don't define this variable.

Want to get emails straight from your site? You're in for a bit of work, but in my opinion, it's well worth it. Lambda is fun to use once you get the hang of it, believe it or not. Want to skip all that work and just list your info in Markdown? You can do that too. 😎

Color schemes

Like I said before, theme configuration is done through code, not the Ghost interface. And I haven't changed that in my theme.

What I have done, however, is provide an easy way to generate color palettes for the site via built-in SASS functions. Here's what the code looks like:

$color-primary: #FFBF33;

$color-primary-light-1: desaturate(lighten($color-primary, 13.5%), 10%);
$color-primary-light-2: desaturate(lighten($color-primary, 25%), 8%);
$color-primary-dark-1: saturate(darken($color-primary, 12.5%), 6%);
$color-primary-dark-2: saturate(darken($color-primary, 19%), 10%);

And likewise for the secondary color, which is used for inline code snippets.

The color scheme is pretty simple, but I do use shading and some variations in a few areas. I thought it would be nice to provide a single point of change to modify the site's banner and headings, so you can do that by changing one line. Again, it's not zero code modification, but it's a neat trick that should help reduce some of the pains of design.

What next?

I've got some ideas about new features and options, and yes, I know the site is not mobile friendly! All of the code for Peep (and some of the feature ideas) can be found on my GitHub and contributions are welcome.

I think it bears repeating how much fun Ghost is to work with, so I'll repeat it. This has been a really fun project, and a great practice in some basic web things that I've grown rusty on, and getting some skin in the game (using the theme in production) has forced me to start caring more about design and the fundamental ways my site works.

Peep is under active development, meaning whenever I have free time, but don't let that stop you from poking around the code and borrowing ideas. My entire goal is to make a site that looks the way I want, has built-in features that don't come with other themes, and I think this is a pretty decent step toward that.