DEV Community

Cover image for Astro and GhostCMS
Adam Matthiesen
Adam Matthiesen

Posted on

Astro and GhostCMS

Today I decided it was time to tell the world about a new tool that I've been working on. This tool is meant to bridge a gap between the now well known Astro framework and Ghost blogging Platform.

To Elaborate, the tool I'm talking about is Astro-GhostCMS, known on npm as @matthiesenxyz/astro-ghostcms. It's an Astro Integration built from the ground up, to provide a new way for Ghost users to be able to migrate their front-end to Astro, providing a Super-Fast and responsive website with Ghost acting as a Headless-CMS! For now I have two themes that have been created, a Ghost-Casper copy built for Astro, and a TailwindCSS Catppuccin based theme that gives a pastel coloring look to your blog!

This tool is the first ever JavaScript/TypeScript Utility I've ever made, built using a custom version of the ghost content API, in fact the core is from @ts-ghost that has been directly implemented to be able to interface with the rest of the internal functions, I've also configured astrojs/sitemap, astrojs/rss, astro-robots-txt, as well as satori for OpenGraph image generation directly into my Integration.

How it works

So Everyone always wants a break-down of how things work, so here is the basic rundown of what's going on, The Integration has a few different parts, the main Node_Module, which acts as a Content-API for Ghost, as well as a Route Injector, Integration Injector(Sitemap, Robots-TXT, Satori, RSS), as well as the main Configuration point. The Theme is referenced as from its own Node_Module that is a dependency of the main Module. If you prefer a different theme, its as simple as installing the Node_Module that is the Theme, then adding the appropriate changes to your configuration files. You can run the integration in Full(Complete takeover), API-Only(No Route/Integration Injection), or a mixture of the both! All you need to do is add your Content-API Key, and Appropriate URL for your Ghost Install!

Quick Start

If you already have a Ghost Server its super easy to get started experimenting with an Astro Front-end! Either checkout my repo below or run the following command to deploy a provided template.

npx @matthiesenxyz/create-astro-ghostcms
Enter fullscreen mode Exit fullscreen mode

Here is an example of what the above command out will look like:

create-astro-ghostcms example output

Don't forget to set your own API-Key(Located in .env) and URL(Located in astro.config.mjs)! The create Utility will automatically apply my Ghost Demo's Key and URL.

Built With Astro

This entire project is focused on Astro, even the main project website is Astro, in fact its built using both Starlog, a Theme provided by the Astro Team, and Starlight, an Integration made by the Fantastic delucis, with the help of the great Wizard HiDeoo Providing me with the interface that is both as quick as my integration creates, as well as a great place to public resources for the community related to the astro-ghostcms project!

Interested in my project? Check out the following links to get involved or get started!

Honorable Mentions

These are the people who helped make the project what it is!

Jacob Jenkins

This Amazing Dude was partially who inspired me to turn what was going to be a basic API, into a full blown Astro Integration, He is the Founder of Futurethemes.io an upcoming Astro-Theme company, and the guy who build Astro-Blog a Basic Astro-Integration that at the moment simply makes it easy for a user to create a simple blog with a nice design, but will soon have much more functionality! He is also a member of the Astro-Integration-Kit Team!

Florian Lefebvre

Without directly assisting, this developer created Astro-Integration-Kit for the Astro Community! and with this integration-kit Florian, as well as Jacob and others of the Astro Community have provided tools that have been found useful to the Astro-GhostCMS project! Without his work starting his kit, my project would not have been able to be as simple!

Philippe L'ATTENTION "PhilDL"

Creator of @ts-ghost the API core that is being used to create the fetch requests to Ghost-CMS headless servers. He also created Ghost-Blog-Buster which would allow you export your ghost content if you are looking for a FULL migration from ghost.

The rest of the Amazing Astro Community on Discord(Astro Lounge).

Astro has built an amazing discord community who are all way more than friendly. Many of their discord members, who call themselves support, take no compensation but still provide amazing support and assistance. No matter what the issue is, you can almost always find someone who has dealt with something similar to what your trying to figure out, it really is amazing how much of a community has been built up around this Open Source project!

Top comments (0)