GatsbyJS + Contentful + Netlifyで開発用個人ブログ構築 part1

Gatsbyjsとは

React と GraphQL を使用する静的ページジェネレータ。 Gatsbytext in italicJS は加工する情報を GraphQL で取得してビルド時に静的なページを作り出す仕組み。既に展開したときに、各ページの情報がすべての配布ポイントに作成されるので、別にアプリサーバが必要ではない長所がある。

• グラフ形式のデータインターフェースを提供する。
• データノードを構成する。プリセットのプラグインを介して拡張することもできる。
• 設定したデータを GraphQL クエリして、ページのコードで使用する。
• サイトのすべてのページを事前にレンダリングして、パスに index.html を生成する。

なぜGatsbyjsなのか

• 画面の rendering が早い
• 画面メンテナンスが楽
• dataを GraphQL から必要なdataだけ簡単に習得するので楽
• フロントエンドに特化している
• react・dataの学習も同時でできる
• Wordpressみたいにプラグインも多いので実装が楽

GatsbyBlogを環境構築

参考ページ

Gatsby install

$npm install -g gatsby-cli

Gatsby blog install

$ gatsby new [プロジェクト名] https://github.com/gatsbyjs/gatsby-starter-blog-theme

ローカルサーバー立ち上げ

$ gatsby develop
or
$ npm start

You can now view gatsby-starter-blog in the browser.
⠀
  http://localhost:8001/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8001/___graphql
⠀
Note that the development build is not optimized.

ローカルサーバーを立ち上げてみたらsimpleなtempletが立ち上がった。

GraphQL サンプルデータが習得できたので画面に表示するだけ！

Gatsbyの環境構築は終了。