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

Home | New Lens | About

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

https://ghost.org/tutorials/post-time/ • 123 KB fetched
Open original page

Open menu

Product

For Creators

YouTubers, bloggers, podcasters, musicians & artists

For Publishers

Writers, journalists, local news and new media outlets

For Business

Modern brands & companies with ambitious content marketing

For Developers

Source code, documentation, guides and tutorials

Explore

Resources

Marketplace

Professional themes, custom integrations and qualified experts

Start here New

A huge library of guides, stories, interviews and tips for success

Themes

Hundreds of beautifully designed publication templates

Help center

Get help with product features and answers to common questions.

Integrations

Connect thousands of apps and services with your website

Product updates

All the latest changes and improvements to Ghost

Experts

Get help building your site from certified Ghost developers

About us

Learn more about the people behind the platform (We're hiring!)

Pricing

Close menu

For Creators

Join thousands of creators using Ghost to share their work

For Publishers

The platform for independent publishers

For Business

Content marketing for modern business

For Developers

Source code, documentation, guides and tutorials

Explore
Pricing
Marketplace
Themes
Integrations
Resources
Help center
Product updates
Developers
About us

Get Started — free

Existing customer?
Sign in

Tutorials Newsletter
5 min read
👩‍🎨 Build with Ghost: The art of the post template

Dive into Issue 8 of our Ghost development newsletter! Explore the art of crafting the perfect post template, discover the latest CSS updates, and journey with Thimira as he takes Ghost headless. Plus, tutorials on custom settings, sign-up forms, and more.

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 🤯

* Taking Ghost headless with Thimira

The art of the post template

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 👉

The art of the post template in Ghost
Creating gorgeous post layouts has never been easier in Ghost. Dive into our step-by-step guide to learn everything you need to know about creating a custom post template.
Tutorials Team Ghost

But wait! There's more.

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

Custom settings are the ultimate power-up for Ghost themes
Want to elevate your Ghost theme? Dive into custom settings with this complete guide. Choose typefaces, color schemes, and more. Your theme, your rules!
Tutorials Team Ghost

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

How to build custom sign-up forms in Ghost
Learn to create a custom sign-up form with Ghost. This guide covers all steps, including HTML integration, CSS styling, and user engagement strategies.
Tutorials Team Ghost

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 😜

Just shipped 🚢

* 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.

🚧
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 🛠️

* Meta recently launched Threads, its Twitter X competitor. Ahmad Shadeed took the launch as an opportunity to dive deeply into their CSS .

* Core Web Vitals is a set of Google metrics for measuring your site's user experience. Harry Roberts discusses their implications for SEO .

* Probably more than you want to know about using emoji on the web 🫥 🍾🪤

* View transitions (or incredibly cool ways of showing and hiding content) are coming to the browser. Get ahead of the curve on this new API.

* Animating on scroll used to be a JavaScript-only affair. No longer! Check out scroll progress animations in CSS .

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.

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

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 😏 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.

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.

Have an idea for a Ghost tutorial? Reply to this email and let us know ❤️

Looking for other creators and developers working with Ghost? Join the official Ghost Forum , where we talk about all things Ghost!

On this page
Introduction

How was the tutorial?

Give us some feedback

Keep on learning

✅ Remind me to change this title

5 min read

💌 Build with Ghost: Email is changing in a big way

3 min read

🎁 Build with Ghost: Wrapped 2023

2 min read

📝 Build with Ghost: Documentation incoming

4 min read

➕ Build with Ghost: Recommendations for the open web

5 min read

⦿ Build with Ghost: Meet our new official theme

6 min read

🥯 Build with Ghost: A partial guide to everything

5 min read

🧠 Build with Ghost: Do you know these essential concepts?

4 min read

🏗️ Build with Ghost: First steps for creating a custom theme

5 min read

💻 Build with Ghost: Themes made easy

5 min read

📖 4 ways to build a read-next section in Ghost

4 min read

🐛 How to debug your Ghost theme once and for all

3 min read

🏎️ Build Ghost themes more quickly with our new VS Code extension

5 min read

Be the first to know.

Join the Ghost developer community — sign up to get early access to the latest features, developer tools, and tutorials.

Email sent
Try again

No spam. Once a month. Unsubscribe any time.

Most helpful

Essential tutorials to get you started

Funda mentals

The basics of Ghost theme development

Level up

Next-level development techniques

Do more

Ideas & inspiration for whatever comes next

Docs
Content API
Help Center

Published with Ghost

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

Links found on this page