gatsby 公式チュートリアルメモ part1

公式チュートリアルリンク

starterを使う

以下のようなコマンドを打ってスターターからプロジェクトを生成

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

スターターはここに色々ある
https://www.gatsbyjs.com/starters/?

localhostで表示してみる

shell

gastby develop

pageを作る

プロジェクト内のsrc以下にpageが存在する．ホームはindex.jsになる．
以下のように編集して保存．

src/pages/index.js

import React from "react"

export default function Home() {
  return <div style={{ color: `purple`, fontSize: `72px` }}>Hello Gatsby!</div>
}

src/pages/about.js

import React from "react"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <h1>About Gatsby</h1>
      <p>Such wow. Very React.</p>
    </div>
  )
}

localhost:7000/about という感じでアクセスできる
index.jsは ``localhost:7000 localhost:7000/index`はだめだった

componentを作る

共通のパーツとして使えるコンポーネントを作る．これはパラメータを持つこともできて，便利．

src/pages/header.js

import React from "react"

export default function Header(props) {
  return <h1>{props.headerText}</h1>
}

src/pages/about.js

import React from "react"
import Header from "../components/header"

export default function About() {
  return (
    <div style={{ color: `teal` }}>
      <Header headerText="About Gatsby" />
      <p>Such wow. Very React.</p>
    </div>
  )
}

<Header headerText="About Gatsby" /> のようにして，コンポーネントに対して変数を渡せる．

Linkコンポーネント

src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import Header from "../components/header"

export default function Home() {
  return (
    <div style={{ color: `purple` }}>
      <Link to="/contact/">Contact</Link>
      <Header headerText="Hello Gatsby!" />
      <p>What a world.</p>
      <img src="https://source.unsplash.com/random/400x200" alt="" />
    </div>
  )
}

htmlにおけるaタグのような存在のリンクタグ

deployする

https://surge.sh/ のサービスを使ってデプロイしてみる

shell

# gatsbyのビルドコマンド
gatsby build 

# publicフォルダが生成され以下に静的なページが生成される
ls public 

# surge の install
npm install --global surge 

# surgeのアカウント生成
surge login

# surgeでデプロイ
surge public/

surgeを使ってデプロイし，webPageを作成するところまで確認