Developer docs

Ghost Tutorials

Quick guides to some of the most popular use-cases and workflows with Ghost

Using Gulp in a Ghost theme to compress CSS and JavaScript

In this tutorial we’ll show you how to enhance your theme development with Gulp. By the end of this tutorial you’ll have a better understanding of how Gulp works and how it can dramatically improve your Ghost theme development experience. Prerequisites The following steps require experience with using command line interfaces such as Terminal, and CLI tools like npm or yarn. Check out the official npmjs documentation and yarn documentation for more information.

How to move from WordPress to Ghost

Thanks to the Export to Ghost plugin for WordPress, you can smoothly move your content from WordPress to Ghost. In this tutorial we’ll show you how to export your content from WordPress, import it into a Ghost site, and some of the gotchas during this process. Prerequisites The Export to Ghost plugin exports posts, pages, tags, authors and images from WordPress sites. Once you’ve imported your content from WordPress to Ghost, you’ll benefit from a suite of native features for all of the functionality you’re used to, without the need for additional plugins or downloads.

How to add a contact form to a Ghost site

A contact form on your site is a way for your audience to get in touch with you directly. In this tutorial we’ll show you how to add a custom contact form directly into your Ghost theme. Prerequisites The following tutorial involves customising a Ghost theme, specifically Casper theme. To learn more check out our extensive Handlebars theme documentation as well as our FAQ guides on downloading and uploading themes. If you’re looking for a less code-heavy way of adding a contact form to your Ghost site then check out our form Integrations.

How to add a table of contents to your Ghost site

Long-form content sometimes require extra UI to help the viewer navigate the content quickly. A table of contents is a list of links shown above or beside the main content that once clicked will take the viewer to a headed section within the page. In this tutorial we’ll show you how to automatically generate a table of contents from the section headings in your content. Prerequisites This tutorial shows how to add a table of contents to your posts and pages via Ghost admin, however the full implementation does require downloading and editing your Ghost theme.

How to create a Google News Sitemap with Ghost

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. This tutorial walks you through how to create a Google News sitemap using dynamic routing, as well as a Handlebars template for your posts that is fully optimised for the Google News aggregator. Add a new route for your sitemap The first thing to do is add a new route where your sitemap will exist by the using the dynamic routing layer in Ghost.

How to add social networks to your Ghost site

With the introduction of the secondary navigation in Ghost, it’s possible to build out a custom set of links without affecting your main site navigation. In this tutorial we’ll show you how to create a set of icons that link out to your presence on social media networks. Prerequisites Before beginning this tutorial it might be wise to make yourself more familiar with how to download and customise a Ghost theme.

A complete guide to code samples in Ghost

In this guide we’ll show how to add code samples to your Ghost site, and how to customise them with code syntax highlighting. When writing technical content, most commonly engineering and development articles, example code needs to be shown to the reader. “Code blocks” are a way of presenting code in the same way it would look in a code editor, with indenting and a monospaced font. <article class="post-item"> <h2 class="post-title"><a href="/welcome/">Welcome to Ghost</a></h2> <p>Welcome, it's great to have you here.

Show reading time & progress

In this tutorial we’ll discover how to add reading duration to all of your posts, as well as more advanced techniques for showing reading progress within posts. Reading time When writing long form content it’s often beneficial to let your readers know how long it might take to read a post. In Ghost handlebars themes, the reading_time helper calculates the reading time of your content and outputs it as a number of minutes with a label:

A complete guide to adding comments to posts in Ghost

In this guide we’ll take you through the steps required to add comments to your articles, so people viewing your content can post replies directly on the article. One way of communicating with your readers is by adding the ability for people to comment on your content. There are a variety of tools that do this, and do so in different ways, so it’s best to pick the tool for your purpose.

How to make an iTunes Podcast RSS feed with Ghost

Ghost comes with automatic RSS feeds for your content, but you can also create a custom feed using the flexible dynamic routing layer to support specific content types, like videos and podcasts. Adding /rss/ to most URLs in Ghost produces an automatically generated RSS feed for your content. If you’re publishing a podcast on your Ghost site then you’ll probably want to create a custom RSS feed to distribute your podcast episodes to places like iTunes.

How to Add Google Custom Search to Ghost

Add search functionality to your Ghost publication and allow your readers to find exactly what they are looking for Overview Adding search to your Ghost publication gives your readers an additional way to navigate your content and improves engagement. It’s possible to add a sensible search function using the free Google Custom Search tool. This is possible using the Handlebars theme layer - by using the code provided by Google Custom Search in your theme files.

How To Build A Related Posts Block in Ghost

Improve your reader engagement with a related posts block for your site using the flexible theme layer in Ghost. Overview Adding a related posts block on each post on your site is a great way to ensure your readers have a positive experience and encourages them to move around your site content once they land on a post. This is possible using the Handlebars theme layer by creating a partial template and utilising the {{#get}} helper.

A complete guide to ⚡AMP templates in Ghost

Ghost ships with a clean, simple AMP template which works with just about any site, but wouldn’t it be nice if you could customise it to make it perfectly match your theme and your brand? Well you can! Read on: The default AMP template used by Ghost is here: https://github.com/TryGhost/Ghost/blob/master/core/frontend/apps/amp/lib/views/amp.hbs You can override this template by placing your own amp.hbs file with the same structure in the root directory of your theme.

Creating chronological posts with Ghost

Posts on any index page in Ghost will be displayed in reverse chronological order by default, but it’s possible to display posts in chronological order using the data property in the routes.yaml file. If you have created content collections using the dynamic routing configuration layer in Ghost, and would like to display your content chronologically, this can be implemented using one extra line of code. Create content collections If you haven’t already created a content collection, follow this tutorial first.

Change the URL for tags and authors in Ghost

A taxonomy is used to group things together based on a common relation. In Ghost, a taxonomy is used to group posts together by the author of the post, or the tags used for a post and you can adjust the URL structure of your taxonomy with a few lines of code ⚡ Overview️ By default, Ghost will create permalinks for each taxonomy value, so there is be a unique URL for each author and for each tag, featuring all of the content that matches the slug.

Creating content hubs with Ghost

The dynamic routing configuration layer in Ghost unlocks the ability to create paginated content hubs called channels. These can be implemented without changing the individual URL of the posts, and provide an efficient way to divide or combine existing tagged content on your Ghost publication with a few lines of code. Overview Content views are created using the controller property in the routes.yaml file. The controller property has one supported value: channel.

Building content collections with Ghost

Split your site into distinct sections to support different content types or topics using collections. Overview Collections allow you to create groups of posts that match a filter, with unique permalinks, and an index URL where all posts within that collection are listed and paginated. It’s possible to have a single collection that contains all posts, or multiple collections for distinct areas, content types or topics. Content collections are created using the dynamic routing configuration layer, and allow you to create unique areas within your publication that have entirely different URL structures, templates, RSS feeds, design and behaviour.

Creating custom post templates with Ghost themes

One of the most powerful features within the Ghost theming layer is the ability to create custom templates. Once implemented in your theme files, these templates can be selected by your team when creating a post or page, allowing the writer to use a unique layout for their content quickly and easily. This tutorial shows you how to create a custom template within a Ghost theme. Getting started Custom templates are useful for a variety of use cases, including:

Creating a custom home page with Ghost

Creating a custom home page for your site is a great way to set yourself apart from the crowd and put your own unique stamp on your online presence. This tutorial shows you how to customise and develop your own custom home page in Ghost. Creating and customising your template Before we dive in there’s a couple of prerequisites I’d like to explain for working with Ghost themes. Themes in Ghost use Handlebars, a templating language that provides access to Ghost content and other common templating benefits.

Implementing redirects in Ghost

When managing a website of any nature, implementing URL redirects is a commonly used practice. Redirection is the process of forwarding one URL to a different URL. They are most commonly used when removing or moving content on your site, to fix broken links, or to migrate content between different domains. In Ghost, implementing redirects can be done by accessing a simple JSON file redirects.json in Ghost admin. This file can be downloaded, edited with code and reimported into the admin interface.

A complete guide to translation & multi-language content in Ghost

Ghost handlebars theming has a range of tooling designed to help you create a site for a specific language, create sites for multiple languages, and build themes with multiple language options. The following guide will show you these tools and where to find more information on catering your site to specific languages. Configure your site for a specific language To begin configuring your site for a specific language, head to the General view within the Ghost admin.

Localising dates in Ghost Themes

Ghost, by default, outputs dates in English using the timezone of the server hosting your site. It is possible to change both the language and the timezone used to output dates in your theme using jQuery, moment.js and moment.js timezone. In the following guide, you’ll learn how to switch the locale to German and also how to output dates converted to the ‘Europe/Berlin’ timezone. Note: This guide assumes you’re comfortable editing a Ghost theme.

Test any open source pull request in seconds

Have you ever taken a look at the list of Pull Requests on the Ghost repo and wished it was easier to try them out? The following post details how to setup your environment so that testing a PR is as easy as: pr 3361 Edit the git config file This step comes from a gist by Bert Belder, @piscisaureus: You need to edit the git config file for your locally checked out Ghost repository.