
Prerequisites
This configuration of a Ghost publication requires existing moderate knowledge of JavaScript as well as Vue.js. You’ll need an active Ghost account to get started, which can either be self-hosted or using a Ghost(Pro) account. Finally, you’ll need to install Gridsome globally via the command line in your terminal using the following:http://localhost:8080/
in a browser and view the newly created Gridsome site.
Minimum required version
To make sure that Ghost works with Gridsome, you’ll need to update the dependencies and run Gridsome version > 0.6.9 (the version used for this documentation).Getting started
To get started fetching the content from Ghost, install the official Ghost source plugin:gridsome.config.js
file:
baseUrl
value to the URL of your Ghost site. For Ghost(Pro) customers, this is the Ghost URL ending in .ghost.io
, and for people using the self-hosted version of Ghost, it’s the same URL used to access your site.
Next, update the contentKey
value to a key associated with the Ghost site. A key can be provided by creating an integration within the Ghost Admin. Navigate to Integrations and click “Add new integration”. Name the integration, something related like “Gridsome”, click create.

@gridsome/source-filesystem
plugin if you’re not planning on using Markdown files for your content.
Post index page
The Gridsome Blog Starter comes with pages and templates which allows you to use Ghost as a headless CMS. To create an index page that loads all of your posts, start by updating the main index page. Find theIndex.vue
file in /src/pages
of your project and replace the <page-query>
section with the following:
description
and coverImage
to excerpt
and feature_image
, which matches the data coming from the Ghost API.
Single post page
Templates in Gridsome follow a specific naming convention which uses the type names as defined in the GraphQL schema, so the existingPost.vue
file in /src/templates/
needs to be renamed to GhostPost.vue
.
Once this is done, replace the <page-query>
section in the template with the following:
http://localhost:8080/
in a web browser to see the result.

Next steps
Discover how to create tag and author archive pages or use other content from Ghost in your Gridsome site in our recipes on the next page. For further information, check out the Ghost Content API documentation and the official Gridsome documentation.Examples
The flexibility of the Ghost Content API allows you to feed posts, pages and any other pieces of content from your Ghost site into a Gridsome front-end. Below are a few code examples of how to do this. If you just landed here, see the getting started with Gridsome page for more context!Create tag archive pages
Using the Gridsome Blog Starter as a starting point, rename the currentTag.vue
template to GhostTag.vue
and replace the <page-query>
section with the following:
/tag/:slug
which will show all the posts filed under that tag.
Create author archive pages
To add an author archive page to your site, create a new file in/src/templates
called GhostAuthor.vue
. Use the following code within GhostAuthor.vue
:
/author/:slug
rendering all posts written by this author, along with their unmodified author image (if available) and name.
Retrieve Ghost settings
The Gridsome Ghost Source Plugin adds site settings tometaData
within the GraphQL schema. To retrieve that data use the following query: