Gatsby 사용법

Gatsby 설치부터 시작까지.
다음 페이지와 거의 동일합니다.
빠른 시작

1) 설치
Arch Linux를 사용하고 있기 때문에 다음과 같이했습니다.

yay nodejs-gatsby-cli

설치가 완료되면 버전 확인

$ gatsby --version
2.5.9

2) 새로운 사이트 구축

gatsby new gatsby-site

3) 작업 폴더 변경

cd gatsby-site

4) 서버 시작
VPS로 시작했으므로 외부에서 액세스하도록 합니다.

gatsby develop -H 0.0.0.0

5) http://hostname:8000 방문


6) http://hostname:8000/___graphql 방문


7) 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

브라우저에서 액세스하여 변경사항이 반영되는지 확인합니다.


8) 프로덕션용 빌드

gatsby build

9) 프로덕션용 서버 시작

gatsby serve -H 0.0.0.0

10) 브라우저에서 http://hostname:9000 방문

포트가 9000입니다.