How to Use the Ghost Interface

Ghost LogoWelcome to the fourth post in our series on Ghost, the exciting new blogging platform.

Today we will give you a walkthrough of all the important Ghost screens from your first registration to your detailed settings.

Previous Posts in this Series

The Interface

Ghost was created with a single purpose of being the best platform for blogging. That a clear purpose has been a contributing factor in design of Ghost’s UI. The UI has been responsive since its first release. When accessing the backend from a mobile device, you feel as if you're using a native phone app.

navigation-ghost-interface.png

One interesting design design is the lack of branding. Except for the Ghost logo in the admin area and a link to Ghost’s official support forum, there is no Ghost branding anywhere. Ghost sometimes feels like a platform that was custom develeloped for the user, with only the elements that are essential. This gives Ghost a huge advantage in making first time bloggers feel right at home.

From the time you login to your Ghost blog for the first time to managing and adding new posts, here's an overview of the few different pages that you will be interacting with:

Signup

This is the screen you see when you visit the Ghost admin to create an account.

As currently Ghost does not have multi-user support, do make a note of the password because if you forget, it would become difficult to recover it. If you are not using a Ghost hosted platform, you need to configure the email settings in the Ghost configuration file conf.js. Without this configuration password reset emails would not be delivered.

navigation-ghost-signup.png

Login, forgot password & reset password pages

Similar to the signup page, the login and forgot password pages are minimal without any Ghost branding.

navigation-ghost-login-password.png

Content

After successfully logging in, the first screen visible is the content screen. This page shows a list of posts on the left and a preview of the selected post on the right. There is absolutely zero wait time to see a preview of the post when you click it. Below is a diagram explaining the structure of this content page.

navigation-ghost-content.png
  1. Main Navigation.
  2. List of Blog Posts / Static Pages
  3. Post Preview
  4. Ghost Icon which links to the frontend of the website
  5. Links to create a new post
  6. Link to settings section
  7. A nifty feature to mark any post as featured post directly from the post list page
  8. Link to edit the selected post
  9. Post settings link. Allows us to delete a post, edit the post URL and the publish date as well as the ability to mark a post as a static page so it does not appear in the post loop of your website.

New Post

Ghost’s most loved feature is the real time preview of the post you are editing. You could create a new post by clicking on the “New Post” link in the main navigation bar, or the green “+” button on the Content (Post List) page.

navigation-ghost-new-post.png
  1. Field to enter Post Title
  2. Post Editor (Supports HTML & Markdown)
  3. Post Preview (formats HTML / Markdown real-time and shows a preview as you type)
  4. Post saving button.
  5. Field to add post tags. To enter tags, you simply need to click and start typing. It also shows you a list of tags that already exist and are similar to the word you are typing.
  6. Post settings link. Same as the one displayed on the Content Page. It allows us to delete a post, edit the post URL and the publish date as well as the ability to mark a post as a static page.
  7. The arrow next to the Save button shows “Publish” option when clicked. By default “Save Draft” button is shown for all new posts. Clicking the arrow next to a “Save Draft” button shows the Publish button. Similarly for a published post, clicking the arrow next to “Update Post” button shows “Unpublish” button.

Settings

The settings section currently allows us to update site and user settings. Once the Ghost API is released in future versions, you would be able to access Ghost Apps (aka Plugins for Ghost) through this section as well.

navigation-ghost-settings.png

The settings screen is divided into 2 sections, “General” & “User”.

General Settings


This sections is from where you control the general aspects of your website such as the site title, description, theme, etc. The settings provided in current Ghost release are:

  • Blog Title
  • Blog Description
  • Logo
  • Cover Image
  • Posts per page
  • Dated permalinks
  • Theme

User Settings

Until Ghost offers multi-user support, this is from where you could update your profile information that would be displayed in the author section below each post depending on the theme. The currently available settings are:

  • Avatar
  • Cover
  • Email
  • Location
  • Website
  • Bio
  • Password

Ghost developers have provided an option right from the beginning for users to add a Blog Logo as well as a cover image. In most WordPress themes, theme developers add this option in their theme and the settings are lost after changing the themes. Having options like these built into the core avoids the need to rely on themes or additional plugins.

Debug

One screen that is not linked in the backend is the debug screen. To access this page, you simply have to add /ghost/debug/ after your blog URL, e.g. http://127.0.0.1:2368/ghost/debug/. This section currently offers 3 utilities:

  1. Export: Ghost creates a .json file when you export your content out. You could then use this file to import your content into another of your Ghost installation or keep it for backup.
  2. Import: Through this you can import data from other Ghost blogs or backups. If you wish to move data from your WordPress blog to Ghost, you first have to install this plugin on your WordPress site https://wordpress.org/plugins/ghost/ and then export the data in a format that Ghost can read.
  3. Delete all content: This deletes all posts and tags but keeps the user and general settings as they are.

As you have seen for yourself, Ghost does not offer every single option you’d want. But the features it does offer, are neatly organized and are accessible in a clear way which even a first time blogger would have no difficulty understanding.


About the author

Harish is a designer & WordPress developer from Mumbai. He runs a web design agency "Dreams Media" and writes about random stuff on his personal website HarishChouhan.com.