Netlify, Zapier 및 Gatsby를 사용하여 CMS 컨텐츠 즉시 배포

This article was originally posted as a Flotiq Deep Dive.

개요

본고에서 우리는 매우 강하지만 전혀 먼지를 털지 않는 힘을 설치할 것이다. (게다가 무료이다!)게이츠비 사이트의 배치 파이프라인.우리는 Netlify를 배포 목표로 사용할 것이기 때문에 서버가 필요하지 않습니다.

왜?

게이츠비는 정적 사이트 생성기이다.이것은 당신이 사이트를 재건하고 재배치하지 않으면 내용이 갱신되지 않는다는 것을 의미한다.만약 당신이 자주 콘텐츠 업데이트를 하거나, 이런 업데이트를 하는 사람들이 당신의 사이트를 어떻게 재건하는지 모른다면, 이것은 곧 좀 고통스러워질 것이다.
GitHub 연결을 쉽게 설정하고 코드가 변경될 때 사이트를 업데이트할 수 있지만 내용 변경에는 적용되지 않습니다.

Go explain to a copywriter that they need to gatsby build and npm run deploy every time they update the website's content!

당신이 원하는 것은 자동화된 과정입니다. 당신의 내용이 업데이트되면 사이트를 발표할 것입니다.
본고는 단계별 안내서와 어떻게 하는지를 소개한다.

Gatsby Starter 및 Flotiq

를 사용하여 데이터 소스 설정

Netlify에서 페이지 배포 설정

Zapier에서 자동화된 워크플로우 설정

마지막으로 Flotiq에서 페이지 내용을 업데이트할 때마다 Zapier는 Netlify의 배치 과정을 터치하여 당신의 사이트가 최신 사이트인지 확인합니다!
우리 깊이 잠수하자.

선결 조건

Netlify 계정(무료)Sign up for Netlify

GitHub/Gitlab/Bitbucket 계정(무료)Sign up for GitHub

Zapier 계정(무료)Sign up for Zapier

Flotiq계좌(무료)Register a Flotiq account here.

개츠비 선발을 찾아라!

우리Github repository로 가서 개츠비 선발 프로젝트를 선택하세요.유행하는 것Gatsby Recipes Starter을 사용합시다.

gatsby new gatsby-starter-recipes https://github.com/flotiq/gatsby-starter-recipes.git
cd gatsby-starter-recipes

컨텐츠 유형을 직접 구성하거나 미리 정의된 컨텐츠를 사용할 수 있습니다.

node ./example/importExample.js

이 편리한 명령은 Flotiq 계정에 그림 4개와 레시피 2개를 추가합니다.
모든 개츠비 초보자들은 자술한 파일의 밑에 "Netlify에 배치"단추가 있습니다.

클릭:

Netlify 사이트 배포 구성

이제 다음과 같은 3단계 구성 프로세스를 볼 수 있습니다.

GitHub 계정에 연결

배치에 필요한 매개 변수 설정

배포 사이트

GitHub 계정을 연결하고 다음 단계를 시작합니다.
다음 뷰에서 매개변수 3개를 입력하라는 메시지가 표시됩니다.

저장소 이름 - Netlify가 여기에 새 저장소를 만듭니다.

Flotiq API url-입력: https://api.flotiq.com

Flotiq 읽기 전용 API 키입니다.

We advise that you always create a scoped API key. Its disposable nature makes it a safer choice. More about Flotiq API Keys here

모든 필드를 작성한 후 Save & Deploy 단추를 눌러 사이트 구축을 기다립니다.
이게 다야!Netlify 대시보드로 리디렉션됩니다.로그 생성을 확인하려면 여기를 클릭하십시오.

Zapier를 사용하여 Netlify 배포 관리

기본적으로 Netlify는 저장소의 변경 사항을 관찰하기 때문에 모든 전송은 Netlify의 구축을 촉발합니다.이것은 통상적으로 당신이 원하는 것이다. 왜냐하면 당신은 새로운 기능을 당신의 사이트에 밀어 넣을 수 있기 때문에, 당신은 그것들이 자동으로 인터넷에 나타나기를 바란다.
그러나 웹 사이트는 저장소의 코드만 있는 것이 아닙니다.너도 너의 내용도 최신이었으면 좋겠어!새로운 콘텐츠를 만들 때마다 Zapier 사이트를 업데이트하는 방법을 보여 드리겠습니다.

Zapier 로그인

계정 대시보드에서 왼쪽 사이드바에 마우스를 대고 Make a Zap 를 클릭합니다.

트리거 응용 프로그램으로 선택Flotiq, 이벤트에 선택New Content Object.

이제 Flotiq 계정을 선택하고 Continue 을 클릭합니다.

목록에서 컨텐트 유형 정의를 선택합니다.

계속을 클릭합니다.테스트 단계를 건너뛰고 다음 작업을 계속할 수 있습니다.

동작 응용 프로그램으로 Netlify 을 선택하고 이벤트로 Start deploy 를 선택합니다.

Netlify 계정에 로그인하여 계속하십시오.

목록에서 사이트를 선택합니다.또는 생성 캐시를 지울 수 있지만 생성 시간이 증가합니다.

마지막 단계에서 이 작업이 정상적으로 작동하는지 테스트할 수 있습니다.그것은 당신의 사이트를 재건할 것입니다.

그렇습니다.

준비됐어!를 클릭합니다.현재, 당신은 Flotiq editor 에서 새로운 항목을 만들 수 있으며, 당신의 식단이 즉시 당신의 사이트에 나타날 것을 볼 수 있습니다.

유용한 링크

Zapier 및 Flotiq와의 강력한 통합 구축에 대한 자세한 내용은 다음과 같습니다.

More about Zapier Integrations in Flotiq

아니면 우리와 플로티크 조합의 개츠비 선발 라인업을 시험해 보자.