Building a Blog with SvelteKit and Ghost CMS

WordPress stands as the undisputed leader in the CMS (Content Management System) landscape, powering over 40% of websites across the internet. Its extensive ecosystem and user-friendly interface have made it a go-to choice for countless individuals and businesses alike. However, while WordPress boasts impressive market dominance, it's worth noting that performance and flexibility aren't always its strongest suits.

In the quest for streamlined performance and enhanced flexibility, we turn our attention to Ghost CMS and SvelteKit.

Looking for a blog platform that's fast and flexible? While Ghost CMS offers a streamlined experience, we're enhancing it with SvelteKit for even more control and customization. Today, I'll guide you through combining the power of SvelteKit and Ghost CMS to create your own dynamic blog.

This article serves as an introduction to this seamless integration, utilising the Ghost Content API library to connect the two platforms. This integration forms the fundamental principle underlying this approach. From here, you are encouraged to explore further, diving deeper into the capabilities and possibilities offered by this powerful combination.

Let's dive in and get started!

Ghost CMS Configuration

I opted for the free hosting provided by DigitalPress.blog for my Ghost CMS. This offers a cost-effective way to start a blog. The free option includes ads, since we're using Ghost as a headless CMS, this isn't a major concern.

• Create a DigitalPress Account

  Visit DigitalPress.blog and sign up.

• Create Your Ghost Blog

  After signing up, name your blog and get started with the default free subscription. For example, I named mine "sveltekit-ghost".

• Access Your Dashboard

  Once your blog is created, you'll receive URLs for your blog address and administration dashboard.

  For example:

  Your blog address: sveltekit-ghost.digitalpress.blog

  Administration dashboard: sveltekit-ghost.digitalpress.blog/ghost

  Click the admin link to create your Ghost admin account and access your dashboard.

Content API Keys

To connect Ghost CMS with SvelteKit, you'll need API keys.

• Access Settings

  In your Ghost dashboard, navigate to Settings (cogwheel icon) > Advanced > Integrations > Custom Integration > Add Custom Integration.

• Create a New Integration

  Name your integration (e.g., "SvelteKit") and obtain the following keys:

  • Content API key
  • Admin API key
  • API URL

• SvelteKit

  Now let's set up SvelteKit and integrate it with Ghost CMS.

• Create a SvelteKit Project

  Use the following commands to create a new SvelteKit project

  npx sv create my-app

  but I'm not going to cover how to scaffold a SvelteKit project, it's simple enough. If you're not sure, check the docs.

• Configure Environment Variables

  Create a .env file in the root directory and add the following variables:

  VITE_GHOST_API_URL=[API URL] VITE_GHOST_CONTENT_API_KEY=[Content API key] VITE_SECRET_GHOST_ADMIN_API_KEY=[Admin API key]

• Install Ghost Libraries

  Install the required Ghost JavaScript libraries:

  pnpm i @tryghost/admin-api @tryghost/content-api pnpm i @types/tryghost__content-api -D

• Create API Integration

  In your SvelteKit project, create an API integration file (e.g., src/lib/ghost/index.ts) with the following content:

  // src/lib/ghost/index.ts import GhostContentAPI from '@tryghost/content-api'; export const contentApi = new GhostContentAPI({
  url: import.meta.env.VITE_GHOST_API_URL,
  key: import.meta.env.VITE_GHOST_CONTENT_API_KEY,
  version: 'v5.0'
});

• Retrieve Posts

  You can now fetch posts in your SvelteKit project. For example:

  // src/routes/+page.svelte import { contentApi } from '$lib/ghost'; contentApi.posts   .browse({ limit: 5, include: ['authors', 'tags'] })   .then((posts) => {     posts.forEach((post) => {       console.log(post);     });     .catch((err) => {       console.error(err); });

• That's it! You've successfully set up SvelteKit and Ghost as a headless CMS!

Conclusion

This guide serves as a starting point. Using the Content API, you can retrieve posts, site settings, pages, etc. Ghost is a fully-featured CMS, enabling operations like member subscriptions that may require the Admin API key. We hope this content proves useful as you embark on your journey with Ghost as a headless CMS for SvelteKit.

Check the repo:

SvelteKit | Ghost repository