Blog with Astro, Ghost CMS

Ghost でサイトを作成する（無料アカウント）
サイト名は変更できるがサブドメイン（YOURSITE.ghost.io）は変えられないので注意

【Ghost】カスタムAPI

Settings > Advanced > Integrations
[Add Custom integration] > Titleを入力 > [Save] > [Close]
Content API key (read-only), Admin API key, API URLが表示される

chocolat

 【Ghost】 Make site privateSettings > General >  Make site private > [Edit]

Enable password protectionをonにすると以下が適用される
Ghost側のフロントエンドにパスワードが設定される
SEO機能が無効になる

noindex タグが付与される
https://ghost.org/docs/jamstack/

chocolat

Astroのセットアップ

npm create astro@latest

画面に従って選択

表示確認

npm run dev

chocolat

Ghostのセットアップ on Astro

Setting up credentials

.env

CONTENT_API_KEY=YOUR_API_KEY

src/env.d.ts

interface ImportMetaEnv {
  readonly CONTENT_API_KEY: string;
}

Installing dependencies

npm install @tryghost/content-api
npm install --save @types/tryghost__content-api

chocolat

Fetching

APIをinitializeする

src/lib/ghost.ts

import GhostContentAPI from "@tryghost/content-api";

// Create API instance with site credentials
export const ghostClient = new GhostContentAPI({
  url: "http://YOURDOMAIN.ghost.io",
  key: import.meta.env.CONTENT_API_KEY,
  version: "v5.0",
});

Displaying a list of posts

src/pages/index.astro

---
...
import { ghostClient } from '../lib/ghost';
const posts = await ghostClient.posts
    .browse({
        limit: 'all',
    })
    .catch((err) => {
        console.error(err);
    });
---

<Layout title="Welcome to Astro.">
  <main>
    {
      posts.map(
        (post) =>
          post.visibility && (
            <a href={`/post/${post.slug}`} key={post.id}>
              <h1>{post.title}</h1>
              <p>{post.published_at}</p>
            </a>
          )
      )
    }
  </main>
</Layout>

chocolat

 参考
 Ghost Content APIhttps://ghost.org/docs/content-api/

 Ghost gets paywalls righthttps://www.spectralwebservices.com/blog/how-ghost-gets-paywalls-right/