Gatsby.js スタティックサイトのチュートリアル Part 1
Gatsby.jsはReactベースのSSG（スタティックサイトジェネレーター）です。公式サイトのドキュメンテーションを参考にブログサイトの作成方法を確認します。OSはWindows 11を使用しているのでCLIはPowerShellを使用します。Gatsbyの公式サイトを確認したい方は下記のリンクからどうぞ。
今回は開発環境の構築方法とプロジェクトの作成・実行方法を確認します
開発環境の構築
まず下記のツールをインストールします。
Node.jsはLTS版をインストールすれば問題ありません。
インストールできていればCLIでNode.jsとNPMのバージョンが確認できます。
次にGatsby CLIをインストールします。下記コマンドでインストールできます。
npm install -g gatsby-cli
インストールできていればヘルプでコマンドを確認できます。
gatsby -h
これで必要なツールはインストールできました。コードエディタはJSXに対応しているものであればなんでも問題ないでしょう。私はシンプルなUIが好みなので GNU Emacs を使用しています。
Gatsbyプロジェクトの作成とローカル環境での実行
プロジェクトは下記コマンドで作成できます。公式のドキュメンテーションと同様にスターターは使用しません。
gatsby new
任意のディレクトリでコマンドを実行します。私の場合は、C:\workspace\Repos内に作成しています。
プロンプトで初期設定をどうするか聞かれるので下記のようにします。
今回はプロジェクト名を Gatsby Static Site Tutorialとし、gatsby-static-site-tutorialフォルダ内にプロジェクトを作成しています。
無事にインストールが完了すれば下記のよう表示になります。
これでプロジェクトが作成できたので実行してみます。下記コマンドでフォルダ内に移動し開発環境で実行します。開発環境ではソースの変更がリアルタイムで反映されます。
cd gatsby-static-site-tutorial
gatsby develop
無事に実行できれば下記のような表示になります。
ブラウザでhttp://localhost:8000/にアクセスすればサイトが確認できます。なおPowerShellを使用していればhttp://localhost:8000/の文字の部分をコントローキーを押しながらクリックすればブラウザで起動してくれます。またコマンドに下記のようにオプションを使用して実行すれば自動的にブラウザを開いてくれます。
gatsby develop -o
なおフォルダ構成はこのようになっています。
これでGatsbyプロジェクトの開発環境での実行方法を確認できました。本番用のビルド方法も確認しておきます。下記コマンドを実行します。
gatsby build
このコマンドでpublicフォルダ内に公開用のファイル群が作成されます。本番環境の表示を確認するには下記コマンドを実行します。
gatsby serve
これで http://localhost:9000/にアクセスすれば本番環境の表示を確認できます。公開する場合はpublicフォルダごとサーバーにアップしてルートフォルダに指定すれば公開できます。今回は以上です。