Gatsby
October 9th, 2022
ここにお越しいただいた皆様にまずはお詫びいたします。本サイト、実は人様にお見せする目的で始めたものではありません。デザインが垢抜けてなかったり、ナビゲーションが中途半端で申し訳ありません。本当の目的は Gatsby というフレームワークを勉強することです。じゃあなぜ公開してるのと言われそうですが、Gatsby でコンテンツ作成からビルドまで素早くできるというのが売りなので CDN にデプロイしてリリースまでの流れを体験したいからです。なのでお見苦しい点が多々ありますがお許しください。今後 Gatsby の知識が増えるにつれて改善される、、、かもしれません。
Gatsby とは？
Gatsby はブログのような静的なウェブサイトを簡単に作成することを目的としたスタティックサイトジェネレーターと呼ばれる Javascript ベースのフレームワークです。公式サイトはこちらです
自分のブログを Blogger でしばらく作成していましたが、既存のテンプレートからカスタマイズするのが大変すぎて断念しました。もっと自由に CSS をいじったり、ある程度機能も自分で設計できて、なおかつラーニングカーブが急ではないものがないかと探した時に Gatsby に出会いました。それほど普及しているという印象はありませんが、UI は React で作ることができ、CMS との連携やデプロイも簡単とうたわれていたのに惹かれて試してみることにしました。
Gatsby を使うメリット
まだ始めたばかりなのであまり実感がわきませんが、公式サイトによると、スピード、スケーラビリティ、セキュリティが Gatsby の特徴だそうです。自分にとっては今のところ UI を React で作れることが最大の利点です。ブログのコンテンツは MDX で記述し、glaphQL でそのデータを引っ張ってきます。
サイト構築に必要な機能はプラグインという形で追加していくことができます。公式サイトのプラグインページ でどのようなプラグインがあるか見ることができます。本サイトでは styled-components を CSS のライブラリとして使っているので、そのためのプラグインを追加しました。
Gatsby を導入するには
Gatsby のことを知りたいという方はとりあえずチュートリアルをやってみることをおすすめします。インストールからブログ風サイト作成までていねいに解説されていて、仕組みを理解するのに非常に役立ちました。日本語訳があるのかは不明です。
チュートリアルにあるようにゼロの状態から作ることもできますが、たたき台となるスタータープロジェクトがいくつか用意されており、気に入ったものがあれば github に行ってダウンロードし、そこから始めるのが簡単です。本サイトは netlify のスターターを使用しました。
Gatsby を使ってみたここまでの感想
Blogger からの引っ越し先として Gatsby を試していますが、WordPress や Blogger のようなサイトエディターというよりは開発ツールだと思います。Javascript, React の知識は必須です。まだまだ勉強中であり、知らないこともたくさんありますが、もうしばらく使ってみようと思っています。