Netlify CMS + Gatsby でブログを作った話。
2018/11/30
- Netlify
- Gatsby
使い方
なんと素敵な事に、スターターキットが用意されています。
ということで、使いたいジェネレータをぽちー。
https://www.netlifycms.org/docs/start-with-a-template/
この3つから選ぶ感じ、ポケモンを彷彿とさせる。
スターターキット導入〜デプロイ
ちなみにGatsbyにした理由は、一度使ってみたかったから。
まずはGithubに連携(※Gitlabも可)。
リポジトリ名を記入し、「Save&Deploy」をクリック。
すると以下のように、デフォルトで発行されたURL(私の場合は priceless-babbage-13b558 )にデプロイ中の状態になります。
ユーザー登録〜管理画面
そうこうしてる間にメールが4件ほど届いているはずなので、件名「You've been invited to join デフォルトのドメイン .netlify.com」に記載されているリンク「Accept the invite」をクリックし、ユーザーの登録を行います。
※デプロイ完了後でないと、リンクは有効になりません。
以下の画面が出たら、お好きなパスワードを作成し「Sign up」!
これから管理画面ログイン時に必要となるので、今作成したパスワードは管理しておきましょう。
アカウントの作成が終わると /admin/ にとび、管理画面に入れます。
すぐに「New Blog」で記事が作成できる状態に。
お疲れ様でした!
スターターキット導入後にやったこと
- 独自ドメインを設定
- 管理画面に必要な項目を追加
- レイアウトに必要なコンポーネントを作成
- スタイルを自分好みに調整
とにかく形にする事が最優先だったので、スタイルの調整はデフォルトで入ってる Bulmaをベースにしつつ、 all.sass にぐちょぐちょ書いてあります。気持ち悪い。
GraphQL は雰囲気で使っているので、これからじっくり使い方を見ていきたい。
良かったところ
導入のハードルが低い
3STEPで作れるのは非常に魅力的だが、最低限あって欲しい機能が揃っている訳ではないので、ちゃんと実装するとなると結構時間がかかると感じた。
現在このブログは、PWA・AMP・SEO といったものとは皆無な状態だが、就活が落ち着いた頃に少しずつ改善してく所存。
つまずいた、気になったところ
ビルド後に一部の CSS が消える
調べたところ、デフォルトで入っているgatsby-plugin-purgecssが原因だった。
不要なCSSをビルド時に削除してくれるのだが、 1記事目で使われていないスタイルを削除するという謎の判断基準だったため、速攻アンインストールした。
管理画面のセッション切れるの早すぎ
正確な時間は測っていないが、今まで記事(Qiita, Kibela, はてぶなど)を書いててセッションが切れる事なかったので驚いた。
リアルタイムで表示が見られるので当然のこと管理画面で記事を書きたいが、エディターで下書きしないと怖くて無理。
所感
CSSフレームワークのメリットを引き出せず、終始フラストレーションが溜まりっぱなしでした。
しかし今後は求められる能力(のはず)なので、上手い付き合い方を模索していこうと思います。
ちなみに..最初に試したHexoが非常に良かったのですが、EJSとStylusが使われているのが個人的には微妙だったので、こちらに移行した経緯があります。