【GatsbyJS製ブログ】インストールからブログ立ち上げとGatsbyの構造

2021年8月26日2023年7月27日

GatsbyJS、ご存知でしょうか？（以下Gatsby）「静的にサイトを作る（後述）ので爆速・セキュリティばっちり」「プラグインとかテーマが豊富」「Reactで書いてある」「GraphQLを使っている」などなど、Gatsbyは魅力的で勉強になりそうなワードがたくさん詰まっています。ブログをもう一つ立ち上げようとしていたので、それをGatsbyで作っていこう、という企画です。

はっきり言って、Gatsbyは楽しいです。ただ、最初はとっつきにくい印象がありますし、しばらくイジらないとどういう仕組みで動いているかも把握しにくいです。

手探りでGatsbyブログを作ってきましたが「あらかじめ考えていた方がよかったな」とか、「ここは知っておきたかった…」という所を解説していきたいと思います！

クマ

プログラミング初心者でもなるべく分かりやすいように、Gatsbyの構造や操作感を伝えられれば、と思います。

Gatsbyで実際に運用しているブログはこちらです。ぜひ、のぞいてみてください！

あわせて読みたい

大分ツーリングおんせん県大分のツーリング情報を発信していきます！穴場ツーリングスポットやツーリンググルメなど、地元大分在住だからこそわかる魅力をお伝えします。その他バイクに関…

この記事はこんな人にオススメ

Gatsbyっていうフレームワークがあるらしいけど、なんのこと？
Gatsbyって難しいの？
Gatsbyをちょっと触ってみたけど、よくわかんない…どんな構造で、どうやって動いてるの？

Gatsbyのメリット、デメリット

公式ページはこちら。

メリット

静的なサイト作成により爆速表示＆セキュリティが堅い。
SSR（Server-Side-Rendering）によりクローラーがちゃんと評価できるような作りになっている。よってSEO対策もばっちり。
テーマ、プラグインが揃っている。
静的サイトなので、ホスティングサービスであるNetlifyなどを使えばサーバーを借りなくても公開できる。なので、サーバー代を浮かせられる。

デメリット

静的サイトなので事前にビルドする必要があるが、大規模で複雑な機能をもつサイトはビルド時間が長くなる。
動的な機能を直接持たせることができないので、コメント機能などは外部サービスを使って実装することになる。
React、GraphQLなどの学習コストが高く、とっつきにくい。

現在「ブログを作る」と言えばWordPressがほとんどだと思います。WordPressはPHPという言語がベースになって作られています。PHPは「データベースに蓄えられたデータ」や「サイトを見ている人が入力したデータ」などを元に、ブログを訪れた人が「見せて」とリクエストする度にページを作って提供します。

クマ

リクエストがある度に作ると、柔軟性はあるけど提供に時間がかかりますよね。注文が入ってから皮を伸ばして包み始める餃子みたいなもんです。

一方、先ほどから登場しているGatsbyの特徴「静的なサイト」とは、あらかじめ準備したデータでページを作っておいて、リクエストがあればすぐにそのページを提供できる状態にしておく、というイメージです。ユーザーからの入力をページに反映したりはできませんが、あらかじめ作っているので提供が速いというのと変更の余地がないのでセキュリティに強い、という特徴があります。

クマ

柔軟性が低い代わりに、速くて安全なサイトの情報提供ができる、ということですね。仕込みがあらかじめ済んでいる餃子のようなもんです。注文が入ったら焼くだけ。

LINEスタンプもぜひご覧ください！

Gatsbyの正体と勉強する利点

Gatsbyの正体を知ると、Gatsbyを学ぶ利点が見えてきます。

GatsbyはReactベースです。ReactはNode.jsで動いています。

いきなりわかりにくくなりました…少し丁寧に説明します。

つまり、Gatsbyは、Nodeというサーバー上で実行されるJavaScript（本来JavaScriptはクライアント、つまりサイトを見ている人のブラウザ上で実行される）で作られたReactというライブラリ（ファイルの集まり）を元に作られている、ということです。

「？」と思っていただいても「ふーん…」と思っていただいても結構ですが、要はGatsbyの書き方でわからないことがあれば元となっている「React」を調べるとわかりやすい、ということです。Gatsby独特の書き方もありますが、基本はReactです。

そして、Reactは柔軟性、汎用性、パフォーマンスに優れており、将来性が高いと言われています。スマホアプリ開発ができるReactNativeもReactがベースになっています。つまり、Reactは学んでおいて損はない、と言えるでしょう。

また、Gatsbyを構成している重要な要素であるGraphQL。これもモダンな技術ですが、一度使うと普通のデータベースに戻れないくらい利便性が高いものです。

クマ

GraphQLはそのうちしっかりと説明したいと思います。

Gatsbyのインストール

1．Node.jsをインストール

Node環境が必要なので、なければbrewを使ってインストール。インストールするとnpmというNodeのパッケージ管理コマンドが使えるようになります。後述しますが、私はnodeが入っているか確認せずにインストールして、後で整理する羽目になりました。

$ brew install node

2．yarnをインストール

yarnとnpmは、Nodeのパッケージ管理コマンドです。しばらくnpmでGatsbyを運用（プラグインのインストールとか）していたのですが、依存関係の管理が面倒になって途中からyarnに乗り換えました。ということで、yarnを使ったNode管理の方がおすすめなので、yarnをインストールしておきます。

$ brew install yarn

2．Gatsbyをインストール

$ yarn global add gatsby-cli

以上。globalはグローバルインストールのオプション。

クマ

「これだけ？」ってくらい簡単にインストールができます。アイス食べながらやったけど、アイス食べる方が時間かかりました。

Gatsbyでブログ立ち上げ

以下のコマンドで新しいサイト（ブログ）を立ち上げ

$ gatsby new サイト名 スターターのgithubURL

スターターとは、いわゆるサイトの目的に応じたテンプレートです。さまざまなタイプのスターターがあるので、こちらで探してみてください。今回は、gatsby-starter-blogを使ってみます。

$ gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog

「gatsby-blog」の部分は任意のサイトの名前、それ以降の「https://github.com/gatsbyjs/gatsby-starter-blog」はGitHub上にあるスターターのリポジトリです。（今回はgatsby-starter-blogのリポジトリ）

ちなみに、スターターと使っている環境のnodeのバージョンの関係によってはエラーが出る場合があります。私はnpmを使いましたが、yarnを使った場合も同様のエラーが起きるようです。nodeのバージョンを安定版か、場合によってはそれ以下に下げましょう。バージョンの下げ方に関しては以下の記事が参考になると思います。

インストールしている Node.js のバージョンをダウングレードさせるために n を使ってみる。

クマ

個人的な問題①。
gatsby-starter-blogからCSSなどの装飾をはがしたスターターを使おうとしましたが、nodeのバージョンを下げても使えませんでした。諦めてgatsby-starter-blogでブログを立ち上げました。

クマ

個人的な問題②。
nodeのバージョン管理コマンドnを使ってもnodeのバージョンが切り替わりませんでした。どうやらグローバルインストール、ローカルインストールが混在していたようです。これを機にnodeとnpm周りを一度アンインストールしてディレクトリも消して、整理しました。

話が少し逸れましたが、以下のコマンドを入力してサイトを立ち上げてみます。

$ cd gatsby-blog  //ディレクトリの移動
$ gatsby develop  //テスト環境でサイト立ち上げ

ブラウザで「http://localhost:8000」と入力し、サイトが立ち上がっているか確認。

クマ

無事にサイトが立ち上がりました。コマンドラインでのインストールですが、簡単ですね。

BearFruitのマスコットキャラ「クマ」がLINEスタンプになりました！

プログラマーの心に刺さる、「プログラミングあるある」。毎日使いたくなること間違いなし！

LINE STORE

クマのプログラミング日記

gatsby-starter-blogの構造

さて、無事にブログは立ち上がりましたが、正直「Gatsbyってどんな構造になってんの…？」と思うはずです。少なくとも私は思いましたし、同時に「訳分からん…」と思いました。

クマ

なので、ここではgatsby-starter-blogの構造について説明していくよ！

まずは、gatsby-starter-blogのディレクトリ構成です。

とりあえず、ブログの構成に必要なディレクトリの役割をざっと説明します。

/content/blog/
この中にブログの中身を記述するディレクトリとファイルが入っています。ちなみにGatsbyのブログはマークダウン(.md)で書きます。が、後ほど説明しますが、マークダウンを拡張したMDXを使うようにした方がいいと思います。
/src/components/
この中にはコンポーネントが入っています。ブログを構成する部品（サイドバー、フッター、ヘッダーなど。）やその部品を使い回したりするためのファイルが入っている、と思っていただければOKです。
/src/images/
画像ファイルが入っています。そのままですね。別にここに入れなくてもいいです。Gatsbyのアイコンとかが入ってます。
/src/pages/
いわゆる固定ページ用のディレクトリです。ここにあるファイルはそのままルートディレクトリにぶら下がっちゃいます。
/src/templates/
ブログなんかは、それぞれのページが同じ形をしています。そのテンプレートを置いておくディレクトリです。後ほど説明しますが、ビルド時にここにあるファイルにデータを渡して、それぞれのブログページ等を作っていきます。

大まかに説明をしましたが、ぶっちゃけ/src/pages/以外のディレクトリは結構自由に構成して大丈夫です。例えば、/src/componetns/の中に/templates/を入れちゃったりしても全然問題ないです（パス指定するときはもちろん注意ですが）。

クマ

ファイルの置き場所はどこでもいいですが、ビルド時のどのタイミングでファイルを読み込むか、によっては思うようにGraphQLのクエリが使えたり使えなかったりするので注意です。

さて、ディレクトリ構成を押さえたところで、Gatsbyで最初に頭に入れておくべきことを述べておきます。それは、

Gatsby（というより静的サイトジェネレーターと呼ばれるもの）の最大の特徴は、develop（テスト環境でサイトを立ち上げ）やbuild（本番環境の構築）をする際（以下まとめてビルド時ということにします）にすべてのページをあらかじめ作ってしまう、という点です。

そこでまず重要になってくるファイルがルートにある、

gatsby-config.js （ブログのタイトルやディスクリプションなどの基本情報やプラグインの指定をする）
gatsby-node.js （ビルド時にGraphQLでデータを拾ってきながらブログページなどを作っていく）

の二つのファイルです。これらに変更を加えると、好きなプラグインを使ったり、タグページなど新しいページを作ることができます。

ビルド時のそれぞれのディレクトリ、ファイルの関係は次のようになります。

クマ

ちなみに、コンポーネントからGraphQLを使うこともできます（useStaticQueryというものを使う）が、変数を渡してクエリ（ざっくりと、データベースに対する命令と思ってください）を実行することができないのであまり自由度はありません。取ってくるものが決まってればいいですが…。

「あらかじめ考えておいた方がよかったな」と思うこと

1．ブログを実際に書く際にMD（マークダウン）で書いていました。が、途中でMDX（マークダウンでjsxが使えるようになるように機能拡張した形式）というものに気付き、そっちで書いています。最初からMDXで書いていればよかったなぁ、と思ってます。設定が若干面倒なので、またそのうち記事にしたいと思います。

クマ

MDXは便利なのですが、GatsbyではGraphQLの書き方が変わるので書き換えがちょっと大変です。

2．カテゴリーの階層の扱い。当初、2階層（メインカテゴリ→サブカテゴリ）としていましたが、URLを作るのが面倒＆カテゴリ一覧のページを作るときに複雑になりすぎました（作れないことはない）。

クマ

結局こだわりを捨てて1階層（メインカテゴリ）のみにしました。

3．当たり前かもしれませんが、ブログの構成はよく考えてからやりましょう。WordPressに慣れていると「まぁサイドバーの構成なんかあとでどうにでもなるわ」と無意識のうちに思っちゃってますが、Gatsbyは基本的にコード書きによる手直しなので、作り直しなんかが面倒です。

クマ

「これ、やっぱりこうしたいな」と思ってからが大変です。

ちなみにサーバーはConoHa WING を使っています。

Gatsbyはサーバレスでの運用も魅力的ですが、本格運用するなら安心感のあるレンタルサーバーもおすすめです。

ConoHa WINGをチェック！

Gatsbyでブログを本格運用したい！という人には、こちらもオススメです。やること別に記事をまとめています。