/ Software Development

How to Create Ghost Template

Md. Masumur Rahman

Md. Masumur Rahman

I am Md.Masumur Rahman, From the age of twenty I knew that design was my passion. I specialize in designing and developing user interfaces and digital products.

Read More
How to Create Ghost Template

Ghost theme contains static HTML templates that make use of helpers to output data from your site, and custom CSS for styling need to make it.


The recommended file structure for a Ghost theme is:

An optional /partials directory allows you to use partial templates across your site. This allows you to share blocks of HTML between multiple templates and reduce code duplication and make it more readable.


Two templates files are required: index.hbs and post.hbs. All other templates are optional. We highly recommended using a default.hbs file as a base layout for your theme. If you have significantly different layouts for different pages or content types, you can use the dynamic routing configuration layer, or use partials to encapsulate common parts of your theme.

Theme templates are hierarchical, so one template can extend another template. This prevents base HTML from being repeated. Here are some commonly used theme templates and their uses:


default.hbs is a base template that contains the boring bits of HTML that exist on every page such as <html>, <head> or <body> as well as the required {{ghost_head}} and {{ghost_foot}} and any HTML for the header and footer.


This is the standard required template for a list of posts. It is also used if your theme does not have a tag.hbs, author.hbs or index.hbs template. The index.hbs template usually extends default.hbs and is passed a list of posts using the {{#foreach}} helper.


An optional template to provide special content for the home page. This template will only be used to render /.


The required template for a single post which extends default.hbs and uses the {{#post}} helper to output the post details. Custom templates for individual posts can be created using post-:slug.hbs.


An optional template for static pages. If this is not specified then post.hbs will be used. Custom templates for individual pages can be created using page-:slug.hbs.


An optional custom templates that can be selected in the admin interface on a per-post basis. They can be used for both posts and pages.


An optional template for tag archive pages. If not specifed the index.hbs template is used. Custom templates for individual tags can be created using tag-:slug.


An optional template for author archive pages. If not specified the index.hbs template is used. Custom templates for individual authors can be created using author{{slug}}.


An optional template for the password form page on password protected publications.


An optional theme template for any 404 or 500 errors. If one is not specified Ghost will use the default.


An optional theme template for AMP (Accelerated Mobile Pages). If your theme doesn't provide an amp.hbs file, Ghost will use its default.


Themes can include a robots.txt which overrides the default robots.txt provided by Ghost.

The development version of the default theme Casper can be used to explore how Ghost themes work, or you can customise Casper and make it your own!


Ghost templates are constructed from HTML and handlebars helpers. There are a few requirements:

In order for a Ghost theme to work, you must make use of the required helpers: {{asset}}, {{body_class}}, {{post_class}}, {{ghost_head}}, {{ghost_foot}}.

See the full list of helpers for more detailed information about specific Handlebars helpers.


Each page in a Ghost theme belongs to a context which is determined by the URL. The context will decide what template will be used, what data is available and what is output by the {{body_class}} helper.


When we building themes it is important to consider the scope of classes and IDs to avoid clashes between your main styling and your post styling. IDs are automatically generated for headings and used inside a post, so it's best practice to scope things to a particular part of the page. For example: #themename-my-id is preferrable to #my-id.