ReactからGatsbyへの移行, 使い方

f:id:kei_s_lifehack:20200627183913p:plain

why

コーポレートサイトを作っていて，SPAはSEOが貧弱なのに気付き， Gatsbyなら手軽でSEOができると聞いた

SEO: Search Engine Optimization, 検索最適化

What is Gatsby Generater

note.com

Reactの上位フレームワーク

Markdownで書いたものをサイトにする為のジェネレーター？

react-routerでその度にSPAとして作成するのではなく，

ServerSideRenderingで実体ページを作成するのでSEOにもクローリングにも強いらしい．

またfile nameのurlを考えなくていいとか

導入

qiita.com

この新しくProjectを作成するやり方だと

/src/pages/*.js

/src/templates/*.js

などと構成がだいぶ違うので無理．

そもそもCakeと同じような規約の強い上位フレームワークなので向こうのルールに合わせて再構築する必要がありそう....

https://render.com

ここがhostに適してる？

Netlifyの労力で動的にホストできる？

ENV

www.gatsbyjs.org

npm install -g gatsby-cli

でCLIツールをインストール

gatsby-cli@2.12.51

starter

gatsby-starter を使用

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

で作成

f:id:kei_s_lifehack:20200627130251p:plain

作成された

cd hello-world

で移動して

gatsby develop

f:id:kei_s_lifehack:20200627130626p:plain

Hello world!

f:id:kei_s_lifehack:20200627130718p:plain

同時にGraphiQLのEditorも立ち上がる．

gatsby-starterでは

src/pages/index.js

に

import React from "react"

export default function Home() {
  return <div>Hello Gatsby!</div>
}

があるだけだが

starter-default

github.com

starter-defaultの方だと自動で

src/component/

header, image, layout, seo,

を作成してくれる．

header

Header.jsx

import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"

const Header = ({ siteTitle }) => (
  <header
    style={{
      background: `rebeccapurple`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        maxWidth: 960,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: `white`,
            textDecoration: `none`,
          }}
        >
          {siteTitle}
        </Link>
      </h1>
    </div>
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header

Headerのスタイリングと / へのリンク

stringになってるかの型チェックまで作ってくれる