👩‍🎨 Build with Ghost: The art of the post template

Welcome to Issue #8! Some of what we have in store:

  • Our new tutorial shows you how to showcase your content by building the perfect post template
  • Updates to CSS that will blow your mind :exploding_head:
  • Taking Ghost headless with Thimira

The art of the post template

post header digram showing header elements and how they're represented in code

It’s the heart and soul of your theme. It’s where authors bring their creative content to life, and where readers immerse themselves in these narratives.

It’s the post template, and, in our latest tutorial, we cover everything you need to know to build one. We focus on the following:

  • The basic anatomy of a post template
  • Understanding the data available in the post context
  • Steps to designing a captivating post header
  • Bringing in your content
  • Tips & tricks for creating a beautiful reading experience

Check it out :point_right:

But wait! There’s more.

We also released tutorials on using custom settings and building custom sign-up forms.

Pro tip: When adding custom settings to your theme, use the new description key to communicate the setting’s purpose to your users

Did you know we have a YouTube channel? Our most recent video includes a complete guide to using partials in Ghost. Don’t forget to like and subscribe :stuck_out_tongue_winking_eye:

Just shipped :ship:

  • Header cards got a massive upgrade, giving you more power to create beautiful pages and posts. (Header cards are full-width cards perfect for creating a division between sections or making a large call to action.)
  • In the same spirit, it’s now possible to hide the title and feature image for pages, making it possible to build radically different landing pages.

:construction: Custom theme developers will need to update their themes to support the new @page helper that makes toggling the title and feature image possible.

Ideas and tools :hammer_and_wrench:

Getting technical with Thimira

Thimira Thenuwara recently relaunched Android Wedakarayo, a Sinhala publication about technology based in Sri Lanka. The relaunch is notable because Thimira shifted to using Ghost headlessly, implementing a Nuxt frontend with Tailwind styling, oAuth sign-in, and Algolia search. We’ll explain all of this in a minute, but let’s start at the beginning.

Homepage of Android Wedakarayo

Android Wedakarayo

By day, Thimira is a Deputy Manager of Finance for a group of companies in Sri Lanka. By night, certified Ghost Expert :superhero:

His foray into Ghost development began when Android Wedakarayo transitioned from WordPress to Ghost. At first, the publication used stock Casper (always a good place to start). Here and there, Thimira began customizing it to suit the publication’s needs, eventually developing a totally bespoke theme.

Before hacking on his Ghost theme, Thimira didn’t know web development at all! He taught himself HTML, CSS, and JS and says, “The platform taught me the ropes of web design.” He also had a great support network to help him: another Ghost Expert, Kasun Jayarathna, got him up to speed on Ghost, Srilal Sachintha taught him Linux servers, and his fiancée, Shenaya Hewagama, cheered him on throughout.

Ghost is truly a fantastic gateway to learning web development. The cost of entry is low and the payoff is high: a totally customized, beautiful publication. Just be careful because before you know it, you’ll be building a headless Ghost site with Nuxt, Algolia, oAuth, and a handful of other custom features :smirk: Let’s talk about what all this means.

Running Ghost headlessly means using Ghost’s API with a frontend other than Ghost’s native theme layer. While it enables advanced functionality, headless is not the way to go for most users. Ghost’s theme layer, for example, includes the metadata that optimizes your site for SEO. Going headless means you need to code that functionality yourself.

Using a framework like Nuxt (based on Vue) for your frontend can ease some of the burden by providing plugins and packages to help you rebuild features from Ghost’s theme layer.

Algolia is an advanced search-as-a-service. It can be used with any Ghost site, and we use it on our Tutorials site. Learn more about setting up Algolia on Ghost in our docs.

oAuth (open authorization) is a protocol that allows third-party apps to access user data without exposing user credentials. A common example, and the one Thimira implemented, is using Google or Apple to sign into a third-party website.

To see the whole thing in action, go check out Android Wedakarayo. We’d also be remiss if we didn’t mention Thimira’s Apple-inspired personal site, which has lots of clever animations.

Thimira's personal website


Sites featured in the Build with Ghost newsletter are discovered through our creator network, Ghost Explore. It’s a way for creators and readers alike to discover their favorite new publications. Anyone running a Ghost site can add themselves to Explore to be featured throughout the wider Ghost ecosystem. If you’d like to be featured in this newsletter, add your site to Explore and reply to this email.

Thanks for building with us.

2 Likes

@truekasun is the unsung hero.

3 Likes

All this quite good looking, much better than most websites. But I expect frontend developers to care more about Pagespeed insights than looks. Nowadays it’s quite important, considering that most of us aren’t superstars or extremely well known. We got to be visible in the search engine to make traffic, so it’s important to have very high pagespeed insights scores. The theme shown in the example, Android Wedakarayo, has failed the test:

Great tutorial, and the post template in this tutorial is very lovely.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.