Getting Started with Ghost CMS
January 13, 2019

Getting Started with Ghost CMS

This is a collection of notes and thoughts about Ghost CMS, the promising back-to-basics blogging platform.

Find some great themes!

Of course the "official" theme repo is the best place to start, unfortunately for some reason they are very picky about including themes. There are some other great places to search for themes:

Get Acquainted with the Editor!

The official article on using the editor is a great start. The interesting part is the table of markdown shortcuts, which I'm including below for quick reference! Most everything else is self-explanatory.

Result Markdown Shortcut
Bold **text** / __text__ Ctrl/⌘ + B
Emphasize *text* Ctrl/⌘ + I
Strike-through ~~text~~ Ctrl + Alt + U
Testtext ^supertext^
Textsubtext ~subtext~
Link [title](http://) Ctrl/⌘ + K
Inline Code `code` Ctrl/⌘ + Shift + K
Image ![alt](http://) Ctrl/⌘ + Shift + I
List * item Ctrl + L
Ordered List 1. item Ctrl/⌘ + Alt + L
Blockquote > quote Ctrl + Q
H1 # Heading  
H2 ## Heading Ctrl/⌘ + H
H3 ### Heading Ctrl/⌘ + H (x2)

Customize your Theme!

Whichever theme you pick, sooner or later you'll have to get familiar with the source code. But first, some quick links to the official docs:

  • Ghost uses the Handlebars templating language that gives access to data helpers like @blog.title and post.excerpt
  • There are also some basic functional helpers, like {{#if ...}}{{else if ...}}{{else}}{{/if}}

Your theme files are located in the ghost/content/theme directory. Don't forget to ghost restart from the ghost root directory if you make any changes!

Add Some Features!

Ghost is pretty Zen out of the box, and in this case by Zen I mean lacking in features. And there doesn't actually seem to be a marketplace for plugins either - which I'm assuming is intentional but still hard to comprehend considering that an active dev community is essential for a CMS platform to flourish. Luckily, Ghost has a fairly mild learning curve. Let's take a look at adding some useful features!

First, make sure to grab an awesome theme!

Show Post Tags!

The theme I picked ("Editorial") did not, by default, show post tags. It is super easy to add these! Just include {{tags}} in an appropriate location in one of your .hbs files!

Show the "Meta Description" when available!

Many themes show the first X words of your post on the home page and in the sidebars. This behavior can easily be changed so that Ghost shows:

  1. The "Excerpt" if available
  2. If not, then the "Meta Description" that you (can) set for your blog entries, if available
  3. Otherwise fall back on the "first X words".

You'll have to edit your theme .hbs template files. Search for any bits that look like this: {{excerpt words="33"}} and replace it with this magic mumbo-jumbo:

{{#if custom_excerpt}}{{custom_excerpt}}{{else if meta_description}}{{meta_description}}{{else}}{{excerpt words="33"}}{{/if}}

Make sure to run ghost restart restart from your ghost directory if you make any changes to your theme files!!!

Some other topics are covered on a page of their own

Add Code Highlighting using Prism.js!

Please refer to:

A jQuery Table of Contents for your Ghost Blog Entries

Use GraphComment in your (dynamic) Ghost Blog

Getting Started with Ghost CMS
Share this