GatsbyJS+Netlify+Netlify CMSでブログ構築

まずはNetlifyでホスティングするまで。参考にさせて頂いたサイトはこちら。
meuniere.hatenablog.jp

以下引っかかったところとその解決方法。

PowerShellでスクリプトの実行が無効になっているためうんたらかんたらというエラーが出たのでWindowsでPowerShellスクリプトの実行セキュリティポリシーを変更するで解決
gatsby developしたらエラー出た。指示に従ったらめっちゃエラー出た。npm rebuildで解決

あとは特に詰まることなくデプロイまで。

次はNetlify CMSの導入。公式のドキュメントを参考にする。
www.netlifycms.org

上記ドキュメントに書いてあることにプラスして、GraphCMS から Netlify+Gatsby+Netlify CMS に移行して爆速になりましたも参考にしてGitHub - netlify/netlify-identity-widget: A zero config, framework free Netlify Identity widgetから以下のコードをstatic/admin/index.htmlに追加してログイン画面完成。

<!DOCTYPE html>
<html>
<head>
  <title>A static website</title>

  <!-- include the widget -->
  <script type="text/javascript" src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
</head>
<body>
  <!-- Add a menu:
   Log in / Sign up - when the user is not logged in
   Username / Log out - when the user is logged in
  -->
  <div data-netlify-identity-menu></div>

  <!-- Add a simpler button:
    Simple button that will open the modal.
  -->
  <div data-netlify-identity-button>Login with Netlify Identity</div>
</body>
</html>

その他やったこと

GAの設定
Workflowを導入して下書き状態を保存できるように

これからやりたいこと

タグを使えるようにする
スタイルの修正
なぜかもともとあった記事が消せないので消せるように

GatsbyJSはReact製とのことで、カスタマイズできるようになるまでの学習コストが高そう。まあボチボチやりますかね…

ちゃふちゃふログ

日記や雑記、勉強したことの備忘録

GatsbyJS+Netlify+Netlify CMSでブログ構築