Gatsbyの環境構築

今回は、このブログの基盤となっている「GatsbyJS」のセットアップ方法について紹介します。 GatsbyはReactベースの静的サイトジェネレータで、非常に高速で動作します。 このブログの画面間の遷移もサクサクと動いているので、通常のReact製アプリに比べると動作が早いことが分かると思います。

Gatsby

前提条件

  • npmもしくはyarnをインストール済

インストール

下記の手順に従ってgatsby-cliをインストールします。

yarn global add gatsby-cli

サイト作成・実行手順

下記手順に従ってサイトを作成し、実行します。

サイトの作成

gatsby newコマンドでサイトを作成します。 今回はQuick Start | GatsbyJSに従ってgatsby-siteという名前で作成します。

gatsby new gatsby-site

developサーバの起動

作成したサイト直下に移動し、gatsby developコマンドでデバッグ実行します。

cd gatsby-site
gatsby develop

デフォルトではlocalhost:8000で立ち上がります。 http://localhost:8000にアクセスすると、下記の通り表示されます。

gatsby-default

※ホットリロードなのでsrc/pages配下のソースを変更すると表示が変更されると思います。余裕がある方は試してみましょう！

ビルド

gatsby buildコマンドでビルドを行います。

gatsby build

また、ビルドした内容を自身の環境で確認する場合はgatsby serveコマンドで行えます。

gatsby serve

スターターキットを使ってブログを構築する

これでGatsbyの大まかな概要は掴めたかなと思います。 しかしながらコツコツとソースを書いてブログを構築するのはなかなか大変です。 そこでGatsbyにはいくつかのスターターキットが用意されています。 主だったものは下記のページで確認できます。

今回はその中のgatsby-starter-netlify-cmsを使用したいと思います。

※このブログも同ライブラリを使っています。

ダウンロード

GitHubからソースをcloneします。

git clone https://github.com/netlify-templates/gatsby-starter-netlify-cms.git gatsby-demo-app

動作確認

各種モジュールをインストールし、実行します。

yarn install
yarn start

正常ならlocalhost:8000で下記の通り表示されると思います。 デフォルトではKaldiのコーポレートサイトのような見た目になっているので、不要な要素や部品を削除していく必要があります。 例) プライバシーポリシーページの追加、製品ページの削除等

Kaldi

まとめ

今回はGatsbyJSの概要と簡単な扱い方を紹介しました。 GatsbyJSには今回紹介したgatsby-starter-netlify-cms以外にも様々なライブラリがあり、自身のWebサイトを自由にカスタマイズでき、かつ高速動作するというメリットがあります。 Wordpressなどは、最初からなんでも揃っている分、動作がやや遅いというデメリットもあるため一長一短なのかなという印象です。 正直、自分のポートフォリオサイトや個人開発のプロダクトサイトなら手間もなく作れるため、非常に有益な技術だと思います。 大元のReactやWordpressに比べたら、書籍やブログ記事も少ないため手探りで作業する必要がありますが、それを差し引いても学んでおいて損はないのかなと思います！

参考

SNSでシェアする