2021年度版 Wordpress × Gatsby.jsで高速ブログ作成
Wordpress × Gatsby.jsでブログ作成!
WordpressをヘッドレスCMSとして、Gatsby.jsでスタイリングしてブログ作成したいな~と思い(以前はcontentfulを使っていたのですが、いまはプランなどが結構変わり有料じゃないと使えなかったりしてしまったので)、早速やってみました。
このWordpressとGatsby.jsを組み合わせるやり方は珍しくもないので、検索するとブログやチュートリアルもたくさん出てくるのですが、公式の設定などが1年程でだいぶ変わっていて、ちょっと手間取ってしまったのでここに記録がてら残していこうと思います。
まず、Wordpressで自分用ブログを作成
これはローカルホストで自分のPC上でホスティングするWordpressでもいいですし、既存のWordpressドメインのブログを作ってもいいですし、私はとりあえずエックスサーバーを契約してここにWordpressを入れてみました。
Wordpressにプラグインを導入する
Gatsby.jsでWordpressを使うには、プラグインを2つ導入する必要があります。
管理用アカウントの「プラグイン」から1. WP Gatsbyと2. WP GraphQLを追加し、これを「有効化」します。
Gatsby.jsのプロジェクトフォルダを作成する
ここでは詳しくGatsby.jsの入門方法を説明するつもりはないですが、任意ディレクトリへ以下コマンドでスターターフォルダを作成します。(Gatsby.js公式にはスタンダードなスターターフォルダ以外に色々なものが用意されているので、そこからDLしてくるのもありでしょう。)
gatsby new 任意のプロジェクト名
GatsbyフォルダへWordpressのプラグインをインストールする
プロジェクトフォルダで以下コマンドを叩くだけです。
npm install gatsby-source-wordpress
gatsby-config.jsにWordpress情報を記載する
gatsby-config.jsに{resolve}
以下を追加します。
module.exports = {
...
plugins: [
...,
{
resolve: `gatsby-source-wordpress`,
options: {
url:
// allows a fallback url if WPGRAPHQL_URL is not set in the env, this may be a local or remote WP instance.
process.env.WPGRAPHQL_URL ||
`https://localhost/graphql`,
schema: {
//Prefixes all WP Types with "Wp" so "Post and allPost" become "WpPost and allWpPost".
typePrefix: `Wp`,
},
develop: {
//caches media files outside of Gatsby's default cache an thus allows them to persist through a cache reset.
hardCacheMediaFiles: true,
},
type: {
Post: {
limit:
process.env.NODE_ENV === `development`
? // Lets just pull 50 posts in development to make it easy on ourselves (aka. faster).
50
: // and we don't actually need more than 5000 in production for this particular site
5000,
},
},
},
},
]
}
これは公式から持ってきただけですが、url
に自分のWPのURL+/graphql
を貼り付けます。
この状態でnpm start
すると、localhost:8000/__graphql
にアクセスした状態で、ブログ投稿情報が取得できます。
Topページを編集する
このままだと何もGatsbyの方には表示されないので、index.js
をいじって投稿を表示させてみます。
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
const Index =
({ data }) => {
return (
<Layout>
<SEO title="home" />
<h4>Posts</h4>
{data.allWpPost.edges.map(({ node }) => (
<div>
<p>{node.title}</p>
<div dangerouslySetInnerHTML={{ __html: node.excerpt }} />
</div>
))}
</Layout>
)
}
export const pageQuery = graphql`
query {
allWpPost(sort: { fields: [date] }) {
edges {
node {
title
excerpt
}
}
}
}`
export default Index
出来ました!さくっとここまで割と簡単に出来ました。
あとは自分用に色々カスタマイズするだけです。
Author And Source
この問題について(2021年度版 Wordpress × Gatsby.jsで高速ブログ作成), 我々は、より多くの情報をここで見つけました https://qiita.com/bell_007/items/a64af1e5d0a6986b1e2a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .