The Designer’s Guide to Getting Started with Ghost

Many designers are just that: Designers.

They don’t want to be programmers and therefore have learned to leverage existing content management systems to provide the functionality that their clients require.

And there’s absolutely nothing wrong with that.

But the issue many of us encounter is that the applications we’ve been leveraging: Joomla, WordPress, and Drupal, and so on have grown up along with us.

Unfortunately they are no longer the lightweight, simple CMS and/or blog engines they once were.

That causes overhead. Overhead for us when trying to skin them to look like the design our client signed off on.

Overhead for the server, since they’re simply bigger, more demanding creatures.

And overhead for our poor clients, in the form of information overload, when they try to log in and actually do something.

Have you taken a step back and looked at the WordPress administration panel lately?

Dropping a client into that admin panel is like dropping them into NASA Mission Control. It can often mean headaches for them AND you.

There’s a need for an elegant, fast, and flexible CMS.

Boo! Introducing Ghost

This is where Ghost comes in! Ghost is a Blog engine and NOTHING else. The developers over at Ghost.org aim to keep it that way.

This is really good news for a number of reasons: There’s a lack of scope creep in the application. Things stay simple when you’re only trying to do one thing and do it well.

The administration panel for Ghost isn’t just simple, it’s beautiful, and it’s drag and drop adjustable.

Because it’s such a nicely designed administration interface, you’ll have way less client resistance than you may be used to. Ghost is clean, simple, easy, and has no higher aspirations than becoming better at what it’s intended to do.

Besides the philosophical simplicity, presentational beauty, and ease of client use, there’s something else.

Ghost’s underlying programming language is based on node.js. Essentially that’s JavaScript running server-side, so you won’t have to learn PHP, Ruby or any other server side programming language. It’s the same kind of JavaScript syntax that you’re probably, at least, somewhat familiar with.

So, whether you’re a new designer looking for something to add to your service offering, or a long-time designer looking for some fresh air for your service offerings, read on.

Summoning the Ghost

Today, I just want to get you set up with a working Ghost install for you to tinker with. Like any new technology, you’re going to want to play with it to truly understand it’s power.

In our next article, we’ll look at how you can take control of Ghost’s powerful theming system.

There are now lots of hosting companies that cater for Ghost sites, including some of the big boys like Amazon and DigitalOcean. Many are cheap — some are even free.

Because node.js has some server-side requirements that aren’t compatible with all shared hosting, I’m going to use Microsoft Azure in this example. If you don’t currently have an Azure account, fear not. You can still follow along with the free demo offering on the Azure home page.

Deploying Ghost on Microsoft Azure.

1). Visit http://azure.microsoft.com/ with your favorite browser. Log in and go to the Management Portal (https://manage.windowsazure.com/).

From the Azure Management page, click the Web Sites tab on the left of your screen, and then click the +New button on the bottom left of the screen to open the Menu Tab.

2). In the +New menu, from left to right choose Compute, Web Site, and then click From Gallery to open the Add Web App dialog. Scroll through the list of applications and click the entry for Ghost.

On the lower right of the Add Web App dialog, click the “Next” arrow to open the Configuration page of the Add Web App dialog. You have several choices to make here:

• URL

  This is the URL that your Ghost deployment will be publicly visible. Initially you will use a sub domain such as in my example: GhostExample.azurewebsites.net. After deployment you can apply a domain name to the deployment.

• Region

  This is the geographical location of the datacenter hosting your deployment. In my case I chose East US. Chose the appropriate location for your needs.

• Email Service Name

  This entry is here to establish the deployment’s email capability for sending automatic emails, password recovery, and so on. This can be changed after deployment as well.

  In this example, I chose my Gmail account for simplicity. If you use Gmail, make sure to check your spam-trap because it’s fairly common for Gmail to consider Ghost’s log-in attempt to be an unauthorized attempt, in which case Gmail will send you a message regarding the situation and remedies.

• Email Service Username

  This entry is almost always the actual email address associated with the Email Service Name.

• Email Service Password

  This is the actual password for the email account name that you entered in the Username field.

Configure these form fields as you wish and then click the Checkmark icon on the lower right of the dialog.

Azure begins the provisioning process. You’ll see a status message at the bottom of your page and the status indicator will be “Creating”.

This can sometimes take a few minutes, so don’t worry that it’s failing, just be patient.

When provisioning is complete you will see a confirmation message at the bottom of the page and the status for your new site will change to “Running”.

4). In the URL column, click the link for your new Ghost deployment to open it in your browser.

Assuming a successful deployment, you will be presented with a page similar to this.

5). As the welcome message instructs, add “/ghost/” to the URL in your browser’s address bar.

In my example it would be http://GhostExample.AzureWebSites.net/ghost/. This URL is also where you will return to administer the deployment.

On the first visit Ghost requires you to create an account for yourself. These values are for your internal account on the new deployment.

6). Enter your Name, Email, and add a Password, and then click the Sign Up button.

After creating your initial account, Ghost will redirect to the admin interface.

Take some time to explore the interface, become familiar with what’s there, try posting a new article, and so on.

Consider what you’ve accomplished in under five minutes: you’ve deployed a state of the art blog platform on a state of the art server. That’s something that just wasn’t an option as little as five years ago. While the result is a nice accomplishment, with very little effort, it’s only the beginning. There remain such tasks as modifying the visual appearance of the deployment, modifying the settings, creating content, and so on.

In the next installment in this series you will learn how to download the site files to your local computer and modify the theme, giving your deployment its own unique appearance.

See you for Part 2!