Gatsby の使い方

Gatsby のインストールから起動までです。
次のページとほぼ同じです。
Quick Start

1. インストール
   私は、Arch Linux を使っているので次のようにしました。

yay nodejs-gatsby-cli

インストールが完了したらバージョンの確認

$ gatsby --version
2.5.9

1. 新しいサイトの構築

gatsby new gatsby-site

1. 作業フォルダーの変更

cd gatsby-site

1. サーバーの起動
   VPS で起動したので、外部からアクセスするようにします。

gatsby develop -H 0.0.0.0

1. http://hostname:8000 にアクセス
   

2. http://hostname:8000/___graphql にアクセス
   

3. src/pages/index.js を改造してみます。

src/pages/index.js

import React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="ホーム" keywords={[`gatsby`, `application`, `react`]} />
    <h1>皆さん　こんにちは</h1>
    <p>新しいガッツビイのサイトへようこそ。</p>
    <p>さて、何かすばらしいものを作りましょう。</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export default IndexPage

ブラウザーでアクセスして変更が反映されることを確認します。

1. 本番用のビルド

gatsby build

1. 本番用のサーバーの起動

gatsby serve -H 0.0.0.0

1. ブラウザーで、http://hostname:9000 にアクセス

ポートが 9000 になります。