gatbyプロジェクトの構築

GatsbyJSのインストール

GatsbyJSを利用するにはnpmとGatsbyCLIのインストールが必要です。

npmのインストール

GatsbyJSはnode.js上で動作するので、以下のページからインストールを行います。 https://nodejs.org/ja/

GatsbyCLIのインストール

node.jsのインストールが完了したら、コマンドプロンプトからGatsbyCLIのインストールを行います。

npm install -g gatsby-cli

プロジェクトの作成

以下のコマンドでgatsbyプロジェクトが作成できます。

#gatsby new ディレクトリ名 スターターURL
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

実行後、hello-worldというディレクトリが作成されています。
コマンドで指定したURLのスターターサイトのプロジェクトを作成できます（URLを省略した場合はデフォルトのスタータが使用される）。
スターターの一覧はこちらから
Starter Library | GatsbyJS

コマンド実行後、hello-worldに移動して、開発サーバを起動します。

cd hello-world
gatsby develop

起動後ブラウザでhttp://localhost:8000にアクセスするとページが表示されます。

別のページへリンク

新しいページの作成

現在indexページのみなので、aboutページを作成しリンクを作成します。 ページはプロジェクディレクトリ（hello-world）の配下のsrcディレクトリに作成します。 about.jsを作成して以下のコードを保存します。

//about.js
import React from "react"

export default () => (
  <div>
    <h1>About Page</h1>
    <p>このサイトの説明ページ</p>
  </div>
)

ブラウザでhttp://localhost:8000/about/にアクセスするとページが表示されます。

リンクの作成

Gatsby内のページ間の移動はLInkを使用します。 変更内容はLinkをインポートし、Linkタグのtoプロパティにリンクを先を設定します。

//index.js
import React from "react"
import { Link } from "gatsby"

export default () => <div>
    Hello world!
    <p><Link to="about">aboutページへ</Link></p>
    </div>

//about.js
import React from "react"
import { Link } from "gatsby"

export default () => (
  <div>
    <h1>About Page</h1>
    <p>このサイトの説明ページ</p>
    <p><Link to="/">indexページへ</Link></p>
  </div>
)

ブラウザでアクセスすると、お互いのリンクが表示されます。