【Gatsby.js】「ここだけ押さえれば普通に使える」って知識をまとめてみた

$ npm install-g gatsby-cli
$ gatsby -v

$ gatsby new
✔ What is your project called? … my_project #プロジェクト名✔ What starter would you like to use? › gatsby-starter-hello-world # 一番シンプルなスターターを選択$ cd my_project
$ gatsby develop

$ mkdir src/components
$ touch src/components/header.js
$ touch src/components/footer.js
$ touch src/components/layout.js

importReactfrom"react"exportdefault()=>(<header><h1>サンプルサイトのヘッダー!</h1></header>)

importReactfrom"react"exportdefault()=>(<footer><small>サンプルサイトのフッター!</small></footer>)

importReactfrom"react"importHeaderfrom"../components/header"importFooterfrom"../components/footer"exportdefault({children})=>(<>{/* <React.Fragment>の省略形 */}<Header/>{children}<Footer/></>)

importReactfrom"react"importLayoutfrom"../components/layout"exportdefault()=>(<Layout><div><p>トップページのメインコンテンツ！</p></div></Layout>)

$ touch src/pages/second.js

importReactfrom"react"import{Link}from"gatsby"importLayoutfrom"../components/layout"exportdefault()=>(<Layout><div><p>2つ目のページのメインコンテンツ！</p><Linkto={"/"}>トップページへのリンク</Link></div></Layout>)

importReactfrom"react"import{Link}from"gatsby"//追加importLayoutfrom"../components/layout"exportdefault()=>(<Layout><div><p>トップページのメインコンテンツ！</p><Linkto={"/second/"}>Secondページへのリンク</Link>{/* 追加 */}</div></Layout>)

$ mkdir src/images

$ yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem 

module.exports={/* Your site config here */plugins:[`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,{resolve:`gatsby-source-filesystem`,options:{name:`images`,path:`${__dirname}/src/images/`,},},],}

$ touch src/components/image.js

importReactfrom"react"import{useStaticQuery,graphql}from"gatsby"importImgfrom"gatsby-image"exportdefaultprops=>{const{allImageSharp}=useStaticQuery(graphql`
    query {
      allImageSharp {
        nodes {
          fluid(maxWidth: 1600) {
            originalName
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)return(<figure><Imgfluid={allImageSharp.nodes.find(n=>n.fluid.originalName===props.filename).fluid}alt={props.alt}/></figure>)}

importReactfrom"react"import{Link}from"gatsby"importLayoutfrom"../components/layout"importImagefrom"../components/image"//追加exportdefault()=>(<Layout><div><p>トップページのメインコンテンツ！</p><Linkto={"/second/"}>Secondページへのリンク</Link><Imagefilename="sample.jpg"alt="サンプル画像"/>{/* 追加 */}</div></Layout>)

$ yarn add gatsby-plugin-react-helmet react-helmet

module.exports={/* Your site config here */plugins:[`gatsby-transformer-sharp`,`gatsby-plugin-sharp`,{resolve:`gatsby-source-filesystem`,options:{name:`images`,path:`${__dirname}/src/images/`,},},`gatsby-plugin-react-helmet`//追加],}

$ touch src/components/meta.js

importReactfrom"react"import{Helmet}from"react-helmet"exportdefault()=>(<Helmet><htmllang="ja"/><title>サンプルサイト</title><metaname="description"content="説明文"/></Helmet>)

//...importMetafrom"../components/meta"//追加exportdefault()=>(<Layout><Meta/>{/* 追加 */}{/* ... */}</Layout>)

//...exportdefaultprops=>{// html部分の前に処理が入ると、( から { に変わることに注意constbaseTitle="サンプルサイト"consttitle=props.title?`${props.title} | ${baseTitle}`:baseTitlereturn(<Helmet><htmllang="ja"/><title>{title}</title><metaname="description"content={props.desc}/></Helmet>)}

//...exportdefault()=>(<Layout><Metatitle="トップページ"desc="Gatsby.jsの使い方を説明するためのサンプルページです。"/>{/* ... */}</Layout>)

importMetafrom"../components/meta"//...exportdefault()=>(<Layout><Metatitle="2つ目のページ"desc="2ページ目です"/>{/* ... */}</Layout>)

.title{color:green;}

importStylesfrom"./header.module.css"..return(<h1className={Styles.container}>サンプルサイト</h1>
)

$ yarn add gatsby-plugin-postcss # postcssをインストール

module.exports={plugins:[//省略`gatsby-plugin-postcss`,//追加],}

$ yarn add tailwindcss --dev# tailwind cssをインストール$ npx tailwindcss init # tailwind cssの設定ファイルを生成$ touch postcss.config.js # postcssの設定ファイルを生成

consttailwind=require('tailwindcss')module.exports=()=>({plugins:[tailwind('./tailwind.config.js')],})

$ mkdir src/utils
$ touch src/utils/global.css

@tailwindbase;@tailwindcomponents;@tailwindutilities;

importReactfrom"react"import'../utils/global.css'//追加//省略

//省略exportdefault()=>(<Layout>{/* ... */}<div><p>トップページのメインコンテンツ！</p><buttonclass="block uppercase mx-auto shadow bg-indigo-800 hover:bg-indigo-700 focus:shadow-outline focus:outline-none text-white text-xs py-3 px-10 rounded">
        Tailwind test
      </button>{/* ... */}</Layout>
)

module.exports={purge:["./src/**/*.js"],//編集theme:{extend:{},},variants:{},plugins:[],}