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 |
~~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 |
Highlight |
==Highlight== | |
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
andpost.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!
- Official tags data helper docs
- An in-depth tutorial on How to Create A Tags List Page in Your Ghost Theme
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:
- The "Excerpt" if available
- If not, then the "Meta Description" that you (can) set for your blog entries, if available
- 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:
- How to Add Syntax Highlighting to your Ghost Blog (with Prism.js)
- How to Make Prism.js Show Line Numbers by Default Using jQuery (in your Ghost blog)