Gatsby.js

gatsby new xxx https://github.com/gatsbyjs/gatsby-starter-blog

xxxという名前のプロジェクトを作成。
（xxxというディレクトリが作成される）

スターターとして、https://github.com/gatsbyjs/gatsby-starter-blogのようなURLを指定する。

Gatsby.js公式・Gatsby Startersから、好みのスターターを検索できる。

1番人気のgatsby-starter-blogはスター数が3000程度。
2番人気のgatsby-starter-netlify-cmsはスター数が1800程度。

初心者はgatsby-starter-blogを使ったほうがいい。
チュートリアルはgatsby-starter-blogがベースとなっているので学習しやすい。
カスタマイズのための情報も多い。

npm run develop

Gatsby.jsでWebサイトを作成後、
npm run develop
のコマンドでWebサービスが起動する。

ブラウザに
http://localhost:8000
というURLを入力すると、Gatsby.jsで作成したサイトが表示される。

npm run build
npm run serve

npm run build
でプロジェクトをビルド後、
npm run serve
のコマンドでWebサービスが起動する。

ブラウザに
http://localhost:9000
というURLを入力すると、Gatsby.jsで作成したサイトが表示される。

デフォルトの設定では、
http://localhost:8000のようなURLでアクセスできるが
http://192.168.1.1:8000のようなURLではアクセスできない。
(IPアドレス指定でページを表示できない）

そのため、コマンドを実行した端末上からしかアクセスできない。
スマホで表示が確認できないため、レスポンシブが機能しているか確認しづらい。

サービスの起動オプションにhostを設定することで、IPアドレスでのアクセスを可能にする。

npm run developやnpm run serveの実態は、
package.jsonに定義されている。

package.json抜粋

{
    "scripts": {
        "develop": "gatsby develop",
        "serve": "gatsby serve",
    }
}

上記の部分を、下記のように変更。

package.json抜粋

{
    "scripts": {
        "develop": "gatsby develop -H=0.0.0.0",
        "serve": "gatsby serve -H=0.0.0.0",
    }
}

-H=0.0.0.0オプションを指定することで、
http://192.168.1.1:8000
のようなURLでサイトを表示できるようになる。

IPアドレスは、npm run developやnpm run serveコマンドを実行したホストのもの。

-H=0.0.0.0の部分は、
-H 0.0.0.0（イコールなし）や
–host=0.0.0.0でもOK。

package.json抜粋

{
    "scripts": {
        "develop": "gatsby develop -H=0.0.0.0 -p=8001",
        "serve": "gatsby serve -H=0.0.0.0 -p=9002",
    }
}

-pオプションを指定することで、
デフォルトの8000や9000以外のポートでサービスを起動する。

Gatsby.jsで複数のサイトを起動したとき、デフォルトのポートのままでは競合するので、ポートの変更が必須となる。

不要なプラグインなどは削除した方が全体のファイルサイズが小さくなり、ビルド時間の短縮になる。

prismjsは、ソースコードをシンタックスハイライトするためのプラグイン。

Gatsby.jsのサイトでソースコードを表示させないなら不要。

npm uninstall prismjs
npm uninstall gatsby-remark-prismjs

prismjs本体と、
prismjsをmarkdownで扱うためのプラグイン（gatsby-remark-prismjs）をアンインストール。

gatsby-config.jsファイルのpluginsの項目から下記の部分を削除。

gatsby-config.js

`gatsby-remark-prismjs`,

gatsby-browser.jsファイルから下記の部分を削除。

gatsby-browser.js

import "prismjs/themes/prism.css"

gatsby-plugin-google-analyticsは、Gatsby.jsでGoogle Analyticsを設定するためのプラグイン。

Google Tag Managerを通してGoogle Analyticsを利用するので
直接Google Analyticsを扱うgatsby-plugin-google-analyticsは不要。

npm uninstall gatsby-plugin-google-analytics

gatsby-config.jsのpluginsの項目から以下を削除。

gatsby-config.js

// {
//   resolve: `gatsby-plugin-google-analytics`,
//   options: {
//     trackingId: `ADD YOUR TRACKING ID HERE`,
//   },
// },

元々コメントアウトされているので、消さなくても影響はない。
しかし、gatsby-plugin-google-analyticsを使わない場合は、完全に不要な設定なので削除した方が分かりやすい。

npm uninstall typeface-merriweather
npm uninstall typeface-montserrat

gatsby-browser.jsから下記の部分を削除。

gatsby-browser.js

// custom typefaces
import "typeface-montserrat"
import "typeface-merriweather"

gatsby-browser.jsから下記の部分を削除。

gatsby-browser.js

// normalize CSS across browsers
import "./src/normalize.css"
// custom CSS styles
import "./src/style.css"

下記のファイルを削除

• ./src/normalize.css
• ./src/style.css

グローバルcssを削除した代わりに、
Material UIのThemeProviderでcssを管理する。

npm install @material-ui/core
npm install gatsby-plugin-material-ui

material-uiの本体と、
material-uiをgatsbyで利用するためのプラグインをインストール。

gatsby-config.jsのpluginsに下記を追加。

gatsby-config.js抜粋

"gatsby-plugin-material-ui",

src/componentsディレクトリにMuiThemeProvider.jsxというファイルを新規作成。

MuiThemeProvider.jsx

import React from "react"
import { CssBaseline } from "@material-ui/core"
import {
  ThemeProvider,
  createMuiTheme,
  responsiveFontSizes,
} from "@material-ui/core/styles"
 
const MuiThemeProvider = ({ children }) => {
  let theme = createMuiTheme({
    // 背景色を適用すると、cssが適用される前に一瞬白背景が映るので画面がちらつく
    // palette: {
    //   background: {
    //     default: "#dddddd",
    //   },
    // },
    // フォントを適用すると、最初にブラウザのデフォルトフォントで表示され、
    // 一瞬後にここで指定したフォントに切り替わるので画面がちらつく
    // typography: {
    //   fontFamily: ["Noto Serif", "Noto Sans JP"].join(","),
    // },
  })
  theme = responsiveFontSizes(theme)
 
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}
export default MuiThemeProvider

createMuiThemeを使って背景色やフォントなどを指定できる。

responsiveFontSizesフォントサイズをレスポンシブ対応できる。

CssBaselineにより、最低限のcssを適用した状態になる。

残りは各コンポーネント単位で、makeStylesを使ってcssを適用していく。

gatsby-browser.jsに下記を追加。

gatsby-browser.js抜粋

import React from "react"
import MuiThemeProvider from "./src/components/MuiThemeProvider"
export const wrapRootElement = ({ element }) => {
  return <MuiThemeProvider>{element}</MuiThemeProvider>
}

wrapRootElementの中でMuiThemeProviderを適用することで、全体ページにスタイルが適用される。

dotenvを使うと、開発環境と本番環境などステージ別で環境変数を定義することができる。

npm install dotenv

プロジェクトのルートディレクトリに下記の2つのファイルを作成する。

• .env.development
• .env.production

.env.developmentには、開発環境用の環境変数を、
.env.productionには、本番環境用の環境変数を書く。

.env*

.env.developmentと.env.productionをgitの管理対象外とする。

一般的に、.env系のファイルではデータベースのパスワードなどの機密事項を管理する。
そのため、Githubなどにアップロードしてはならない。

gatsby-confi.jsの先頭付近に下記を記載。

gatsby-confi.js

const fs = require("fs")
const envPath = `.env.${process.env.NODE_ENV}`
if (fs.existsSync(envPath)) {
  require("dotenv").config({
    path: envPath,
  })
}

npm run developコマンド実行時には、process.env.NODE_ENVにdevelopment という文字列が入る。
よって、require(“dotenv”)では.env.developmentが読み込まれる。

npm run buildコマンド実行時には、process.env.NODE_ENVにproduction という文字列が入る。
よって、require(“dotenv”)では.env.production が読み込まれる。

Gatsby Cloudなどのホスティングサービスにデプロイするときは、
git対象管理外の.env.productionのデータは読み込まれない。

そのため、ホスティングサービスに備え付けの管理画面から環境変数を別途設定する。

npm install gatsby-plugin-sitemap

sitemap生成用のプラグインをインストール。

gatsby-config.jsのpluginsに下記を追加。

gatsby-config.js抜粋

    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        output: "/",
      },
    },

npm run build

ビルドのタイミングで、publicディレクトリ直下に

• sitemap-0.xml
• sitemap-index.xml

というファイルが作成される。

gatsby-config.jsへの設定で、
output: “/”,を指定しなかった場合はバグが発生する。
（2021年7月現在）

output: “/”,を指定しないと
public/ディレクトリではなく
public/sitemap/ディレクトリに
sitemap-0.xmlとsitemap-index.xmlが作成される。

しかし、/sitemap/sitemap-index.xmlからの内部リンクで
/sitemap/sitemap-0.xmlになるべきところが
/sitemap-0.xmlになってしまう。

/sitemap-0.xmlは404エラーになるので、サイトマップとして機能しない。

Google Search Consoleの使い方を参考に、
サイトマップとしてsitemap-index.xmlを登録する。

sitemap-index.xmlを登録すれば、sitemap-0.xmlは連動してGoogleに認識される。

canonialとは、Googleなどの検索エンジンに正規のURLをお知らせする機能。

http://example.comと
http://www.example.comの両方のURLでサイトにアクセスできるようなとき、
どちらが正規のURLかを宣言する。

npm install gatsby-plugin-canonical-urls

canonical設定用のプラグインをインストール。

gatsby-config.jsのpluginsに以下を追加。

gatsby-config.js抜粋

    {
      resolve: `gatsby-plugin-canonical-urls`,
      options: {
        siteUrl: process.env.SITE_URL,
        stripQueryString: true,
      },
    },

SITE_URLは環境変数。
開発環境と本番環境でURLが変わるので、環境変数で管理する。

gatsby-plugin-canonical-urlsの効果により、
htmlのheadタグに
<link rel="canonical" href="http://example.com">
のようなタグが追加される。

npm install react-helmet
npm install gatsby-plugin-react-helmet

react-helmet本体と、
react-helmetをGatsby.jsで扱うためのプラグイン（gatsby-plugin-react-helmet）をインストール。

gatsby-config.jsのpluginsに以下を追加。

gatsby-config.js

    "gatsby-plugin-react-helmet",

Seo.jsxというコンポーネントを作成。

Seo.jsx

import React from "react"
import { Helmet } from "react-helmet"
 
const Seo = ({location}) => {
  // helmetに渡すメタデータ
  let metaDatas = [
    // OGPの設定、全ページ共通
    {
      property: "og:site_name",
      content: "xxxxx",
    },
    {
      property: "og:locale",
      content: "ja",
    },
    {
      name: "twitter:site",
      content: "xxxxx",
    },
    {
      name: "twitter:creator",
      content: "xxxxx",
    },
    {
      name: "twitter:card",
      content: "summary_large_image",
    },
 
    // OGPの設定、ページごとに異なる部分
    {
      property: "og:type",
      content: "article",
    },
    {
      property: "og:url",
      content: "xxxxx",
    },
    {
      property: "og:title",
      content: "xxxxx",
    },
    {
      property: "og:description",
      content: "xxxxx",
    },
    {
      property: "og:image",
      content: "xxxxx",
    },
 
    // OGP以外のメタデータ
    {
      name: "description",
      content: "xxxxx",
    },
  ]
 
  return (
    <Helmet
      htmlAttributes={{
        lang: "ja",
        prefix: "og: http://ogp.me/ns#",
      }}
      title="xxxxx"
      meta={metaDatas}
    >
    </Helmet>
  )
}
export default Seo

xxxxxの部分は各自の環境に合わせて文字列を設定する。

Seo.js抜粋

    <Helmet
      htmlAttributes={{
        lang: "ja",
        prefix: "og: http://ogp.me/ns#",
      }}
    >
    </Helmet>

の部分の効果により、htmlのソースに
<html lang="ja" prefix="og: http://ogp.me/ns#" data-react-helmet="lang,prefix">
のようなタグが出力される。

Seo.js抜粋

    <Helmet
      title="xxxxx"
    >
    </Helmet>

の部分の効果により、htmlソースのheadタグ内に
<title>xxxxx</title>
のようなタグが出力される。

Seo.js抜粋

    <Helmet
      meta={metaDatas}
    >
    </Helmet>

の部分の効果により、htmlソースのheadタグ内に

<meta data-react-helmet=“true” property=“og:site_name” content=“xxxxx”>
<meta data-react-helmet=“true” property=“og:locale” content=“ja”>
<meta data-react-helmet=“true” name=“twitter:site” content=“xxxxx”>
<meta data-react-helmet=“true” name=“twitter:creator” content=“xxxxx”>
<meta data-react-helmet=“true” name=“twitter:card” content=“summary_large_image”>
<meta data-react-helmet=“true” property=“og:type” content=“article”>
<meta data-react-helmet=“true” property=“og:url” content=“xxxxx”>
<meta data-react-helmet=“true” property=“og:title” content=“xxxxx”>
<meta data-react-helmet=“true” property=“og:description” content=“xxxxx”>
<meta data-react-helmet=“true” property=“og:image” content=“xxxxx”>
<meta data-react-helmet=“true” name=“description” content=“xxxxx”>

のようなタグが出力される。

Gatsby.jsで作成したプロジェクトをGatsby Cloudへデプロイすると、
http://xxx.gatsbyjs.io
のようなURLが割り当てられる。

Gatsby Cloudでは独自ドメインの設定が可能。
example.comというドメインを割り当てたと仮定する。

このとき、
http://xxx.gatsbyjs.ioと
http://example.comの両方でページが表示できてしまう。

Gatsby Cloudには301リダイレクトの機能がないので
http://xxx.gatsbyjs.ioから
http://example.comへmeta refreshで転送する。

つまり、
<meta http-equiv="refresh" content="0;URL=https://example.com">
のようなタグを生成する。

Seo.jsx

import React, { useState, useEffect } from "react"
import { Helmet } from "react-helmet"
 
const Seo = ({location}) => {
  const [refreshContent, setRefreshContent] = useState()
 
  useEffect(() => {
    if (location.host.endsWith("gatsbyjs.io")) {
      const urlRedirect = `http://example.com${location.pathname}${location.search}`
 
      setRefreshContent(`0;URL="${urlRedirect}"`)
    } else {
      setRefreshContent(undefined)
    }
  }, [location])
 
  let metaDatas = [
    {
      property: "og:site_name",
      content: "xxxxx",
    },
    {
      property: "og:locale",
      content: "ja",
    },
    中略
  ]
 
  if (refreshContent !== undefined) {
    metaDatas = metaDatas.concat([
      {
        "http-equiv": "refresh",
        content: refreshContent,
      },
    ])
  }
 
  return (
    <Helmet
      htmlAttributes={{
        lang: "ja",
        prefix: "og: http://ogp.me/ns#",
      }}
      title="xxxxx"
      meta={metaDatas}
    >
    </Helmet>
  )
}
export default Seo

Seo.jsx抜粋

    if (location.host.endsWith("gatsbyjs.io")) {
      const urlRedirect = `http://example.com${location.pathname}${location.search}`
 
      setRefreshContent(`0;URL="${urlRedirect}"`)
    }

元のURLが
http://xxx.gatsbyjs.io/aaa/bbb?ccc=dddだったら、
${location.pathname}は、/aaa/bbb、
${location.search}は、?ccc=dddのような値が格納されている。

location.host（ドメイン名）の末尾がgatsbyjs.ioのときだけ、
0;URL="http://example.com/aaa/bbb?ccc=ddd"のような文字列を生成、stateに値を保存(setRefreshContent)している。

location.hostの値は、useEffectの中でのみ有効。
useEffectの外ではundefinedになるので注意。

Seo.jsx抜粋

  if (refreshContent !== undefined) {
    metaDatas = metaDatas.concat([
      {
        "http-equiv": "refresh",
        content: refreshContent,
      },
    ])
  }

<meta http-equiv="refresh" content="0;URL=https://example.com">
のようなタグを出力するために、Helmetに渡す値を設定している。

元々のURLがexample.comドメインの場合は、
refreshContentの値がundefinedなので、
<meta http-equiv=“refresh”>のタグは生成されない。

Google Analyticsで、測定IDを発行する。

測定IDは、Google Tag ManagerでコンテナIDを発行するときに必要。

Google Tag Managerで、<head>タグ用コードを発行する。

<head>タグ用コードのGTM-XXXXXXXの部分（コンテナID）だけを使う。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

のようなコード自体は、プラグインが自動的に挿入してくれるので、自分で設定は不要。

gatsbyやreactではページ遷移が普通のサイトとは違う。
URLを疑似的に変更して、変更のあるDOMだけを再描画している。
この疑似的なページ移動を計測するために専用のトリガー設定が必要。

コンテナを選択。

トリガーを選択。

新規をクリック。

トリガーの設定をクリック。

トリガーのタイプを選択：　カスタム イベント
イベント名：　gatsby-route-change

保存をクリック。

トリガー名：　gatsby-route-change

保存をクリック。

タグを選択。

Google アナリティクス GA4 設定をクリック。

トリガーをクリック。

＋アイコンをクリック。

トリガーの選択：　gatsby-route-change

配信トリガーに、All Pagesとgatsby-route-changeが表示されていることを確認。

保存をクリック。

公開をクリック。

npm install gatsby-plugin-google-tagmanager

gatsby-plugin-google-tagmanagerをインストール。

.envファイルに、
GTM_CONTAINER_ID=GTM-XXXXXXX
を追加。

Gatsby Cloudへアクセス。

サイトを選択。

Site Settingsタブで、Edit Variablesを選択。

Key: GTM_CONTAINER_ID
Value: GTM-XXXXXXX

Saveをクリック。

gatsby-config.jsのpluginsに以下を追加。

    {
      resolve: `gatsby-plugin-google-tagmanager`,
      options: {
        id: process.env.GTM_CONTAINER_ID,
        includeInDevelopment: false,
        defaultDataLayer: { platform: "gatsby" },
        routeChangeEventName: "gatsby-route-change",
      },
    },

process.env.GTM_CONTAINER_IDの部分は、環境変数から読み込ませる値。

routeChangeEventNameのgatsby-route-changeは、
Google Tag Managerでコンテナ作成時に、イベントトリガーのイベント名に設定した値。

Google AdSense解説を参考に、

1. Google AdSenseにサブドメインを追加
2. Google AdSenseの自動広告用のコードを取得
3. ディスプレイ広告を作成・広告コードを取得
4. 関連コンテンツを作成・広告コードを取得

プロジェクトの.cacheディレクトリにあるdefault-html.jsファイルをコピーして、
srcディレクトリにhtml.jsというファイルを作成する。

<head>タグの末尾に自動広告用のコードを追加する。

html.js

import React from "react"
import PropTypes from "prop-types"
 
export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
 
        {process.env.GATSBY_FLAG_ADSENSE === "on" && (
          <script
            data-ad-client="ca-pub-1234567890123456"
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          ></script>
        )}
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}
 
HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

追加した部分だけ抜粋。

html.js

        {process.env.GATSBY_FLAG_ADSENSE === "on" && (
          <script
            data-ad-client="ca-pub-1234567890123456"
            async
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          ></script>
        )}

process.env.GATSBY_FLAG_ADSENSE === “on” &&により、
環境変数GATSBY_FLAG_ADSENSEがonのときだけ、広告が表示されるようにしている。

開発環境ではGATSBY_FLAG_ADSENSEをoffにしておき、
本番環境だけGATSBY_FLAG_ADSENSEをonにする。

src/componentsディレクトリに、AdsenseMain.jsxファイルを新規作成。

AdsenseMain.jsx

import React, { useEffect } from "react"
 
const AdsenseMain = ({ path }) => {
  useEffect(() => {
    if (window) {
      window.adsbygoogle = window.adsbygoogle || []
      window.adsbygoogle.push({})
    }
  }, [path])
 
  return (
    <ins
      className="adsbygoogle"
      style={{ display: "block" }}
      data-ad-client="ca-pub-1234567890123456"
      data-ad-slot="1234567890"
      data-ad-format="auto"
      data-full-width-responsive="true"
    ></ins>
  )
}
export default AdsenseMain

returnには、ディスプレイ広告のコードから<ins></ins>の部分だけを書いている。

  useEffect(() => {
    if (window) {
      window.adsbygoogle = window.adsbygoogle || []
      window.adsbygoogle.push({})
    }
  }, [path])

上記の部分が、広告コードの
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
に相当する。

useEffectを使い、location.pathが変更した時に（ページが遷移した時に）広告が更新されるようにしている。

コンポーネントの引数pathは、親コンポーネントからlocation.pathを受け取っている。

src/componentsディレクトリに、AdsenseMatched.jsxファイルを新規作成。

AdsenseMatched.jsx

import React, { useEffect } from "react"
 
const AdsenseMatched = ({ path }) => {
  useEffect(() => {
    if (window) {
      window.adsbygoogle = window.adsbygoogle || []
      window.adsbygoogle.push({})
    }
  }, [path])
 
  return (
    <ins
      className="adsbygoogle"
      style={{ display: "block" }}
      data-ad-client="ca-pub-1234567890123456"
      data-ad-slot="9876543210"
      data-ad-format="autorelaxed"
    ></ins>
  )
}
export default AdsenseMatched

returnには、関連コンテンツのコードから<ins></ins>の部分だけを書いている。

Layout.jsxなどのコンポーネントから、AdsenseMainやAdsenseMatchedのjsxを読み込めば、その位置に広告が表示される。

    {process.env.GATSBY_FLAG_ADSENSE === "on" && (
      <AdsenseMain path={location.pathname} />
    )}

    {process.env.GATSBY_FLAG_ADSENSE === "on" && (
      <AdsenseMatched path={location.pathname} />
    )}

process.env.GATSBY_FLAG_ADSENSE === “on” &&により、
環境変数GATSBY_FLAG_ADSENSEがonのときだけ広告を表示する。

aタグだと、ページ全体が読み込まれる。

gatsbyのLinkタグだと、変更のあるコンポーネントだけが再描画される。
（ページの表示が速くなる）

gatsbyのLinkタグは、内部リンクにしか使えない。

import { Link } from "gatsby"
中略
 
<Link
  to="/xxx"
>
  xxx
</Link>

warning  Using target="_blank" without rel="noreferrer" is a security risk: see
https://html.spec.whatwg.org/multipage/links.html#link-type-noopener
react/jsx-no-target-blank

aタグにtarget=“_blank”を使うと、Eslintのせいで上記のような警告が出る。

<a
    href="http://example.com"
    target="_blank"
    rel="noopener"
>
    example.com
</a>

rel=“noopener”のところを、rel=“noopener noreferrer”にすれば警告は出なくなる。

import { Link as MuiLink } from "@material-ui/core"
 
中略
 
<MuiLink
    href="http://example.com"
    target="_blank"
    rel="noopener"
>
    example.com
</MuiLink>

または、material-uiのLinkを使えばnoreferrerに関する警告は出なくなる。

Link as MuiLinkのように、Linkに別名をつけているのは、
import { Link } from “gatsby”のLinkと区別するため。

warning: LF will be replaced by CRLF in xxxxx.md.
The file will have its original line endings in your working directory

という警告が大量に表示されるときの対処方法。

Gatsby.jsで.mdを扱うと、環境によっては改行コードの自動変換が発生する。
このとき改行の数だけwarningが表示されてうっとうしい。

git config --global core.autoCRLF false

gitコマンドで、改行変換機能をオフにする。

VSCodeのターミナルで

git add .

VSCodeのSource Controlの画面から
コメントを入れてコミット

VSCodeのターミナルで

npm run build

ビルド完了後に
VSCodeのターミナルで

git push

Gatsby.jsその他

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest
• Tumblr
• Reddit
• Email