이 튜토리얼에서는 공식 gatsby-starter-blog에 기반한 Gatsby 스타터인 gatsby-personal-starter-blog를 사용합니다. 

차이점은 gatsby-personal-starter-blog가 하위 디렉토리 / blog에서 블로그를 실행하도록 구성되어 있으며 컨텐츠 편집을 위해 Netlify CMS가 사전 설치되어 제공된다는 것입니다. 또한 코드 블록에 대한 VS 코드 강조 표시를 추가합니다.

https://www.gatsbyjs.com/tutorial/blog-netlify-cms-tutorial/

https://youtu.be/JeTqxCJC56Q

전제 조건 

• A GitHub account
• 설치된 Gatsby CLI

Netlify CMS 관리 Gatsby 사이트를 5 단계로 설정하십시오. 

Step 1 

터미널을 열고 Gatsby CLI에서 다음 명령을 실행하여 gatsby-personal-starter-blog를 사용하여 새 Gatsby 사이트를 만듭니다.

gatsby new [your-project-name] https://github.com/thomaswangio/gatsby-personal-starter-blog

Step 2 

Gatsby 사이트가 모든 패키지 및 종속성 설치를 완료하면 이제 디렉토리로 이동하여 사이트를 로컬에서 실행할 수 있습니다.

cd [your-project-name]

gatsby develop

이제 http://localhost:8000으로 이동하여 새 사이트를 볼 수 있지만 더욱 멋진 점은 Netlify CMS가 사전 설치되어 있으며 http://localhost:8000/admin에서 액세스 할 수 있다는 것입니다.

CMS 또는 콘텐츠 관리 시스템은 Markdown을 사용하여 수동으로 게시물을 추가하는 대신 사이트의 대시 보드에서 블로그 게시물과 같은 콘텐츠를 추가 할 수 있기 때문에 유용합니다. 그러나 로컬뿐만 아니라 배포 된 웹 사이트에서 CMS에 액세스 할 수 있기를 원할 것입니다. 이를 위해서는 GitHub를 통해 Netlify에 배포하고 지속적 배포를 설정하고 몇 가지 구성을 수행해야 합니다. 이 문제는 5 단계에서 살펴 보겠습니다.

Step 3 

코드 편집기에서 프로젝트를 열고 static/admin/config.yml을 엽니다. your-username/your-repo-name을 GitHub 사용자 이름 및 프로젝트 이름으로 바꿉니다. 이 단계는 Netlify CMS 인터페이스를 관리하고 배포하는 데 중요합니다.

backend:

-  name: test-repo

+  name: github

+  repo: your-username/your-repo-name

사이트 사용자 지정 

gatsby-config.js로 이동하면 siteMetadata를 편집하고 Google Analytics 추적 ID 및 앱 아이콘 / 파비콘을 추가 할 수 있습니다. 개발 서버를 종료하고 gatsby build && gatsby serve를 실행하여 배포 된 빌드에 대한 편집을 테스트합니다.

README.md 및 package.json 파일을 편집하여 자체 프로젝트 세부 정보를 포함 할 수도 있습니다.

Step 4 

github.com을 열고 프로젝트와 동일한 이름으로 새 저장소를 만듭니다. 다음 터미널 명령을 사용하여 새 Gatsby 사이트의 코드를 GitHub에 푸시합니다.

git init

git add .

git commit -m "initial commit"

git remote add origin https://github.com/[your-username]/[your-repo-name].git

git push -u origin master

그런 다음 app.netlify.com을 열고 "Git의 새 사이트"를 추가합니다. 새로 생성 된 저장소를 선택하고 기본 배포 설정으로 "사이트 배포"를 클릭합니다.

참고 : 올바른 저장소가 나열되지 않으면 GitHub에서 Netlify 앱을 설치하거나 재구성해야 할 수 있습니다.

Step 5 

Netlify CMS가 GitHub 저장소에 액세스 할 수 있는지 확인하려면 GitHub에서 OAuth 애플리케이션을 설정해야 합니다. 이에 대한 지침은 Netlify의 인증 제공 업체 사용입니다.

"홈페이지 URL"의 경우 – Netlify 하위 도메인, [사이트 이름] .netlify.com을 사용하거나 사용자 지정 도메인을 사용할 수 있습니다. 하위 도메인을 사용자 지정하려면 Netlify 앱에서 프로젝트의 "도메인 관리"에서 "사이트 이름 편집"필드를 찾으십시오. 대신 Netlify 사이트를 사용자 지정 도메인에 연결하려면 사용자 지정 도메인에 대한 Netlify의 지침을 참조하십시오.

인증 공급자를 구성하고 나면 배포 된 사이트에서 Netlify CMS를 사용하여 새 게시물을 추가 할 수 있습니다.

GitHub OAuth 앱에 나열된 새 앱의 자격 증명을 복사하고 이를 사용하여 Netlify에 새 인증 공급자를 설치합니다.

Netlify CMS, GitHub 및 Netlify 워크 플로의 이점 

축하합니다! 

이제 Netlify CMS가 프로젝트에 성공적으로 구성되었으므로 새 게시물을 추가 할 때마다 Netlify CMS가 Git 기반이므로 콘텐츠가 저장소에 저장되고 GitHub에서 버전이 지정됩니다. 또한 Netlify의 지속적인 배포 덕분에 게시물을 추가하거나 편집 할 때마다 새 버전이 배포됩니다.

Netlify CMS 설명서에서 Netlify CMS 및 이를 추가로 구성하는 방법에 대해 자세히 알아볼 수 있습니다.