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に定義されている。
{
"scripts": {
"develop": "gatsby develop",
"serve": "gatsby serve",
}
}
上記の部分を、下記のように変更。
{
"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。
{
"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-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の項目から以下を削除。
// { // 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から下記の部分を削除。
// custom typefaces import "typeface-montserrat" import "typeface-merriweather"
gatsby-browser.jsから下記の部分を削除。
// normalize CSS across browsers import "./src/normalize.css" // custom CSS styles import "./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-plugin-material-ui",
src/componentsディレクトリに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に下記を追加。
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*
.env.developmentと.env.productionをgitの管理対象外とする。
一般的に、.env系のファイルではデータベースのパスワードなどの機密事項を管理する。
そのため、Githubなどにアップロードしてはならない。
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に下記を追加。
{ resolve: "gatsby-plugin-sitemap", options: { output: "/", }, },
npm run build
ビルドのタイミングで、publicディレクトリ直下に
というファイルが作成される。
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に以下を追加。
{ 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-plugin-react-helmet",
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の部分は各自の環境に合わせて文字列を設定する。
<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">
のようなタグが出力される。
<Helmet title="xxxxx" > </Helmet>
の部分の効果により、htmlソースのheadタグ内に
<title>xxxxx</title>
のようなタグが出力される。
<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">
のようなタグを生成する。
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
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になるので注意。
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解説を参考に、
プロジェクトの.cacheディレクトリにあるdefault-html.jsファイルをコピーして、
srcディレクトリにhtml.jsというファイルを作成する。
<head>タグの末尾に自動広告用のコードを追加する。
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, }
追加した部分だけ抜粋。
{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ファイルを新規作成。
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ファイルを新規作成。
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