Astro-GhostCMS - An Astro-Integration

January 17, 2024 at 12:51 PM

Owner & Operator of Matthiesen.xyz - Also the Core Developer of the Projects we maintain

After much pain and effort I have finally gotten everything working and a live demo built to show it off... This project started as just a cool way to host my own blog, but has grown into something much bigger! Introducing the Astro-GhostCMS Integration & API! A full fledged GhostCMS Astro frontend integration. It completely takes over a Astro install to bring the GhostCMS content into your super quick and fast Astro Frontend, as well as the ability to disable the main portion of the integration and just use the Content-API with types ready to go out the door just start pulling your Content using simple and easy to understand functions similar to getCollection, and Go! Even a customizable Base Theme separated into its own repo for anyone who wants a starting point. I even provide demo API information for anyone wanting to just test it out and see how it works!

Check out the Integration Here Astro-GhostCMS or continue to read below...

Astro-GhostCMS Quick Start

Astro minimum Version: Astro v4.0

This Integration is 2 parts. Firstly, there is the API portion that uses the @tryghost/content-api to create the link between astro and GhostCMS. From there we move to the Second Part, which is a theme pre-programmed to pull ALL of its data from GhostCMS iteself instead of storing any data locally outside of Build.

This package contains a independent copy of the tryghost content-api.js that is used to establish the connection so this package dose not depend on @tryghost/content-api package.
If you are looking for a more Customizable option please check astro-ghostcms-basetheme
This project is not setup for SSR in Integration mode. As such is will most likely not function properly in that mode. You will need to build your own project around the API or customize the basetheme linked above.

Astro Integration Mode

In this mode, the addon will not be just an API, but will be a full Route takeover, there is plans to add more themes in time, but for now there is only the base Casper theme based on Ghost's main Theme.

Astro Add Installation

1
# For fresh Install
2
npm create astro@latest
3
# Create Empty Install with standard typescript
4
# Then Delete entire `pages` folder under `/src/`
5
npx astro add @matthiesenxyz/astro-ghostcms

Dont forget to set your environment Variables!

You must also create 2 environment variables in a .env file with the following:

1
CONTENT_API_KEY=YOURAPIKEY
2
CONTENT_API_URL=https://ghost.io

Manual Installation

npm i @matthiesenxyz/astro-ghostcms

Then set your astro.config.ts to look like this:

1
import { defineConfig } from "astro/config";
2
import sitemap from "@astrojs/sitemap"; //optional but recommended
3
import GhostCMS from '@matthiesenxyz/astro-ghostcms';
4

5
// https://astro.build/config
6
export default defineConfig({
7
  site: "https://YOUR-DOMAIN-HERE.com"
8
  integrations: [GhostCMS()],
9
});

Dont forget to set your environment Variables!

You must also create 2 environment variables in a .env file with the following:

1
CONTENT_API_KEY=YOURAPIKEY
2
CONTENT_API_URL=https://ghost.io

When you deploy your install dont forget to set the above ENVIRONMENT VARIABLES!

Created Routes

The routes are the same as a standard Ghost Blog so you can migrate to Astro easily.

Route	Content
`/`	Homepage with recents/features Blog Posts
`/[slug]`	Post or Page
`/author/[slug]`	Author page with related posts
`/authors`	All the authors
`/tag[slug]`	Tag page with related posts
`/tags`	All the tags
`/archives/[...page]`	All the posts, paginated