Github + Gatsby + Netlify CMS で今更ブログを作る
tubone
Japan Boyaki Ojisan
Recent posts 6 / 23
ハロウィーンはえちえちでチンパンジーなイベントじゃない。GitHubと向き合うイベントだGoogle Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る究極の謝罪はSlackのスタンプを活用しよう！ ～明日から使えるSlackスタンプスニペット集～台風の時の我が家のセンサー(netatmo)の値をZabbixで見る今日のラーメンAnsible + Serverspecを使ってMacの環境構築を自動でする (Azure DevOps Build Pipeline編)Github + Gatsby + Netlify CMS で今更ブログを作る
なぜこんなことを・・・。
今更にはなりますがNetlify CMSを使ってみたくなったのでGatsbyを使ってブログ作ってみました。
登場人物
Netlify
Netlifyとは静的ホスティングサービスですが、S3とは違いGithubのpush契機にBuildが走るCI機能などが充実していてこれでOK感ある。
Identityという認証も用意されているのでCMSサイトも作れちゃう。
個人的にはNetlity Buttonがデザインよくてかっこいいという印象がもともと強かったです。
実はすごかった Netlify CMS
NetlifyにGithubへのアクセスキーを持たせることで、CMS上でコンテンツを編集、GithubへのPushを一気にやってしまうことができます。 さらに記事のWorkflowもGithub Flow に乗っけることができるので、CMSで編集しながらにしてレポジトリはぐちゃぐちゃにならない。
これ結構いいアイディア！
Gatsby
便利便利といったものの、一からCMSを作るのはそれなりに骨が折れます。
と思っていたら最近はGatsbyというReactで作られたCMSがありました。すごい。
公式に載っていた図を見ると数多のDatasourceにGraphQLで接続し、Reactで静的なページを作るという感じ。
MarkdownをGithubにPostすれば完全に求めている感じのことができそう。すごいすごい。
さっそく作ってみる
Netlify対応版のGatsby-starterをダウンロードする
https://github.com/netlify-templates/gatsby-starter-netlify-cms
git cloneしてきます。
とりあえずローカル上で動かしてみます。
$ npm install
$ npm startするとコーヒー屋さん（？）のページが出てきます。
このままだとコーヒーショップを経営することになるのでゴリゴリReact書いていい感じにしてください。
CMSの要素は残す必要があるため、ComponentsのTemplateを編集するときはMarkdownで定義している要素に過不足なくするようご注意ください。
私が慣れていないだけですが、GraphQLでエラーが出るとエラーがめっちゃ追いにくい・・・。
Netlifyのアカウント用意する
無事サイトができたら、Netlifyに挙げていきます。
アカウントを作ってGithubと連携するとDeployするレポジトリを選択できます。
今回はblogというレポジトリを作りましたのでそちらを連携させます。
画面に沿って進んでいけば、特に追加の設定なくサイトがDeployできると思います。
Deployできるとデプロイ先のURLが発行されます。
独自ドメインを持っていましたらここで設定してしまえばいいと思います。
参考: Custom Domains
CMSの管理画面を設定する
無事にDeployできましたら、CMSの管理画面を設定します。
General => Site Members から、アカウントを作成し登録します。
できたら、作ったサイトの管理画面 /admin にアクセスします。
設定がうまくいっていればログイン画面からコンテンツの編集画面が開けます。
CMSから記事を登録したい(GithubにCMSからPushしたい)時は追加でGitGatewayを設定します。
GithubのPersonalAccessTokenから作成したAPIキーを設定してあげればよいです。
完成
結構爆速。
他の人のGatsbyを見るとTravisとか使ってCI回している・・。真似しよう・・。
結論
Netlify CMSはすごいぞ！
