fourside.github.io

Gatsby + Contentful on GitHub Pages

2020/09/02 08:00:00 +00:00

fourside.github.io を jekyll で構築していたけど、gatsby に鞍替えした。モチベーションは gatsby を触ってみたかったというくらい。

やったこと

なるべくシンプルにしたかったので、オフィシャルのスターターである gatsbyjs/gatsby-starter-blog を使った。とはいえSEOとかオフライン対応とかもろもろ入っているので便利。

自分でカスタマイズしたのはこれくらい。移行元となるべく機能差異ないようにした（そんな機能もりもりじゃないけども…）。基本的にプラグインを入れて設定をするだけ。

  • 自分のアイコンは Gravatar からひっぱってきた
  • Gist を展開するようにした
  • RSS feedを吐くようにした
  • 自動でデプロイされるようにした

自動デプロイについて。Contentful で publish したら走るようにした。 jekyllだと mdファイルをpushしたらGitHub Pagesが自動でビルドしてくれるが、Gatsby + Headless CMS だと、ビルド時に CMS から記事を取得しなくてはならない。具体的には Contentful Webhook と GitHub Actions の組み合わせ。Contentful で記事を操作したら GitHub API にリクエストが飛ぶようにする(Webhooks | Contentful)。GitHub Action で、そのリクエストが飛んできたらビルドとデプロイが走るようにする。

デプロイは、gh-pages を使うだけ。GitHub Pagesのブランチを gh-pages にしておいて、ビルド成果物だけを push する。 GitHub Actions では peaceiris/actions-gh-pages を使うようにした（直接 gh-pages を使うと fatal: empty ident name (for <runner@fv-az60.xxxxxxxxxxxxxxxxxxxxxxxxxx.cx.internal.cloudapp.net>) not allowed なんて怒られてしまう。これには workflow 内で自動生成される GITHUB_TOKEN が必要らしいのだけど、便利な action (peaceiris/actions-gh-pages)があるので使わせてもらった。）

GitHub Actions のドキュメントは以下を参照した。日本語版だとデッドリンクがあったりURLのフラグメントが設定されてなかったりする。余談だけどドキュメントの規模が大きくなったとき、一部だけ見て理解できるようにコンテキストを少なくして作成できたらいいだろうなと思うものの、もともとボリュームが大きいのでできるだけスリムに書きたいとも思うし、塩梅は難しいな。

misc

それぞれ触ってみての感想

Headless CMS

なんで Headless CMS にしたか。ローカルにファイル作ってもいいかとも思ったけど、知らないものは触っておくことにした。後付で理由も考えてみたけど…。

  • jekyllの場合
    • ディレクトリやファイル名で記事のURLが決まる。面倒くさい
    • リポジトリが手元にある必要がある
  • Headless CMSの場合
    • Webフォームで入力する。そこまで面倒じゃない
      • 画面開いてログインするのは面倒くさい
    • ブラウザがあればpublishできるのでポータビリティはある
    • Headless CMSのほうが記事を書くための心理的障壁が下がるかなと思う。

Contentful

  • UIの分かりやすさはある。探してるものがすぐ見つかる
    • 編集画面はちょっと狭くて好きではない
    • publishDate、デフォで現在時刻を入れてて欲しい
  • Firefox だとコンソールにエラーがでまくってて、そのせいか vim-vixen が動かず、そこが不満ではある…
  • 他にもさらっと候補を調べてみたけどそこまで時間かけなくていいかと思った程度

Gatsby

  • tutorial 分かりやすい。React を触ったことがあればすいすい進む
  • GraphiQL がついてくるので、クエリの結果を確かめるのが簡単
  • plugin をもりもり入れる
    • gatsby-config.js が太るし、ここに Graphql のクエリを書く場合もあり、リッチなものを作ろうと思ったらつらくなりそう
  • Markdown ファイルと Contentful を併存させようとして遭遇したエラーがちょっと分かりにかった
    • 結局 Markdown は Contentful に手作業で移行した…
fourside

Written by fourside