Gatsby のインストールから起動までです。
次のページとほぼ同じです。
Quick Start
- インストール
私は、Arch Linux を使っているので次のようにしました。
yay nodejs-gatsby-cli
インストールが完了したらバージョンの確認
$ gatsby --version
2.5.9
- 新しいサイトの構築
gatsby new gatsby-site
- 作業フォルダーの変更
cd gatsby-site
- サーバーの起動
VPS で起動したので、外部からアクセスするようにします。
gatsby develop -H 0.0.0.0
-
http://hostname:8000 にアクセス
-
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
- 本番用のビルド
gatsby build
- 本番用のサーバーの起動
gatsby serve -H 0.0.0.0
- ブラウザーで、http://hostname:9000 にアクセス
ポートが 9000 になります。