GraphCMSとHugoを連携してGithub Pagesで公開する(1)〜GraphCMSの設定

概要

HugoとGraphCMSを組み合わせてコンテンツを生成していく。
そしてGithub Actionsで自動ビルドし、生成した静的ファイルをGithub Pages公開するのが最終目的である。

Hugo

スタティックサイトジェネレータのHugoを最近よく利用している。
Hugoの魅力は豊富なテーマや高速ビルドが挙げられる。
一方、特性上GatsbyやNuxt.js等ではよく利用されているヘッドレスCMSとの直接連携はできない。

GraphCMS

ヘッドレスCMSのGraphCMSはContentfulやCosmicJS等と比較して以下の優れた点がある。

• 無料区分枠で利用できるAPIコール数が多い。
• リッチコンテンツをhtmlでWYSIWYGエディタで書くことができる
• そしてなんといってもGraphQLが使える
• またレスポンスのjsonがシンプルな構造をしているので扱いやすい

逆にイケていないところは

• イケていると思ったWYSIWYGエディタがとても使いづらい(笑)
• RestfulAPIに慣れていてGraphQLってなんじゃらほいと思うと使いづらい(笑)
• Webhookのpayloadが自由にカスタマイズできないためGithubのAPIが利用できない。

などがある。上記Webhookの制限によりGraphCMS単体ではGithub Pagesで公開することはできない。
これらのデメリットが問題にならない場合は超絶オススメである。

利用条件については変更される場合があるので随時確認していただきたい。

GraphCMSによるコンテンツ作成

まずサインアップだがGithubやGoogleアカウントがあればすぐに可能である。
完了すればGraphCMSにログインする。
そして画面下部のほうにあるCreate a new projectに移動。
いくつかテンプレートがあるが今回はBlankを用いてスクラッチで作成する。

Nameはプロジェクト名、Descriptionは説明、リージョンは特に理由がない限りAsia(Tokyo)を選ぶ。
入力したらCreate projectをクリック。

次にプランの選択画面。フリープランで使う場合はFree foreverを選びSelect planを実行。

Invite your team membersというメンバを招待する画面になるので特に不要であればInvite laterをクリック。

そうするとプロジェクトの管理画面が表示される。そして左側のメニューを選んで操作をする。

スキーマ定義

まずはコンテンツのスキーマを定義してブログのコンテンツを設計する。
メニューのSchemaを選ぶ。
左側にModels、Assets、Enumerationsが表示されているが基本はModelsでモデル作成を行う。

Models横のAddをクリックするとCreate Modelというフォーム画面が表示されるのでDisplay nameを適当に入力。
ここではpostとした。

するとAPI IDとPlural API IDが自動的に入力される(ここではPostとPosts)。
この2つはGraphQLの呼び出し時に使い分ける。

• Post (API ID): 単一のコンテンツを呼び出す場合、つまりID指定でコンテンツの詳細を取得する場合
• Posts (Plural API ID): 複数のコンテンツを呼び出す場合、つまり一覧表示など複数のコンテンツを取得する場合

最初はこれを知らずにリストを取得する場合もPostを使ってしまいドハマりした。

すべて入力したらCreate Modelをクリック。
Add Fieldsというメニューが表示されるのでモデルのフィールドを追加していき設計する。
種類は以下の通り(縦長に表示されるので切り貼りした)

早速フィールド追加に取り掛かる。
まずはタイトル。Single line textをクリックするとダイアログが表示されるので以下のように入力する。

VALIDATIONSタブをクリックして属性を追加する。ここではMake field requiredにチェックをした。

その他のフィールドも追加し、以下のような構成になった。

• title: ブログのタイトル
• slug: スラグ。マルチバイト圏では使いづらいがURLがクリーンになるから採用
• date: 投稿日
  • DateTime型でやってもよいがそこまでそこまで細かい情報が不要だし、入力も面倒なので日付のみとした
• eyecatch: 投稿の看板画像
  • 今回の案件では投稿の一覧を画像で表示するため、必須項目としている
• body: ブログ本文
  • RitchTextを使うとhtml形式でで書けるが、使いやすいMarkdown採用
• tag: タグ

今回の案件では不要なので作っていないが、よくあるブログの構成としてはカテゴリーがある。
その場合、別途モデル定義してReferenceで参照(いわゆるリレーショナル)するのが一般的かもしれない。
しかし、単純に文字列情報のみであるならば左メニューのModelsで定義するよりはEnumerationsで作成してDropdownフィールドを使うほうが、クエリーがシンプルになる。
今回はタグもモデル定義せずに複数行入力できるSingle line textで実装している。
Hugo側が勝手にタグの処理してくれるのでこれで十分である。

ちなみにこれらをモデルで定義したほうがよいのは、文字情報以外に属性を追加したい場合、例えばi18n(国際化)などがある。

また下書きはGraphCMS側で行っているのでフラグ管理はしていない。
コンテンツの作成・更新・公開などのタイムスタンプ情報はシステムフィールドで持っているので投稿日として使っても良い。
投稿者も私しかいないのでフィールド定義はしないが、これもシステムフィールドで持っているので表示できる。
これらの情報はShow system fieldsトグルをオンにすると見ることができる。

コンテンツ作成

ここまでできたのでコンテンツの作成に取り掛かる。
ダッシュボード左メニューのContentをクリック。
Create Itemをクリック。

そして適当に入力したのが下の様子(画像はLorem Picsumより)。

ここで注意してほしいのは画像ファイル。eyecatchの箇所で表示されているようにアップロード時はDraft状態になる。
そのためコンテンツをPublished状態にするだけでなく画像も同様にPublishedにする。

一旦、コンテンツを保存する。Saveは下書き保存。Save and publishが公開。
取り敢えずSaveで保存して左メニューのAssetsをクリック。

チェックを入れてPublishボタンをクリック。

Published状態になれば先程のコンテンツに戻りPublishをクリックして公開する。

GraphQLで作成したコンテンツの取得

先程投稿したコンテンツをGraphQLで取得してみる。
まず左メニューAPI Playgroundをクリック。

ここで最初は途方にくれるが、まずExplorerタブをクリックし、先述したPlural API IDの名称、ここではpostsを選択する(postではない)。
そして適当にフィールドをクリックしてこんな感じのクエリーを作成する。

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

そして真ん中のプレイボタンをクリックして実行。

右側に結果がjson形式で返ってくるのがわかる。
これを素にHugoのコンテンツを作成するのだが次回はHugoの設定を解説する。