目次

Gatsby.js

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がベースとなっているので学習しやすい。
カスタマイズのための情報も多い。

Gatsby.jsサービスのURLとポートを変更する方法

デフォルトのURLとポート(develop)

npm run develop

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

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

デフォルトのURLとポート(production)

npm run build
npm run serve

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

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

Gatsby.jsサービスのホストを設定

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

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

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


npm run developnpm 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 developnpm run serveコマンドを実行したホストのもの。

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

Gatsby.jsサービスのポートを設定

package.json抜粋
{
    "scripts": {
        "develop": "gatsby develop -H=0.0.0.0 -p=8001",
        "serve": "gatsby serve -H=0.0.0.0 -p=9002",
    }
}

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

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

Gatsby.jsから不要なプラグインを削除する

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

prismjsをアンインストール

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

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

npm uninstall prismjs
npm uninstall gatsby-remark-prismjs

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


prismjs関連の設定を削除

gatsby-config.js

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

gatsby-config.js
`gatsby-remark-prismjs`,

gatsby-browser.js

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

gatsby-browser.js
import "prismjs/themes/prism.css"

gatsby-plugin-google-analyticsをアンインストール

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-plugin-google-analytics関連の設定を削除

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

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"

グローバルcssを削除する方法

グローバルcssの設定を削除

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

gatsby-browser.js
// normalize CSS across browsers
import "./src/normalize.css"
// custom CSS styles
import "./src/style.css"

グローバルcssのファイルを削除

下記のファイルを削除

MuiThemeProviderを作成する方法

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

material-ui関連のプラグインをインストール

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

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

material-ui関連の設定

gatsby-config.jspluginsに下記を追加。

gatsby-config.js抜粋
"gatsby-plugin-material-ui",

MuiThemeProviderコンポーネントを作成

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を適用していく。

MuiThemeProviderコンポーネントを適用

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で環境変数を設定する方法

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

dotenvをインストール

npm install dotenv

.envファイルを作成

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

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

.gitignoreに.envの除外設定を追加

.env*

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

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

.envをインポート

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_ENVdevelopment という文字列が入る。
よって、require(“dotenv”)では.env.developmentが読み込まれる。

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

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

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

Gatsby.jsでサイトマップを作成する方法

gatsby-plugin-sitemapをインストール

npm install gatsby-plugin-sitemap

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

gatsby-plugin-sitemapを設定

gatsby-config.jspluginsに下記を追加。

gatsby-config.js抜粋
    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        output: "/",
      },
    },

npm run buildを実行

npm run build

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

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

gatsby-plugin-sitemapのバグ

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

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

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

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

Google Search Consoleにサイトマップを登録する

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

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

Gatsby.jsにcanonicalを設定する方法

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

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

gatsby-plugin-canonical-urlsをインストール

npm install gatsby-plugin-canonical-urls

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

gatsby-plugin-canonical-urlsを設定

gatsby-config.jspluginsに以下を追加。

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

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

gatsby-plugin-canonical-urlsで追加されるタグ

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

Gatsby.jsにOGPを設定する方法

react-helmetプラグインをインストール

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

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

react-helmetプラグインを設定

gatsby-config.jspluginsに以下を追加。

gatsby-config.js
    "gatsby-plugin-react-helmet",

react-helmetでheadにmetaタグを追加する方法

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

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

gatsbyjs.ioから独自ドメインへリダイレクトする方法

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.commeta 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”>のタグは生成されない。

Gatsby.jsにGoogle Analyticsを設定する方法

Google Analyticsでの作業

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

測定IDは、Google Tag Managerコンテナ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-route-change トリガーを作成

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


コンテナを選択。


トリガーを選択。

新規をクリック。


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

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

保存をクリック。


トリガー名: gatsby-route-change

保存をクリック。


タグを選択。

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


トリガーをクリック。

アイコンをクリック。

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

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

保存をクリック。


公開をクリック。

ローカルでの作業

GTM用プラグインをインストール

npm install gatsby-plugin-google-tagmanager

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


環境変数を設定(.env)

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


環境変数を設定(Gatsby Colud)

Gatsby Cloudへアクセス。


サイトを選択。


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


Key: GTM_CONTAINER_ID
Value: GTM-XXXXXXX

Saveをクリック。


gatsby-config.jsを編集

gatsby-config.jspluginsに以下を追加。

    {
      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の部分は、環境変数から読み込ませる値。

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

Gatsby.jsにGoogle AdSenseを導入する方法

Google AdSenseでの作業

Google AdSense解説を参考に、

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

ローカルでの作業

html.jsを作成

プロジェクトの.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_ADSENSEonのときだけ、広告が表示されるようにしている。

開発環境ではGATSBY_FLAG_ADSENSEoffにしておき、
本番環境だけGATSBY_FLAG_ADSENSEonにする。


AdsenseMain.jsxを作成

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を受け取っている。


AdsenseMatched.jsxを作成

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などのコンポーネントから、AdsenseMainAdsenseMatchedの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_ADSENSEonのときだけ広告を表示する。

aタグのかわりにgatsbyのLinkタグを使う

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

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

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

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

aタグのかわりにmaterial-uiの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-uiLinkを使えばnoreferrerに関する警告は出なくなる。

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

gitの改行変換機能を無効化する方法

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コマンドで、改行変換機能をオフにする。

Gatsbyのプロジェクトをデプロイする方法

VSCodeのターミナルで

git add .

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

VSCodeのターミナルで

npm run build

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

git push

Gatsby.jsその他

Gatsby.jsその他