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

Table of Contents

なぜこんなことを・・・。

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

登場人物

Netlify

https://www.netlify.com/

Netlifyとは静的ホスティングサービスですが、S3とは違いGithubのpush契機にBuildが走るCI機能などが充実していてこれでOK感ある。

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のアカウント用意する

無事サイトができたら、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はすごいぞ！