컨텐츠로 이동

Keystatic & Astro

Keystatic은 콘텐츠를 구성하고 GitHub와 동기화할 수 있는 오픈 소스 헤드리스 콘텐츠 관리 시스템입니다.

패키지 관리자의 astro add 명령을 사용하여 Astro 프로젝트에 Markdoc (콘텐츠 항목용) 및 React (Keystatic 관리 UI 대시보드용) 통합을 모두 추가하세요.

Terminal window
npx astro add react markdoc

또한 두 개의 Keystatic 패키지가 필요합니다.

Terminal window
npm install @keystatic/core @keystatic/astro

Astro 구성 파일에 @keystatic/astro Astro 통합을 추가하세요.

astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import markdoc from '@astrojs/markdoc';
import keystatic from '@keystatic/astro';
// https://astro.build/config
export default defineConfig({
integrations: [react(), markdoc(), keystatic()],
output: 'hybrid',
});

Keystatic 구성 파일 생성

섹션 제목: Keystatic 구성 파일 생성

콘텐츠 스키마를 정의하려면 Keystatic 구성 파일이 필요합니다. 또한 이 파일을 사용하면 프로젝트를 특정 GitHub 저장소에 연결할 수 있습니다 (원하는 경우).

프로젝트 루트에 keystatic.config.ts 라는 파일을 만들고 다음 코드를 추가하여 저장소 타입 (local) 및 단일 콘텐츠 컬렉션 (posts)을 모두 정의합니다.

keystatic.config.ts
import { config, fields, collection } from '@keystatic/core';
export default config({
storage: {
kind: 'local',
},
collections: {
posts: collection({
label: 'Posts',
slugField: 'title',
path: 'src/content/posts/*',
format: { contentField: 'content' },
schema: {
title: fields.slug({ name: { label: 'Title' } }),
content: fields.document({
label: 'Content',
formatting: true,
dividers: true,
links: true,
images: true,
}),
},
}),
},
});

Keystatic은 이제 스키마를 기반으로 콘텐츠를 관리하도록 구성되었습니다.

Keystatic을 로컬에서 실행

섹션 제목: Keystatic을 로컬에서 실행

Keystatic 관리 UI 대시보드를 시작하려면 Astro의 개발 서버를 시작하세요.

Terminal window
npm run dev

실행 중인 Keystatic 관리 UI를 확인하려면 브라우저에서 http://127.0.0.1:4321/keystatic을 방문하세요.

  1. Keystatic 관리 UI 대시보드에서 ““Posts”” 컬렉션을 클릭합니다.

  2. 버튼을 이용하여 새 게시물을 작성하세요. “My First Post”라는 제목과 내용을 추가한 후 게시물을 저장하세요.

  3. 이제 이 게시물이 “Posts” 컬렉션에 표시됩니다. 이 대시보드 페이지에서 개별 게시물을 보고 편집할 수 있습니다.

  4. Astro 프로젝트 파일을 보기 위해 돌아갑니다. 이제 이 새 게시물에 대한 src/content/posts 디렉터리에서 새로운 .mdoc 파일을 찾을 수 있습니다.

    • 디렉터리src/
      • 디렉터리content/
        • 디렉터리posts/
          • my-first-post.mdoc
  5. 코드 편집기에서 해당 파일로 이동하여 입력한 Markdown 콘텐츠를 볼 수 있는지 확인합니다. 예를 들어:

    ---
    title: My First Post
    ---
    This is my very first post. I am **super** excited!

Astro 프로젝트와 마찬가지로 Astro의 콘텐츠 컬렉션 API를 사용하여 게시물 및 컬렉션을 쿼리하고 표시하세요.

다음 예시에서는 개별 게시물 페이지에 대한 링크와 함께 각 게시물 제목 목록을 표시합니다.

---
import { getCollection } from 'astro:content'
const posts = await getCollection('posts')
---
<ul>
{posts.map(post => (
<li>
<a href={`/posts/${post.slug}`}>{post.data.title}</a>
</li>
))}
</ul>

개별 게시물의 콘텐츠를 표시하려면 <Content /> 컴포넌트를 가져와 사용하여 콘텐츠를 HTML로 렌더링할 수 있습니다.

---
import { getEntry } from 'astro:content'
const post = await getEntry('posts', 'my-first-post')
const { Content } = await post.render()
---
<main>
<h1>{post.data.title}</h1>
<Content />
</main>

쿼리, 필터링, 컬렉션 콘텐츠 표시 등에 대한 자세한 내용은 전체 콘텐츠 컬렉션 문서를 참조하세요.

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

또한 프로젝트의 배포된 인스턴스에서 콘텐츠를 관리할 수 있도록 Keystatic을 GitHub에 연결하는 것이 좋습니다.

더 많은 CMS 안내서