GraphicMS와 Hugo를 연합하여 Giithub Pages에서 공개(1)~GraphicMS의 설정

개요
Hugo와 GraphicMS를 결합하여 컨텐트를 생성합니다.
마지막 목적은 Giithub Actions를 통해 생성된 정적 파일을 자동으로 구축하고 Giithub Pages를 공개하는 것입니다.
Hugo
최근에는 정적 사이트 생성기Hugo를 자주 사용한다.
Hugo의 매력은 풍부한 주제와 고속 건설에 있다.
한편, 특성상Gatsby과Nuxt.js 등에서 자주 사용하는 헤드리스 CMS는 직접 협업할 수 없다.
GraphCMS
헤드리스 CMOSGraphCMS는 Contentful와CosmicJS 등에 비해 다음과 같은 장점이 있다.

무료 분류 상자에서 사용할 수 있는 API 호출 수가 비교적 많다.

풍부한 내용은''로 WYSIWYG 편집기에 쓸 수 있다

그리고 어쨌든 GraphiQL은 사용할 수 있다

또한 응답하는 json은 구조가 간단하고 처리하기 쉽다

반대로 인기가 없는 곳은

멋있는 WYSIWYG 편집기는 사용하기 어려워요(웃음)

RestfulAPI에 익숙해져서GraphiQL이 뭔지 생각하면 안 돼(웃음)

웹훅의payload를 자유롭게 맞춤형으로 제작할 수 없기 때문에 Giithub의 API를 사용할 수 없습니다.

잠깐만요.위의 웹훅 제한으로 그래픽CMS는 지아이허브페이지스에 따로 공개할 수 없다.
만약 이러한 결점이 문제가 되지 않는다면, 네가 하는 것을 추천한다.
사용 조건이 변경된 경우 언제든지 확인하십시오.
GraphicMS를 통해 컨텐츠 작성
먼저 서명하고 Giithub과 Google 계정이 있으면 바로 됩니다.
완료하면 로그인GraphCMS합니다.
그리고 화면 하단Create a new project으로 이동한다.
몇 개의 틀이 있는데 이번에Blank로 스크래치로 제작되었습니다.Name 프로젝트 명칭을 선택하고Description 특별한 이유가 없으면 구역Asia(Tokyo)을 설명한다.
를 입력한 후 Create project를 클릭합니다.

다음은 계획의 선택 화면이다.자유 프로그램 중 사용 시 선택Free foreverSelect plan.

초대 멤버Invite your team members의 화면이기 때문에 필요하지 않으면 클릭Invite later하세요.

이렇게 하면 프로젝트의 관리 화면을 표시할 수 있다.그런 다음 왼쪽 메뉴를 선택하여 작업을 수행합니다.

패턴 정의
먼저 내용의 모델을 정의하여 블로그의 내용을 설계한다.
메뉴의 Schema를 선택합니다.
왼쪽에 Models,Assets,Enumerations가 보이지만 기본적으로Models에서 모형 제작을 진행한다.
Models 옆에 있는 Add를 클릭하면 Create Model의 폼 화면이 표시되므로 적절하게 Display name를 입력합니다.
여기post입니다.

그런 다음 자동으로 API ID 및 Plural API ID를 입력합니다.
이 두 개는 GraphiQL을 호출할 때 분리해서 사용합니다.

Post: 단일 컨텐트가 호출된 경우, 즉 지정된 ID를 통해 컨텐트에 대한 세부 정보를 가져오는 경우

Posts: 여러 내용을 호출한 경우, 즉 일람표시 등 여러 내용을 얻은 경우

애초 이걸 모르고 리스트를 작성한 경우에도 사용했다Post (API ID). 푹 빠졌다.
모두 입력한 후 Posts (Plural API ID)를 클릭합니다.Post의 메뉴를 표시하기 때문에 모델의 필드를 추가하여 설계합니다.
종류는 다음과 같다(세로 표시이기 때문에 스크랩했다)

즉시 추가 장소에 착수하다.
우선 제목.Create Model를 클릭하면 대화상자가 표시되므로 다음과 같이 입력합니다.
Add Fields 옵션 카드를 클릭하여 속성을 추가합니다.여기Single line text에 대한 검사가 진행되었다.

다른 필드도 추가돼 다음과 같이 구성됐다.

VALIDATIONS: 블로그 제목

Make field required: 난로 부스러기.멀티바이트 범위 내에서는 사용하기 어렵지만 URL은 깨끗해지기 때문에 사용

title: 발언일

slug 금형으로 만들 수 있지만 그렇게 상세한 정보가 필요 없고 입력도 번거롭기 때문에 날짜만 쓴다

date: 투고한 판넬 이미지

이번 안건에서 발언 일람을 영상으로 표시하기 위해 필요항목

으로 한다

DateTime: 블로그 본문

eyecatch를 사용하면 > 형식으로 쓸 수 있지만 사용하기 편하다body

RitchText: 레이블

이번 사건은 필요 없어 하지 않았지만, 흔히 있는 블로그의 구성으로 분류돼 있다.
이런 상황에서 통상적으로 단독 모델 정의Markdown에서 참고(이른바 관계).
그러나 단순히 문자열 정보일 경우 왼쪽 메뉴tag에 정의된Reference에서 제작Models하고 사용Enumerations 필드에 비해 조회가 간단해진다.
이번 라벨도 모델 정의 없이 여러 줄 입력Dropdown을 실현했다.
Hugo 측에서 라벨을 마음대로 처리할 수 있기 때문에 이 정도면 충분합니다.
참고로 모델에서 이러한 속성을 정의하는 것이 가장 좋은 것은 문자 정보 이외에 속성을 추가하고자 하는 상황에서 예를 들어 i18n(국제화) 등이다.
또 초고는 그래피CMS 쪽에서 진행돼 태그 관리가 이뤄지지 않았다.
시스템 필드에 내용의 제작, 업데이트, 공개 등 타임 스탬프 정보가 있기 때문에 투고일로 사용할 수도 있다.
투고자도 나밖에 없기 때문에 필드 정의를 하지 않지만 시스템 필드에도 표시할 수 있다.
이 정보는 오픈Single line text독수리로 볼 수 있다.
컨텐트 작성
여기까지 해냈으니 콘텐츠 제작에 착수했다.
계기판 왼쪽 메뉴Show system fields를 클릭하세요.Content를 클릭합니다.

다음에 적절하게 입력한 것은 아래의 상황입니다. (이미지는 Lorem Picsum

여기서 주의해야 할 것은 이미지 파일입니다.Create Item에 표시된 대로 업로드할 때eyecatch 상태입니다.
따라서 내용을 Draft상태에 놓을 뿐만 아니라 이미지도 마찬가지Published였다.
내용을 잠시 보존하다.Published 초고 보존.Save 공개.
어쨌든 먼저 Save and publish로 저장한 다음에 왼쪽 메뉴의 Save를 눌러라.
Assets 단추를 선택합니다.
Publish 상태가 되면 이전 내용Published으로 돌아가 클릭해 공개한다.

GraphiQL에서 만든 내용 가져오기
GraphiQL로 방금 투고한 내용을 얻어 보세요.
먼저 왼쪽 메뉴Publish를 클릭합니다.

처음에는 곤혹스러울 수 있습니다. 우선 API Playground 옵션 카드를 클릭하고 상기Explorer의 이름을 선택하십시오. 여기는 Plural API ID가 아닙니다.
그리고 필드를 적당히 눌러서 이런 조회를 만듭니다.

query MyQuery {
  posts {
    id
    title
    slug
    date
    eyecatch {
      url
    }
    body
    tag
  }
}

그리고 가운데 재생 버튼을 눌러서 실행합니다.

결과는 json 형식으로 오른쪽으로 되돌아옵니다.
이를 토대로 휴고의 콘텐츠를 제작하고 다음에 휴고의 설정을 해설한다.