Netlify CMS란?

Git 리포지토리에서 콘텐츠와 데이터를 편집할 수 있는 React로 작성된 오픈 소스 단일 페이지 애플리케이션입니다. 정적 사이트 리포지토리 API(이 경우에는 Gatsby)와 상호 작용하여 변경할 때마다 커밋됩니다.

엄청난! 어떻게 시작해야 합니까?

먼저 새 터미널 창을 열고 새 사이트를 만듭니다. 나는 gatsby-theme-blog를 사용할 것이지만 자유롭게 사용하십시오.

껍데기:
gatsby new YOUR PROJECT NAME https://github.com/gatsbyjs/gatsby-starter-blog-theme

이제 cd 프로젝트 디렉토리에 Netlify CMS용 Gatsby 플러그인을 설치하고 netlify-cms-app
껍데기:npm install --save netlify-cms-app gatsby-plugin-netlify-cms

이제 즐겨 사용하는 텍스트 편집기에서 열어 보겠습니다.

이 튜토리얼에서와 동일한 스타터를 사용하는 경우 프로젝트는 다음과 같이 구성되어야 합니다.

YOUR PROJECT'S NAME
├── content
│   ├── assets  
│   │   └── avatar.png
│   └── posts
│       ├── hello-world.mdx
│       └── my-second-post.mdx
├── src
│   └── gatsby-theme-blog
│       ├── components
│       │   └── bio-content.js
│       └── gatsby-plugin-theme-ui
│           └── colors.js
├── gatsby-config.js
└── package.json

Gatsby 플러그인을 설치했으므로 이제 gatsby-config.js에서 정의해야 합니다. 해당 파일이 없으면 해당 파일을 만듭니다.

개츠비-config.js:

module.exports = {
    plugins: [`gatsby-plugin-netlify-cms`],
}

이제 프로젝트의 루트에 static라는 폴더를 만든 다음 해당 정적 폴더 안에 admin라는 또 다른 폴더를 만듭니다. 마지막으로 config.yml라는 파일을 만듭니다. 프로젝트는 다음과 같아야 합니다.

YOUR PROJECT'S NAME
├── content
│   ├── assets  
│   │   └── avatar.png
│   └── posts
│       ├── hello-world.mdx
│       └── my-second-post.mdx
├── src
│   └── gatsby-theme-blog
│       ├── components
│       │   └── bio-content.js
│       └── gatsby-plugin-theme-ui
│           └── colors.js
├── static <-------------- HERE
│   └──  admin
│       │   └──  config.yml
├── gatsby-config.js
└── package.json

아직 하지 않았다면 이 프로젝트를 Github에 올리고 최신 커밋을 푸시하세요.

이제 static/admin/config.yml 파일에 다음을 붙여넣으십시오.

backend:
  name: github
  repo: your Github username/ your repo name

media_folder: static/assets
public_folder: /assets

collections:
  - name: blog
    label: Blog
    folder: blog
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: datetime }
      - { name: title, label: Title }
      - { name: body, label: Body, widget: markdown }

프로덕션을 위한 프로젝트를 준비하고 Netlify로 이동하여 Git에서 새 사이트를 생성합니다.

사이트 구축이 완료되면 다음 지침을 따르십시오.
https://docs.netlify.com/visitor-access/oauth-provider-tokens/#setup-and-settings

Github에서 키와 시크릿을 받으십시오.

Netlify로 돌아가기

사이트 설정에서 access control가 보일 때까지 아래로 스크롤한 다음 OAuth install provider를 클릭하고 Github를 선택합니다. KEY 및 SECRET를 입력하십시오.

Netlify에서 사이트 열기

입력YOUR SITE URL/admin/
이제 다음 화면이 표시됩니다.

login with Github를 클릭하면 다음 화면이 표시됩니다.

하지만 기다려! 더 있습니다 -- 중요

Gatsby가 올바른 폴더에서 새로 만든 파일을 인식하도록 하려면 이 Gatsby 플러그인을 다운로드해야 합니다.
npm install --save gatsby-source-filesystemgatsby-config.js 파일에 다음을 추가합니다.

plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `markdown-pages`,
      path: `${__dirname}/content/posts/blog`, <-- your path
    },
  },
]

변경 사항을 커밋했는지 확인하십시오!

CMS로 돌아가기:

이제 새 블로그 게시물을 작성하고 publish 을 클릭하십시오. 이렇게 하면 자동으로 리포지토리에 커밋되고 새 블로그 게시물이 생성됩니다! Netlify에서 사이트 구축이 완료되면 새 블로그 게시물이 표시됩니다!



표지 이미지:
taken from here

예이! 🎉