All Articles

Gatsby.jsでブログ作り直しました

Published 20 Oct 2018

Blog作り直しました。

これまでhexo製のブログでしたが、React製の静的サイトジェネレータであるGatsby.jsで作り直してみました。

Gatsbyとは

Gatsby.jsReact製の静的サイトジェネレータです。
ReactとWebpackというモダン環境を利用できるという面で大きな旨みがあります。 コンポーネントを組み上げて行く最近のフロントエンド環境を、比較的容易に取り入れられることができます。
さらに、データの取得にはGraphQLを採用しています。 静的サイトジェネレータなので、あくまでもビルド時に利用するだけではあるものの、個人的にはGatsbyを選ぶ大きな要素になったことは間違いないです。

Gatsby環境構築

GatsbyにはCLIツールが用意されており、コマンドベースで雛形を生成できます。
GatsbyCLIのインストールはnpm経由で行えます。 npmがインストールされていない場合には別途インストールしてください。 もちろん、yarnでも問題ないはずです。

npmでのGatsbyCLIのインストールは下記のコマンドを実行します。

npm install --global gatsby-cli

続いて、インストールしたGatsbyCLIを利用して雛形を作成していきます。 作成される作業ディレクトリ名は、仮にgatsby-siteとしています。 また、GatsbyにはHexoや他の静的サイトジェネレータと同様に多種多様なテンプレートが存在しています。 その中から好きなテンプレートを選んで雛形を作成することができます。
テンプレートの一覧は、こちらから確認するとができます。 今回は、公式のテンプレートであるgatsby-starter-defaultを指定しています。

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default

これで、gatsby-siteというディレクトリが新たに作成され、その中に雛形サイトが生成されます。 作成されたgatsby-siteディレクトリに遷移します。

cd gatsby-site

次にサイトをdevelopモードで起動してみます。

gatsby develop

これで開発用のサーバが立ち上がり、デフォルトでhttp://localhost:8000から作成されたサイトを確認することができます。

Top画面

また、GraphQLのIDEが同時に立ち上がり、http://localhost:8000/___graphqlから確認することができます。 このIDE機能を使えばGeaphQLに不慣れでも、実際に結果を確認しながら開発を進めることができます。

GraphQL IDE

最後に、作成したサイトをビルドする場合には下記のコマンドからできます。

gatsby build

まとめ

ブログを移設することになりました。
引き続きよろしくお願いします。

Published 20 Oct 2018

主にWeb技術に関するブログ
Michihiko on Twitter