Ghost & Astro

Ghost is an open-source, headless content management system built on Node.js.

In this section, we’ll use the Ghost content API to bring your data into your Astro project.

To get started you will need to have the following:

1. An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.

2. A Ghost site - It is assumed that you have a site set up with Ghost. If you don’t you can set one up on a local environment.

3. Content API Key - You can make an integration under your site’s Settings > Integrations. From there you can find your Content API key

To add your site’s credentials to Astro, create an .env file in the root of your project with the following variable:

Now, you should be able to use this environment variable in your project.

If you would like to have IntelliSense for your environment variable, you can create a env.d.ts file in the src/ directory and configure ImportMetaEnv like this:

Your root directory should now include these new files:

• Directorysrc/

  • env.d.ts
• .env
• astro.config.mjs
• package.json

To connect with Ghost, install the official content API wrapper @tryghost/content-api using the command below for your preferred package manager:

npmpnpmYarn

Terminal window

With the setup above, you are now able to create a blog that uses Ghost as the CMS.

1. A Ghost blog
2. An Astro project integrated with the Ghost content API - See integrating with Astro for more details on how to set up an Astro project with Ghost.

This example will create an index page that lists posts with links to dynamically-generated individual post pages.

You can fetch your site’s data with the Ghost content API package.

First, create a ghost.ts file under a lib directory.

• Directorysrc/

  • Directorylib/

    • ghost.ts
  • Directorypages/

    • index.astro
• astro.config.mjs
• package.json

Initialize an API instance with the Ghost API using the API key from the Ghost dashboard’s Integrations page.

The page src/pages/index.astro will display a list of posts, each with a description and link to its own page.

• Directorysrc/

  • …
• Directorylib/

  • ghost.ts
• Directorypages/

  • index.astro
• astro.config.mjs
• package.json

Import ghostClient() in the Astro frontmatter to use the posts.browse() method to access blog posts from Ghost. Set limit: all to retrieve all posts.

Fetching via the content API returns an array of objects containing the properties for each post such as:

• title - the title of the post
• html - the HTML rendering of the content of the post
• feature_image - the source URL of the featured image of the post
• slug - the slug of the post

Use the posts array returned from the fetch to display a list of blog posts on the page.

The page src/pages/post/[slug].astro dynamically generates a page for each post.

• Directorysrc/

  • …
• Directorylib/

  • ghost.ts
• Directorypages/

  • index.astro
  • Directorypost/

    • [slug].astro
• astro.config.mjs
• package.json

Import ghostClient() to access blog posts using posts.browse() and return a post as props to each of your dynamic routes.

Create the template for each page using the properties of each post object.

To deploy your site visit our deployment guide and follow the instructions for your preferred hosting provider.

• You can get started with this Astro Ghost Starter.
• Andre Carrera wrote a blog post showing how to use Ghost’s SDK to embed posts and previews in your Astro project.

More CMS guides