Github + Gatsby + Netlify CMS で今更ブログを作る

#Table of Contents

• なぜこんなことを・・・
• 登場人物
  • Netlify
  • 実はすごかった Netlify CMS
  • Gatsby
• さっそく作ってみる
  • Netlify対応版のGatsby-starterをダウンロードする
  • Netlifyのアカウント用意する
  • CMSの管理画面を設定する
• 完成
• 結論

#なぜこんなことを・・・

いまさらにはなりますがNetlify CMSを使ってみたくなったのでGatsbyを使ってブログ作ってみました。

#登場人物

#Netlify

https://www.netlify.com/

Netlifyとは静的ホスティングサービスですが、S3とは違いGitHubのpush契機にBuildが走るCI機能などが充実していてこれでOK感ある。なお、Netlifyのビルド時間をGitHub Actionsで0時間にする方法も後の記事で紹介しています。

Identityという認証も用意されているのでCMSサイトも作れちゃう。

個人的にはNetlity Buttonがデザインよくてかっこいいという印象がもともと強かったです。

#実はすごかった Netlify CMS

https://www.netlifycms.org/

NetlifyにGithubへのアクセスキーを持たせることで、CMS上でコンテンツを編集、GithubへのPushを一気にやってしまうことができます。 さらに記事のWorkflowもGitHub Flow に乗っけることができるので、CMSで編集しながらにしてレポジトリはぐちゃぐちゃにならない。

これ結構いいアイディア！

#Gatsby

https://www.gatsbyjs.org/

便利便利といったものの、一から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 Formを使った簡易Contact Formも作ってみました。

#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回している・・。真似しよう・・。CIといえばGitHub Actionを使って簡単CIを作るのも便利です。

#結論

Netlify CMSはすごいぞ！

tubone24にラーメンを食べさせよう！

ぽちっとな↓