ちゃふちゃふログ

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

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

monologue.chuff-chuff.dev
完成したブログがこちら。


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

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

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


次は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>


その他やったこと

これからやりたいこと

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


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