컨텐츠로 이동

Tina CMS & Astro

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

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

  1. 다음 명령을 실행하여 Astro 프로젝트에 Tina를 설치합니다.

    Terminal window
    npx @tinacms/cli@latest init
    • 클라우드 ID를 묻는 메시지가 나타나면 Enter를 눌러 건너뜁니다. Tina Cloud를 사용하려는 경우 나중에 생성하게 됩니다.
    • “What framework are you using” 라는 메시지가 표시되면 Other를 선택합니다.
    • 공개 자산이 어디에 저장되어 있는지 묻는 메시지가 나타나면 Enter를 누르세요.

    이 작업이 완료되면 이제 프로젝트 루트에 .tina 폴더를 얻게되고 content/posts에 생성된 hello-world.md 파일이 있어야 합니다.

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

    package.json
    {
    "scripts": {
    "dev": "astro dev",
    "dev": "tinacms dev -c \"astro dev\""
    }
    }
  3. 이제 TinaCMS가 로컬 모드로 설정되었습니다. dev 스크립트를 실행한 다음 /admin/index.html#/collections/post로 이동하여 이를 테스트하세요.

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

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

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

    .tina/config.ts
    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 컬렉션에 대해 자세히 알아보세요.

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

더 많은 CMS 안내서