Ghost Pro: 15 Tips & Tricks to Spice up your Website
“This post may contain affiliate links. That means if you click and buy, I may receive a small commission (at zero cost to you). Please see the full Disclosure Policy for more details.”
After using Ghost (Pro) for a while, I have discovered, learnt, & implemented a few niceties, that can help you while authoring content & beyond.
Themes from Ghost Marketplace do offer a lot of features, but they miss out on few essentials and nice to haves.
Then there are some hacks that we need to employ, in certain situations, which I will be going over as well.
Tips & Tricks
1. AMP Customization
The default AMP view is great to hit the ground running, but it won’t look anything like your main theme unless customized.
You can view the AMP version of your post by appending /amp/ to end of the post url.
You can check if an AMP page is valid by appending #development=1 to amp post and checking the console for validation result.
You can start customizing the AMP, by adding an amp.hbs file to the root of your theme folder.
Starters:
- Use the template from Ghost GitHub Repo. See: amp.hbs.
- For advanced reference See: Hodor AMP Ghost.
The AMP Template from Ghost, apart from styling, has few flairs missing, like:
- Primary, Secondary, & Tertiary Navigation.
- Member Only & Paid Content Guards.
- SVG Icons.
- Social Share. See: AMP Social Share Documentation.
- Comment, Featured, Tags, Related links.
I have already customized mine to resemble the main theme. I will be going over each of the modifications done on the AMP view in a later post.
See amp view for this post: Ghost Pro: 15 Tips & Tricks to Spice up your Website.
2. Snippets
Snippets were introduced in Nov 16th, 2020. (See: Changelog to stay up to date with feature released by Ghost team.)
I am glad to have joined the Ghost bandwagon after, as it makes life of a blogger a tad bit easier.
Here are the ones I suggest you use.
- YouTube AMP snippet, as Embedded YouTube video doesn’t show up in AMP View! See: Hacks.
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="dQw4w9WgXcQ">
</amp-youtube>- Table of Contents snippet. See: How to add TOC to your Ghost Site?
<aside class="toc"></aside>- Shields.io for a tech website. You must have seen these in npm or GitHub.
[](https://github.com/TryGhost/Ghost/blob/master/LICENSE)
[](https://github.com/TryGhost/Ghost)
[](https://www.npmjs.com/package/ghost)
[](https://www.npmtrends.com/ghost)
[](https://ghost.org?via=derpycoder)- Newsletter Customization, as shown in the Newsletter Customization section.
- Pretty much anything you can think of.
3. Newsletter Customization
When you click on the Dynamic Menu to the left of the Ghost Editor or key in / in the Ghost Editor, you have the option to select Email, which will not be rendered in the main post view.
It shows up only for the receiver of email Newsletter. Which allows us to add some much needed extras to an email sent to the members.
For Instance:
- A nice header, with social share links. (Which can easily generate those links by Social Media Share Link Generator & WhatsApp Link Generator.)
- Extra goodies like PDF or Promo Image.
- Thank You or Personalized message.
- An informative footer, with tags, featured, related & comment link.
- Extra goodies like PDF or Promo Image.
- Thank You or Personalized message.
- An informative footer, with tags, featured, related & comment link.
You can then see the changes by clicking Preview / Send Test Email:
See: Newsletter Design Settings Changelog for some more minor design change you can do to Newsletter.
4. Tertiary Navigation
This was a huge headache to get right, but these are a must haves in a blog or any site.
Each of them require a separate blog post to know what to include, and even legal advice to get right. So google around as there are many posts on them.
Adding them to your site is simple. Just create pages in your Ghost Dashboard, and link to them from wherever you want.
Take a look at what I’ve come up with:
- Terms & Conditions — Agreement between the website & user, on how to use the website.
- Privacy Policy — A statement depicting how a company handles user data.
- Cookie Policy — Declaration of Cookies used by the Website.
- Disclaimer — For scoping Legal Liabilities.
- Disclosure Policy — For disclosing Affiliate Links.
5. Table of Contents
Writing blog posts, with lots of points with no way to navigate quickly to them, is a missed opportunity.
After all, being able to add these kinds of helpers is one of the big selling point of blogging on a platform like Ghost.
See: How to add a Table of Contents to your Ghost Site | Ghost Docs
6. Web Notifications
Want another way to reel back your members onto your website, other than Newsletter? Look no further than OneSignal.
Just follow the Typical Setup Documentation and you’re golden.
Basically, you have to:
- Do settings in OneSignal’s dashboard.
- Add 2 files to the root of the theme folder:
OneSignalSDKWorker.jsOneSignalSDKUpdaterWorker.js- Add OneSignal’s script via Code Injection.
7. Zapier Integrations
Zapier Integration with Ghost, will make you Happier.
Possibilities are Endless:
- Sync Ghost members with Third Party.
- Send Notification when you release new Post.
- Email when a new member joins.
Checkout the Zapier Integration Page for some & Ghost Integrations for some more.
8. PWA & Mobile App
Wouldn’t it be great if you don’t have to create a mobile application to reach the mobile audience.
Users will be able to add the application to home screen, or you can release your application to Google Play Store, from where users can download and use your website as an application.
Just visit PWA Builder and keep following the steps till you have enough rating to turn your website into a PWA, and then click Build My PWA, to generate an Android application.
Will post a walkthrough of this in a later post.
9. Internal Tags
Internal tags don’t get pages dedicated to them, however they can serve a lot of purpose.
For instance:
- To change the behavior of a page. Say by adding #Video, the page becomes full width, and looks like a Netflix or YouTube page.
- To add something extra to a webpage. By adding a tag like #Sponsored, the page has an extra message added for disclosure. Like this blog post!
{{#has tag="#sponsored"}}
<hr>
<div class="disclosure">
<div>
This post may contain affiliate links.<br>
That means if you click and buy, I may receive a small commission (at zero cost to you).<br>
Please see the full <a href="/disclosure/">Disclosure Policy</a> for more details.
</div>
</div>
<hr>
{{/has}}- Add extra keywords to Google News Sitemap. (Data Structure — #Array, #Tree)
<news:keywords>
{{tags limit="5" autolink="false"}},
{{tags limit="5" visibility="internal" autolink="false"}}
</news:keywords>10. Referral
Introduce someone new to Ghost (Pro) & receive a 30% recurring commision, every single month.
Be sure to add a Disclosure Policy however, along with a short message like:
“This post may contain affiliate links.That means if you click and buy, I may receive a small commission (at zero cost to you).Please see the full Disclosure Policy for more details.”
11. Google News Sitemap
A sitemap contains detailed information about your posts and allows search engines to crawl for new content quickly and easily.
A Google News sitemap lets you control which content you submit to Google News specifically.
See: Google News Sitemap for DerpyCoder and Learn how to add it to your site:
See: Create Google News Sitemap| Ghost Documentation
12. Cookie Consent
Cookie consent is one of the cornerstones of the EU’s General Data Protection Regulation. It’s the way websites ensure a legal processing of personal data from their users.
Granted it is annoying for a user to see a pesky banner as they visit a site, but it is ethical to let user know and choose the cookies being set on the browser.
To Check for Cookies used by a site. Visit: CookieServe and type in the URL.
For advance cookie consent visit BrainSum Cookie Consent, and for a basic one See:
13. Privacy Focused Analytics
Service like Google Analytics or Hotjar needs a cookie consent to be present in a website, because they use a lot of cookies, to track a lot of unnecessary data related to users.
For instance, Hotjar tracks user’s cursor movement, takes screenshot when user fills out a survey. Google Analytics tracks plethora of data points, that you would need training to go over and make sense of.
That calls for a simpler, privacy focused, maybe Ghost Focused Analytics. Even if it costs a little bit of money.
There are 2 alternatives I found to be the best, of course there are countless more but these are my favourites:
1. Plausible:
- Lighter (1 kb)
- Costlier
- Streamlined
- Simple
- GDPR Compliant
- Cookie Free
2. GhostBoard:
- Cheap
- Light
- Feature Rich
- Exclusive, Ghost Focused Analytics 🚀
- IP Filter 👮
- Bots & Crawlers Filter 🤖
- Interactive charts 👆
- Dark Mode 🌗
- Timezone Aware 🌎
- Cookie-Free 🍪
- Truly GDPR Compliant ✅
- No Risk: Free Trial Without Credit Card 💎
See: GhostBoard Blog for more.
14. RSS
Really Simple Syndication is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format. These feeds can, for example, allow a user to keep track of many different websites in a single news aggregator.
Just add an icon at the top, if the theme doesn’t already come with one and link it to your Ghost Generated RSS feed in route /rss/.
See: RSS Feed of DerpyCoder.
Users interested in your content can either use Feeder, which has apps for devices and even extensions for browser, or a free one such as:
15. Hacks
These are a workaround for now, as they may get fixed with later releases.
1. AMP YouTube Embed
For YouTube videos embed to show up in AMP view just copy the video id from the end of the URL of YouTube video, edit the YouTube AMP Snippet below, and place the snippet above the added YouTube clip.
<amp-youtube width="480"
height="270"
layout="responsive"
data-videoid="dQw4w9WgXcQ">
</amp-youtube>2. Codepen Embed
When adding a Codepen snippet, include a Giphy as well, as the AMP view of the post becomes invalid without it. Something to do with required amp iframe script. See: AMP Iframe documentation for this.
Conclusion
There’s more we can do to take a Ghost (Pro) website to the next level, however at this point in time, these were the ones I figured out after getting my hands on a really great theme with lots of great features already built in!
Let me know your thoughts down below.
Share this on:
Twitter | Facebook | Pinterest | LinkedIn | Tumblr | WhatsApp
If you liked this, you might also like:
