Decap CMS & Astro

Decap CMS (이전 Netlify CMS)는 오픈 소스 Git 기반 콘텐츠 관리 시스템입니다.

Decap을 사용하면 이미지 최적화 및 콘텐츠 컬렉션을 포함한 Astro의 모든 기능을 최대한 활용할 수 있습니다.

Decap은 승인된 사용자가 배포된 웹 사이트에서 직접 콘텐츠를 관리할 수 있도록 React 앱을 로드할 프로젝트에 경로 (일반적으로 /admin)를 추가합니다. Decap은 변경 사항을 Astro 프로젝트의 소스 저장소에 직접 커밋합니다.

DecapCMS 설치

Astro에 Decap을 추가하는 데는 두 가지 옵션이 있습니다.

다음 명령을 사용하여 패키지 관리자를 통해 Decap 설치:
- npm
- pnpm
- Yarn
Terminal window
npm install decap-cms-app
Terminal window
pnpm add decap-cms-app
Terminal window
yarn add decap-cms-app

패키지를 페이지 <body>의 <script> 태그로 가져옵니다.

<body>
  <!-- 페이지를 빌드하고 Decap CMS를 구동하는 스크립트를 포함합니다. -->
  <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
</body>

구성

public/admin/에 정적 어드민 폴더를 생성합니다.
public/admin/에 config.yml 파일을 추가합니다.
- 디렉터리public
  - 디렉터리admin
    config.yml

콘텐츠 컬렉션에 대한 지원을 추가하려면 config.yml에서 각 스키마를 구성하세요. 다음 예시에서는 각 항목의 프런트매터 속성에 대한 label을 정의하여 blog 컬렉션을 구성합니다.

collections:
  - name: "blog" # 경로에 사용됩니다. 예: /admin/collections/blog
    label: "Blog" # UI에 사용됩니다.
    folder: "src/content/blog" # 문서가 저장된 폴더의 경로입니다.
    create: true # 사용자가 이 컬렉션에 새 문서를 만들 수 있도록 허용합니다.
    fields: # 각 문서의 필드는 일반적으로 프런트매터에 있습니다.
      - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Featured Image", name: "thumbnail", widget: "image" }
      - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
      - { label: "Body", name: "body", widget: "markdown" }

React 앱에 admin 경로를 추가하세요. 이 파일은 config.yml과 함께 public/admin/index.html일 수도 있고, Astro 경로를 사용하려는 경우 src/pages/admin.astro일 수도 있습니다.

디렉터리public
- 디렉터리admin
  - config.yml
  - index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
    <title>Content Manager</title>
  </head>
  <body>
    <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
  </body>
</html>

Decap 편집기를 통해 특정 폴더에 미디어 업로드를 활성화하려면 적절한 경로를 추가하세요.

media_folder: "src/assets/images" # Repo에서 파일이 저장될 위치
public_folder: "src/assets/images" # 업로드된 미디어의 src 속성

전체 지침과 옵션은 Decap CMS 구성 문서를 참조하세요.

사용하기

Decap CMS 편집기를 사용하려면 yoursite.com/admin/으로 이동하세요.

인증

Decap CMS와 Netlify Identity

Decap CMS는 원래 Netlify에서 개발되었으며 Netlify Identity에 대한 최고 수준의 지원을 제공합니다.

Netlify에 배포할 때 Netlify 대시보드를 통해 프로젝트의 Identity를 구성하고 프로젝트의 admin 경로에 Netlify Identity Widget을 포함하세요. 이메일을 통해 새로운 사용자를 초대하려는 경우 선택적으로 사이트 홈페이지에 Identity 위젯을 포함하세요.