Netlify CMS + Gatsby でブログを作った話。

2018/11/30

  • Netlify
  • Gatsby

使い方

なんと素敵な事に、スターターキットが用意されています。
ということで、使いたいジェネレータをぽちー。

https://www.netlifycms.org/docs/start-with-a-template/

Netlify CMSのテンプレート選択

この3つから選ぶ感じ、ポケモンを彷彿とさせる。

スターターキット導入〜デプロイ

ちなみにGatsbyにした理由は、一度使ってみたかったから。
まずはGithubに連携(※Gitlabも可)。

Github と連携

リポジトリ名を記入し、「Save&Deploy」をクリック。

リポジトリの記入

すると以下のように、デフォルトで発行されたURL(私の場合は priceless-babbage-13b558 )にデプロイ中の状態になります。

デプロイ中の画面

ユーザー登録〜管理画面

そうこうしてる間にメールが4件ほど届いているはずなので、件名「You've been invited to join デフォルトのドメイン .netlify.com」に記載されているリンク「Accept the invite」をクリックし、ユーザーの登録を行います。

※デプロイ完了後でないと、リンクは有効になりません。

「Accept the invite」をクリック

以下の画面が出たら、お好きなパスワードを作成し「Sign up」!
これから管理画面ログイン時に必要となるので、今作成したパスワードは管理しておきましょう。

ユーザーを登録

アカウントの作成が終わると /admin/ にとび、管理画面に入れます。
すぐに「New Blog」で記事が作成できる状態に。

Netlify CMSの管理画面

お疲れ様でした!

スターターキット導入後にやったこと

  • 独自ドメインを設定
  • 管理画面に必要な項目を追加
  • レイアウトに必要なコンポーネントを作成
  • スタイルを自分好みに調整

とにかく形にする事が最優先だったので、スタイルの調整はデフォルトで入ってる Bulmaをベースにしつつ、 all.sass にぐちょぐちょ書いてあります。気持ち悪い。
GraphQL は雰囲気で使っているので、これからじっくり使い方を見ていきたい。

良かったところ

導入のハードルが低い

3STEPで作れるのは非常に魅力的だが、最低限あって欲しい機能が揃っている訳ではないので、ちゃんと実装するとなると結構時間がかかると感じた。

現在このブログは、PWA・AMP・SEO といったものとは皆無な状態だが、就活が落ち着いた頃に少しずつ改善してく所存。

つまずいた、気になったところ

ビルド後に一部の CSS が消える

調べたところ、デフォルトで入っているgatsby-plugin-purgecssが原因だった。
不要なCSSをビルド時に削除してくれるのだが、 1記事目で使われていないスタイルを削除するという謎の判断基準だったため、速攻アンインストールした。

管理画面のセッション切れるの早すぎ

正確な時間は測っていないが、今まで記事(Qiita, Kibela, はてぶなど)を書いててセッションが切れる事なかったので驚いた。
リアルタイムで表示が見られるので当然のこと管理画面で記事を書きたいが、エディターで下書きしないと怖くて無理。

所感

CSSフレームワークのメリットを引き出せず、終始フラストレーションが溜まりっぱなしでした。
しかし今後は求められる能力(のはず)なので、上手い付き合い方を模索していこうと思います。

ちなみに..最初に試したHexoが非常に良かったのですが、EJSとStylusが使われているのが個人的には微妙だったので、こちらに移行した経緯があります。

  • HNポチポチ
  • 仕事Web サイトやサービスを作ってます。
  • 好きな物・こと猫・ゲーム・アニメ・コーヒー
  • このサイトについて主に開発用のメモブログですが、特に限定せず様々な事を呟きます。
  • その他私ポチポチは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。
    良心に従い商品レビューをしますが、感想などは参考程度に見て頂ければと思います。

© 2020 ぽちぽち
Illust(C)masayo asano