Gatsby + WordPress + Vercelで静的サイトを作ってみよう
GatsbyJS (ギャツビー) とは React製のフレームワークで静的サイトを作成することができます。
ユーザーがアクセスするたびに処理する WordPressなどのCMSとは違い、静的なHTMLを表示するのでサイトの表示高速化が期待できます。
Gatsbyではマークダウンファイル(.md)で管理できるのが魅力ですが、WordPressのブロックエディターのようなやや複雑なレイアウトは組めません。
ブログを作るなら使い慣れたWordPressのほうがいいですよね。なんだかんだ言われますが結構使いやすいと思っています。
GatsbyにWordPressに対応させるプラグインを入れることで記事データを取得し、表示させることが可能になります。
いわゆるヘッドレスCMSとしてWordPressの編集画面を使いつつ、静的サイトで表示の高速化をしたい場合に試してみてはいかがでしょうか。
WordPressで投稿 > 自動ビルド > Vercelで静的サイトを表示
※2020年12月時点 Gatsby のWordPress対応 プラグイン gatsby-source-wordpress-experimental は開発版です。
WP静的サイト化のメリット・デメリット
メリット
■ 表示の高速化
静的なファイル(HTML)を表示することで余計な通信が発生しないのでブラウザの描画が速くなります。
■ WordPressの管理画面をそのまま使える
いつも使っているWordPressの編集画面から記事を投稿することができます。ブロックエディタでリッチな装飾も可能ですがWordPressで設定しているテーマは使えないので、自分でスタイルを追加する必要があります。
■ 画像の最適化
プラグインを使うことで、デバイスに合った最適なサイズの画像を表示します。
■ セキュリティ
WP(WordPress)は世界中のユーザーが利用しており常に攻撃者がセキュリティの穴を狙っています。
WPを静的サイトにしてしまうことで意図をしない外部からの操作(不正ログインなど)のリスクを下げられます。また、Headless ModeというWordPressプラグインを使うことでもしWordPressサイトへアクセスしてきても静的サイトへリダイレクトさせることができます。
デメリット
■ 記事を更新するたびにビルド・デプロイが必要
WPの記事を投稿しても、静的サイト側では新しい記事は表示されません。記事の更新のたびにビルドが必要となります。WP のプラグインとVercelのAPI使うことで投稿時に自動ビルドが可能になります。
■ 動的なコンテンツは利用できない
検索やコメント、コンタクトフォームなどは使えないので、外部のサービスを利用する必要があります。
■ WordPress用のサーバーを用意
プラグインをインストールできるWordPressの環境が必要です。
■ WordPress ブロックエディタに完全対応したスターターがない
WordPressを簡易表示できるスターターはありますが、よくあるブログのようにヘッダーバーやサイドバーをつけたり、SEOを意識したサイトづくりをする場合はそれなりのカスタマイズが必要です。
■ Javascript、Reactの知識が必要
全く使ったことがない場合は複雑に感じると思います。UdemyでJavascriptを学習しておくだけでもある程度理解の助けになりますよ。
【JavaScript＆CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）
事前準備
npm を使える状態にしておきましょう。また、Githubの登録、インストールも必要です。
yarn をインストール
npm install -g yarn
# インストールを確認
yarn -vGatsby をインストール
yarn global add gatsby-cliスターターをインストール
[プロジェクト名]に任意の名前をつけて、インストールしたいディレクトリで実行。
gatsby new [プロジェクト名] https://github.com/gatsbyjs/gatsby-starter-blogプロジェクトディレクトリへ移動。ここではblogとする
cd blog開発環境を立ち上げる
gatsby develpしばらく待つと、「You can view [プロジェクト名] in the browser」と表示されるのでブラウザで http://localhost:8000/ にアクセスしてみましょう。
なにも設定していないので、見出しと要約だけのシンプルなブログが表示されます。
表示の確認ができたら、Ctrl + C でサーバーを停止しておきましょう。
ちなみにローカルのIPアドレス、ポートを変更するには以下のようにします。
gatsby develop -H 192.168.100.X -p 5000WordPress にプラグインを追加
ここでWordPressの管理画面を開いてこの3つのプラグインをインストールします。
JAMstack Deployments
WP GraphQL
WP Gatsby
JAMstack Deploymentsは 記事投稿・更新時に netlifyやVercelで自動ビルドするためのプラグイン
WP GraphQL、WP GatsbyはGraphQLというAPIをWPで利用するためのものです。設定はあとで行うのでインストールのみでOKです。
※本番利用する場合はWPに Headless Mode というプラグインを入れることで静的サイトへリダイレクトさせることができます。
Gatsby にプラグインをインストール
WordPress の GraphQL を読み込むプラグインと、ブロックエディタ用のライブラリをインストール
yarn add gatsby-source-wordpress-experimental @wordpress/block-library続いて、画像最適化プラグインをインストール
yarn add gatsby-image gatsby-plugin-sharp gatsby-transformer-sharpgatsby-config.js を編集
続いて、プロジェクトのディレクトリを開いて「gatsby-config.js」をエディタで編集します。
プロジェクト名/gatsby-config.js
siteMetadata内のtitle、URLを自分のブログ名、URLに変更します。ただしこのデータを表示させるにはテンプレート側から読みこまなければなりません。
siteMetadata: {
title: `ブログタイトル`,
author: {
name: `管理者名`,
summary: `要約`,
},
description: `サイトのメタディスクリプション`,
siteUrl: `https://サイトURL/`,
social: {
twitter: `twitter`,
},
},plugins: [ の直下でいいので下記を挿入しましょう。
{
resolve: `gatsby-source-wordpress-experimental`,
options: {
url:
`https://サイトURL/graphql`,
schema: {
typePrefix: `Wp`,
},
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,これでWPのデータを読み込めるようになりましたが、サイト側の表示は変わりません。
トップページ、投稿ページ、そしてページを生成するノードを編集していきましょう。
投稿ページを編集
src/templates/blog-post.js
内容をすべて消去して下記に置き換え
import React from "react"
import Layout from "../components/layout"
import { Link, graphql } from "gatsby"
export default ({ data }) => {
const post = data.allWpPost.edges[0].node
console.log(post)
return (
<Layout>
<Link to={data.site.siteMetadata.siteUrl}>
<p>{data.site.siteMetadata.title}</p>
</Link>
<div>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
<p> On: {post.date} </p>
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
site {
siteMetadata {
title
siteUrl
}
}
allWpPost(filter: { slug: { eq: $slug } }) {
edges {
node {
title
content
slug
date(formatString: "YYYY/MM/DD")
featuredImage {
node {
localFile {
childImageSharp {
fluid {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
}
}
}
}
}
`layout.js を編集
src/components/layout.js
内容をすべて消して下記に置き換えます。
import React from "react"
import "@wordpress/block-library/build-style/style.css"
import "@wordpress/block-library/build-style/theme.css"
export default ({ children }) => {
return (
<div>
{children}
</div>
)
}CSSでスタイルをカスタマイズしたい場合は src/style.cssを編集。
もしくは layout.js に
import "./style.css"
として、src/components に style.css を作成しておきましょう。
トップページ を編集
src/pages/index.js
内容をすべて消して下記に置き換えます。
import React from "react"
import { Link, graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Img from "gatsby-image"
export default ({ data }) => {
return (
<Layout>
<SEO />
<Link to={data.site.siteMetadata.siteUrl}>
<h1>{data.site.siteMetadata.title}</h1>
</Link>
<div className="l-article_lists">
{data.allWpPost.edges.map(({ node }) => (
<div className="l-article_list">
<Link to={node.slug}>
{node.featuredImage && <Img fluid={node.featuredImage.node.localFile.childImageSharp.fluid}/>}
</Link>
<Link to={node.slug}><h2>{node.title}</h2></Link>
<div className="article-list_meta">
<span>{node.categories.nodes[0].name}</span>
<span>{node.modified}</span>
</div>
</div>
))}
</div>
</Layout>
)
}
export const pageQuery = graphql`
query {
site {
siteMetadata {
title
siteUrl
}
}
allWpPost(sort: { fields: [modified] , order: DESC}
skip: 0
limit: 10 ) {
edges {
node {
title
modified(formatString: "YYYY/MM/DD")
categories {
nodes {
name
}
}
excerpt
slug
featuredImage {
node {
localFile {
childImageSharp {
fluid(maxWidth: 1024) {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
}
}
}
}
}
`投稿ページへのノード
src/gatsby-node.js
全部消して書き換える
const path = require(`path`)
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return graphql(`
{
allWpPost(sort: { fields: [date] }) {
nodes {
title
excerpt
content
slug
}
}
}
`).then((result) => {
//highlight-start
result.data.allWpPost.nodes.forEach((node) => {
createPage({
path: node.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
slug: node.slug,
},
})
})
//highlight-end
})
}表示を確認
開発サーバーが起動している場合は一度 Ctrl + C で停止して起動し直します。
gatsby develophttp://localhost:8000/ にアクセスして記事一覧が表示されるか確認してみましょう。
また、リンクをクリックして記事を確認してみます。
WPのテーマは適用されないのでシンプルな表示になっているはずです。トップページなどは自分で作るかネット上にあるHTMLテンプレートをカスタマイズすることができますので挑戦してみて下さい。
src/style.css にこんなふうに追記
.l-article_lists {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 16px;
}使用しているWPテーマのスタイルシートをコピーして、gatsbyのstyle.css に入れておくと完全ではないですがブロックを表示できます。
Github にレポジトリを作成
Githubにログインして任意の新規レポジトリ(プライベート)を作成。
ローカルのGatsbyプロジェクトをpush
cd blog (プロジェクト名)
git add .
git commit -m "gatsby"
git push origin masterVercel と連携
netlifyでもよいですが、情報が少ないのでVercelでのやり方を紹介します。
右上の「Sign Up」から Github のアカウントと連携することですぐに利用できます。
登録後Dashboard を開いて、プロジェクトを選択 >「import Project」をクリックしてさきほど作ったGithubのレポジトリを選択します。
ドメインを持っていれば、サブドメインなどを割り当てることもできます。
Deploy hook URLを取得
Settings > Git > Deploy Hooks
任意の Hook name と ブランチ名 (ここでは master )を入力してURLを取得します。
WordPress の管理画面 > 設定 > Deployment から Build Hook URL に取得したURLを貼り付けましょう。これで記事を更新すると自動でビルドできます。
またgit push してもビルドが実行されます。
まだ発展途上
WordPressを Gatsby で最低限利用する方法を紹介しました。プラグインを追加することでより使いやすくなりますのでドキュメントを見ながらカスタマイズしてみましょう。
URL正規化 gatsby-plugin-canonical-urls
SASS/SCSS対応 gatsby-plugin-sass node-sass
サイトマップ作成 gatsby-plugin-sitemap
ツイッター埋め込み gatsby-plugin-twitter
Google アナリティクス gatsby-plugin-google-analytics
私が作成したデモサイト(途上)
WordPress のテーマは THE SONICを使っているので、ブロックのスタイルは流用しています。
参考になるサイト
補足
gatsby-wordpress-experimental-inline-images という WordPress記事の画像を最適化するプラグインを導入してみましたがうまく動きませんでした。
この記事が気に入ったらサポートをしてみませんか？