58th & 7th. Taken in Manhattan while walking near Central Park with a new Nexus 7. I was traveling frequently to NYC in 2012 for AWS training. Here’s the album from that trip.

Every few months I get the urge to switch to an Android device, and then a picture like this (taken by Elli with her iPhone 6) comes along. Wow. Maps/navigation and cameras like these are my favorite parts of the mobile revolution.

I wanted to write, and a requirement was a pretty site I could get running quickly. I chose Ghost (hosted at ghost.org) and purchased the Goblin theme. I’m happy with the result - I think it’s pretty - and I’m going to talk about how I tweaked the theme and got going in less than a day.

Ghost Theme Marketplace

The Envato Market for Ghost themes is solid. There are lots of beautiful themes and they all have live demo sites. It was easy to narrow the choice down to a few and settle on Goblin quickly. I PayPal’d $19, got a link to download the theme, and unzipped the download. Here’s what I got:

Do open document/index.html and go through it. You’ll learn that there are 4 versions of the theme, and get prescriptive guidance for most of the setup.

Navigating the sample styles

I wanted to try out the 4 versions of the theme locally, so I installed Ghost to ~/dev/Ghost. I unpacked Goblin to ~/dev/ghost-themes/goblin and initialized a git repo to track my changes:

git init
git add .
git commit -m "Initial commit"

The default theme is in goblin/default, the 4 derivative versions are in goblin/redefined/style[1-4]. The package.json for each theme has the same name (Goblin) and version (1.1.2). To differentiate them after installing, I edited each one and added its style number. For example, for style2 I edited ~/dev/ghost-themes/goblin/theme/redefined/style2/goblin/package.json:

{
"name": "Goblin",
"version": "1.1.2-style2",
"description": "A minimalist and content-focused theme for Ghost",
"url": "http://previews.sunflowertheme.com/ghost/goblin",
"author": {
  "name": "sunflowertheme",
  "email": "support@sunflowertheme.com",
  "url": "http://www.sunflowertheme.com"
}

Then I symlinked each of the styles into the local Ghost install:

Start Ghost and they’re all there to play with:

Create Résumé, About, and Contact Pages

The resume, about, and contact pages on this theme stood out to me in the live demo and it’s one of the main reasons I purchased it. I was surprised to see there was zero documentation on how to set them up! If you click one of the menu items, you’ll get a 404 (a beautifully designed 404.)

I figured out the roundabout way that you need to create posts with URLs resume, about, and contact, and check Turn this post into a static page for each of them. But here’s the real lesson: read the ‘Import Demo Content’ section in the theme’s documentation. It will import a number of sample pages - including the ones described here - that are very useful to have locally as a reference. Lots of good design you can mimic.

Disabling Superfluous Stuff

I found a few things I didn’t like about the Goblin theme. Here’s how I disabled them.

‘Try Me’ Hover Text

Background images in this theme are dope. Click the camera icon and you can see the original. But the big hovering ‘Try me!’ text is no bueno.

Get rid of it by editing goblin/assets/js/main.js and doing a find and replace on title="Try me!". You could also probably knock this out with a jQuery one-liner, but I wanted it gone forever.

Scrolling ‘Time to Complete’

Scrolling through a post shows a totally inaccurate and visually distracting “n minutes left” that follows the scrollbar.

Nope nope nope. Knock out lines 1125-1131 of the same main.js we mentioned earlier:

if($('body').is('.post-template') && !$('body').is('.page') && $('.post-content').length){
  sfApp.timeToRead();
}

You could probably track down a CSS class and hide the timer, but I wanted to erase it.

After-Post Share and Author Info

I dithered on these two a bit, but ultimately decided I wanted Disqus comments to follow a post and nothing else:

Create a new file goblin/assets/css/custom.css and fill it with this:

.share-box, .post-footer {
  display: none;
  visibility: hidden;
}

Then modify goblin/default.hbs to include this new stylesheet after css/colors/default.css (~line 49):

<link rel="stylesheet" type="text/css" href="{{asset "css/custom.css"}}" />

Boom! All gone.

Conclusion

I really like the Goblin theme. The documentation was solid, and it took less than an hour (having never touched Ghost before) to make these changes.