Tina CMS & Astro

Tina CMS는 Git 지원 헤드리스 콘텐츠 관리 시스템입니다.

Astro와 통합

시작하려면 기존 Astro 프로젝트가 필요합니다.

다음 명령을 실행하여 Astro 프로젝트에 Tina를 설치합니다.
- npm
- pnpm
- Yarn
Terminal window
npx @tinacms/cli@latest init
Terminal window
pnpm dlx @tinacms/cli@latest init
Terminal window
yarn dlx @tinacms/cli@latest init
- 클라우드 ID를 묻는 메시지가 나타나면 Enter를 눌러 건너뜁니다. Tina Cloud를 사용하려는 경우 나중에 생성하게 됩니다.
- “What framework are you using” 라는 메시지가 표시되면 Other를 선택합니다.
- 공개 자산이 어디에 저장되어 있는지 묻는 메시지가 나타나면 Enter를 누르세요.
이 작업이 완료되면 이제 프로젝트 루트에 .tina 폴더를 얻게되고 content/posts에 생성된 hello-world.md 파일이 있어야 합니다.

package.json 파일에서 dev 스크립트를 변경합니다.

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

{
    "scripts": {
        "dev": "astro dev",
        "dev": "tinacms dev -c \"astro dev\""
    }
}

이제 TinaCMS가 로컬 모드로 설정되었습니다. dev 스크립트를 실행한 다음 /admin/index.html#/collections/post로 이동하여 이를 테스트하세요.

“Hello, World!” 게시물을 편집하면 프로젝트 디렉터리의 content/posts/hello-world.md 파일을 업데이트합니다.

.tina/config.ts 파일에서 schema.collections 속성을 편집하여 Tina 컬렉션을 설정하세요.

예를 들어, 필수 “date posted” 프런트매터 속성을 게시물에 추가할 수 있습니다.

import { defineConfig } from "tinacms";

// 호스팅 제공업체는 이를 환경 변수로 노출할 가능성이 높습니다.
const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

export default defineConfig({
  branch,
  clientId: null, // tina.io에서 가져오기
  token: null, // tina.io에서 가져오기
  build: {
    outputFolder: "admin",
    publicFolder: "public",
  },
  media: {
    tina: {
      mediaRoot: "images",
      publicFolder: "public",
    },
  },
  schema: {
    collections: [
      {
        name: "posts",
        label: "Posts",
        path: "src/content/posts",
        format: 'mdx',
        fields: [
          {
            type: "string",
            name: "title",
            label: "Title",
            isTitle: true,
            required: true,
          },
          {
            type: "datetime",
            name: "posted",
            label: "Date Posted",
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Body",
            isBody: true,
          },
        ],
      },
    ],
  },
});

Tina 문서에서 Tina 컬렉션에 대해 자세히 알아보세요.

프로덕션 환경에서 TinaCMS는 변경 사항을 GitHub 저장소에 직접 커밋할 수 있습니다. 프로덕션을 위해 TinaCMS를 설정하려면 Tina Cloud를 사용하거나 Tina Data Layer를 자체 호스팅하도록 선택할 수 있습니다. Tina Docs에서 Tina Cloud 등록에 대해 자세히 알아볼 수 있습니다.