컨텐츠로 건너뛰기

Ghost & Astro

Ghost는 Node.js를 기반으로 구축된 오픈 소스, 헤드리스 콘텐츠 관리 시스템입니다.

이 섹션에서는 Ghost 콘텐츠 API를 사용하여 데이터를 Astro 프로젝트로 가져옵니다.

시작하려면 다음이 필요합니다.

  1. Astro 프로젝트 - 아직 Astro 프로젝트가 없다면 설치 가이드를 참조하여 즉시 설치하고 실행할 수 있습니다.

  2. Ghost 사이트 - Ghost로 설정된 사이트가 있다고 가정합니다. 그렇지 않은 경우 로컬 환경에서 설정할 수 있습니다.

  3. Content API Key - 사이트의 Settings > Integrations에서 통합할 수 있습니다. 거기에서 Content API key를 찾을 수 있습니다.

사이트의 자격 증명을 Astro에 추가하려면 다음 변수를 사용하여 프로젝트 루트에 .env 파일을 만듭니다.

.env
CONTENT_API_KEY=YOUR_API_KEY

이제 프로젝트에서 이 환경 변수를 사용할 수 있습니다.

환경 변수에 IntelliSense를 사용하려면 src/ 디렉터리에 env.d.ts 파일을 만들고 다음과 같이 ImportMetaEnv를 구성하면 됩니다.

src/env.d.ts
interface ImportMetaEnv {
readonly CONTENT_API_KEY: string;
}

이제 루트 디렉터리에 다음과 같은 새 파일이 포함되어야 합니다.

  • Directorysrc/
    • env.d.ts
  • .env
  • astro.config.mjs
  • package.json

Ghost와 연결하려면 선호하는 패키지 관리자에 대해 아래 명령을 사용하여 공식 콘텐츠 API 래퍼 @tryghost/content-api를 설치하세요.

Terminal window
npm install @tryghost/content-api

Astro와 Ghost로 블로그 만들기

섹션 제목: Astro와 Ghost로 블로그 만들기

위 설정을 사용하면 이제 Ghost를 CMS로 사용하는 블로그를 만들 수 있습니다.

  1. Ghost 블로그
  2. Ghost 콘텐츠 API와 통합된 Astro 프로젝트 - Ghost로 Astro 프로젝트를 설정하는 방법에 대한 자세한 내용은 Astro와 통합을 참조하세요.

이 예시에서는 동적으로 생성된 개별 게시물 페이지에 대한 링크가 포함된 게시물을 나열하는 인덱스 페이지를 만듭니다.

Ghost 콘텐츠 API 패키지를 사용하여 사이트의 데이터를 가져올 수 있습니다.

먼저 lib 디렉터리 아래에 ghost.ts 파일을 만듭니다.

  • Directorysrc/
    • Directorylib/
      • ghost.ts
    • Directorypages/
      • index.astro
  • astro.config.mjs
  • package.json

Ghost 대시보드의 통합 페이지에서 API 키를 사용하여 Ghost API로 API 인스턴스를 초기화하세요.

src/lib/ghost.ts
import GhostContentAPI from '@tryghost/content-api';
// 사이트 자격 증명으로 API 인스턴스 생성
export const ghostClient = new GhostContentAPI({
url: 'http://127.0.0.1:2368', // 사이트가 로컬 환경에서 실행되는 경우 기본 URL입니다.
key: import.meta.env.CONTENT_API_KEY,
version: 'v5.0',
});

src/pages/index.astro 페이지에는 게시물 목록이 표시되며 각 게시물에는 설명과 해당 페이지에 대한 링크가 포함됩니다.

  • Directorysrc/
  • Directorylib/
    • ghost.ts
  • Directorypages/
    • index.astro
  • astro.config.mjs
  • package.json

Ghost에서 블로그 게시물에 엑세스하기 위해 posts.browse() 메서드를 사용해야 합니다. 이를 위해 Astro 프런트매터에서 ghostClient()를 가져오세요. 그리고 모든 게시물을 검색하기 위해 limit: all을 설정하세요.

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

콘텐츠 API를 가져오면 다음과 같은 각 게시물의 속성을 포함하는 객체 배열이 반환됩니다.

  • title - 게시물 제목
  • html - 게시물 내용의 HTML 렌더링
  • feature_image - 게시물의 추천 이미지 소스 URL
  • slug - 게시물의 슬러그

가져와 반환된 posts 배열을 사용하여 페이지에 블로그 게시물 목록을 표시합니다.

src/pages/index.astro
---
import { ghostClient } from '../lib/ghost';
const posts = await ghostClient.posts
.browse({
limit: 'all',
})
.catch((err) => {
console.error(err);
});
---
<html lang="en">
<head>
<title>Astro + Ghost 👻</title>
</head>
<body>
{
posts.map((post) => (
<a href={`/post/${post.slug}`}>
<h1> {post.title} </h1>
</a>
))
}
</body>
</html>

src/pages/post/[slug].astro 페이지는 각 게시물에 대해 동적으로 페이지를 생성합니다.

  • Directorysrc/
  • Directorylib/
    • ghost.ts
  • Directorypages/
    • index.astro
    • Directorypost/
      • [slug].astro
  • astro.config.mjs
  • package.json

posts.browse()를 사용하여 props로 게시물을 반환하는 블로그 게시물에 액세스하기 위해 각 동적 경로에서 ghostClient()를 가져오세요.

src/pages/post/[slug].astro
---
import { ghostClient } from '../../lib/ghost';
export async function getStaticPaths() {
const posts = await ghostClient.posts
.browse({
limit: 'all',
})
.catch((err) => {
console.error(err);
});
return posts.map((post) => {
return {
params: {
slug: post.slug,
},
props: {
post: post,
},
};
});
}
const { post } = Astro.props;
---

post 객체의 속성을 사용하여 각 페이지에 대한 템플릿을 만듭니다.

src/pages/post/[slug].astro
---
import { ghostClient } from '../../lib/ghost';
export async function getStaticPaths() {
const posts = await ghostClient.posts
.browse({
limit: 'all',
})
.catch((err) => {
console.error(err);
});
return posts.map((post) => {
return {
params: {
slug: post.slug,
},
props: {
post: post,
},
};
});
}
const { post } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<title>{post.title}</title>
</head>
<body>
<img src={post.feature_image} alt={post.title} />
<h1>{post.title}</h1>
<p>{post.reading_time} min read</p>
<Fragment set:html={post.html} />
</body>
</html>

사이트를 배포하려면 배포 가이드를 방문하여 선호하는 호스팅 제공업체의 지침을 따르세요.

더 많은 CMS 안내서

Contribute

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

Community