LoginSignup
1

More than 1 year has passed since last update.

posted at

updated at

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

概要

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

Hugo

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

GraphCMS

ヘッドレスCMSのGraphCMSContentfulCosmicJS等と比較して以下の優れた点がある。

  • 無料区分枠で利用できる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をクリック。

FireShot Capture 003 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 004 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 005 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 007 - GraphCMS - app.graphcms.com.png

スキーマ定義

まずはコンテンツのスキーマを定義してブログのコンテンツを設計する。

メニューのSchemaを選ぶ。
左側にModelsAssetsEnumerationsが表示されているが基本はModelsでモデル作成を行う。

FireShot Capture 008 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 009 - GraphCMS - app.graphcms.com.png

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

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

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

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

FireShot Capture 011 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 019 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 020 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 046 - GraphCMS - app.graphcms.com.png

  • 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をクリック。

FireShot Capture 040 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 043 - GraphCMS - app.graphcms.com.png

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

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

FireShot Capture 044 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 045 - GraphCMS - app.graphcms.com.png

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

FireShot Capture 047 - GraphCMS - app.graphcms.com.png

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

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

FireShot Capture 048 - GraphCMS - app.graphcms.com.png

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

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

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

FireShot Capture 050 - GraphCMS - app.graphcms.com.png

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1