TagsAboutContactsPortfolioNoteFM
It's my life
Recent posts 6 / 81
MQTTと電子ペーパーを使って年賀状を作るLambda – Container Image Supportを使ってAlpineからSeleniumが動くコンテナを作ってTerraformで当てる面倒なSSH Configと鍵管理はssh-config-jsonに任せようNim用のTwitterSDK作るついでに仕事中TwitterができるCLIを作ったGitHub JavaScript Action で GitHub ReleaseのUpdate Releaseを作ってみた。4連休を使ってGASとLINE BOTとFirebaseを使ってラーメン食べたいBOTを作ってみたSearchBox
Search your interesting by Algolia in this blog.今更にはなりますがNetlify CMSを使ってみたくなったのでGatsbyを使ってブログ作ってみました。
Netlifyとは静的ホスティングサービスですが、S3とは違いGithubのpush契機にBuildが走るCI機能などが充実していてこれでOK感ある。
Identityという認証も用意されているのでCMSサイトも作れちゃう。
個人的にはNetlity Buttonがデザインよくてかっこいいという印象がもともと強かったです。
NetlifyにGithubへのアクセスキーを持たせることで、CMS上でコンテンツを編集、GithubへのPushを一気にやってしまうことができます。 さらに記事のWorkflowもGithub Flow に乗っけることができるので、CMSで編集しながらにしてレポジトリはぐちゃぐちゃにならない。
これ結構いいアイディア!
便利便利といったものの、一からCMSを作るのはそれなりに骨が折れます。
と思っていたら最近はGatsbyというReactで作られたCMSがありました。すごい。
公式に載っていた図を見ると数多のDatasourceにGraphQLで接続し、Reactで静的なページを作るという感じ。
MarkdownをGithubにPostすれば完全に求めている感じのことができそう。すごいすごい。
https://github.com/netlify-templates/gatsby-starter-netlify-cms
git cloneしてきます。
とりあえずローカル上で動かしてみます。
$ npm install
$ npm start
するとコーヒー屋さん(?)のページが出てきます。
このままだとコーヒーショップを経営することになるのでゴリゴリReact書いていい感じにしてください。
CMSの要素は残す必要があるため、ComponentsのTemplateを編集するときはMarkdownで定義している要素に過不足なくするようご注意ください。
私が慣れていないだけですが、GraphQLでエラーが出るとエラーがめっちゃ追いにくい・・・。
無事サイトができたら、Netlifyに挙げていきます。
アカウントを作ってGithubと連携するとDeployするレポジトリを選択できます。
今回はblogというレポジトリを作りましたのでそちらを連携させます。
画面に沿って進んでいけば、特に追加の設定なくサイトがDeployできると思います。
Deployできるとデプロイ先のURLが発行されます。
独自ドメインを持っていましたらここで設定してしまえばいいと思います。
参考: Custom Domains
無事にDeployできましたら、CMSの管理画面を設定します。
General => Site Members から、アカウントを作成し登録します。
できたら、作ったサイトの管理画面 /admin
にアクセスします。
設定がうまくいっていればログイン画面からコンテンツの編集画面が開けます。
CMSから記事を登録したい(GithubにCMSからPushしたい)時は追加でGitGatewayを設定します。
GithubのPersonalAccessTokenから作成したAPIキーを設定してあげればよいです。
結構爆速。
他の人のGatsbyを見るとTravisとか使ってCI回している・・。真似しよう・・。
Netlify CMSはすごいぞ!