Manual Install

@matthiesenxyz/ astro-ghostcms-catppuccin

v0.0.14 GitHub GitLab npm Changelog

Demo Live Demo of Catppuccin Theme

Install

npm

# For fresh Install
npm create astro@latest
# Create Empty Install with standard typescript
# Then Delete entire `pages` folder under `/src/`

# Then run the following:

npx astro add @matthiesenxyz/astro-ghostcms tailwind

npm install @matthiesenxyz/astro-ghostcms-catppuccin

pnpm

# For fresh Install
pnpm create astro@latest
# Create Empty Install with standard typescript
# Then Delete entire `pages` folder under `/src/`

# Then run the following:

pnpm astro add @matthiesenxyz/astro-ghostcms tailwind

pnpm add @matthiesenxyz/astro-ghostcms-catppuccin

yarn

# For fresh Install
yarn create astro@latest
# Create Empty Install with standard typescript
# Then Delete entire `pages` folder under `/src/`

# Then run the following:

yarn astro add @matthiesenxyz/astro-ghostcms tailwind

yarn add @matthiesenxyz/astro-ghostcms-catppuccin

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

astro.config.ts

import { defineConfig } from "astro/config";
import ghostcms from "@matthiesenxyz/astro-ghostcms";
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  site: "https://YOURDOMAINHERE.com/",
  integrations: [tailwind(),
    ghostcms({
      theme: "@matthiesenxyz/astro-ghostcms-catppuccin",
      ghostURL: "https://ghostdemo.matthiesen.xyz",
    })
  ],
});

Setup Tailwind

Catppuccin Themes	Default?
Latte (Light)
Frappe (Light Dark)
Macchiato (Dark Light)	TRUE
Mocha (Darkest)

Default

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@matthiesenxyz/astro-ghostcms-catppuccin')]
};

Latte

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@matthiesenxyz/astro-ghostcms-catppuccin/latte')]
};

Frappe

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@matthiesenxyz/astro-ghostcms-catppuccin/frappe')]
};

Macchiato

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@matthiesenxyz/astro-ghostcms-catppuccin/frappe')]
};

Mocha

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [require('@matthiesenxyz/astro-ghostcms-catppuccin/mocha')]
};

Setup .env variables

.env

CONTENT_API_KEY=a33da3965a3a9fb2c6b3f63b48

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
/404	404 Page
/[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
/rss.xml	All the posts, in a FEED