Gatsbyjs+WordPressの記事で静的サイトを作ってみた

Gatsbyjs+WordPressの記事で静的サイトを作ってみた

LINEで送る
Pocket

静的サイトジェネレーターのGatsbyjsを触ってみました。

 

Gatsybyjsのメリット

データベースにアクセスしないから早い。

最大のメリットはこれ。

動的システムだと、データベースから必要な情報を持ってきてHTMLを生成しそれを返します。

そのため状況やクエリによってはDBのレスポンスが遅く、HTMLを生成するのが遅くなってしまうこともあります。

 

静的サイトにしてしまえばDBへの問い合わせをする必要がなくなり、完成されたHTMLを返すだけで済み結果パフォーマンスが上がります。

 

それと、テンプレートがReactで書かれているので動的なコンテンツを作れるということ。

 

Gatsbyを触った感想

お試しにこのWordpressを使っているこのブログの記事データを使ってみました。

 

仕組みとしてはこんな感じ↓

ビルドするとWordpressの記事データを取得してpage-dataフォルダに記事データが書かれたjsonが作成されます。

ページにアクセスするとurlのslugに対応したindex.htmlが返され、Reactを実行。

HTMLが生成される。

だいたいの流れはこんな感じ。

 

WordPressの連携はデータベース情報を渡す必要もなく、/wp-jsonからpage-data.jsonを作ってくれます。

そのため、/wp-jsonの外部からアクセスを禁止しているとビルド中にエラーになるとのことです。

 

WordPressの記事で静的サイトを作る

gatsby-config.js

module.exports = {
  /// ここにいろんな記述
  plugins: [
    // 追記
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // WordPressのurlを書く
        baseUrl: `tech.frenps.jp`,
        protocol: `https`,
        hostingWPCOM: false,
        useACF: false
      }
    },
  ],
}

configファイルはこれでok

 

次にgatsby-node.js

const _ = require('underscore')
const path = require('path')
const PageTemplate = path.resolve("./src/templates/Page.js")
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  return graphql(`query loadPagesQuery ($limit: Int!) {
    allWordpressPost(limit: $limit) {
      edges {
        node {
          id
          slug
          title
          content
          excerpt
          date
          modified
      }
    }
  }
}`, { limit: 300 }).then(result => {
  if(result.errors){
    throw result.errors
  }

_.each(result.data.allWordpressPost.edges, edge=>{

  createPage({
    path: edge.node.id,
    component: PageTemplate,
    context: {
      id: edge.node.id,
      slug: edge.node.slug,
      title: edge.node.title,
      content: edge.node.content
    },
  })
})
})
}

 

/src/templates/Page.jsこれはテンプレートです。

ここで作ったテンプレートにWordpressの記事データを埋め込んでhtmlを作ります。

contextで宣言したものはtemplateで呼び出すことができます。

 

これがtemplate

import React from "react"
import Layout from "../components/layout"
const PageTemplate = ({ pageContext: { title, content }}) => (
  <Layout>
    <h1>{title}</h1>
  </Layout>
)
export default PageTemplate

 

gatsby developで確認すると無事表示できています。

 

まとめ

と、こんな感じでした。

Gatsbyjsはクライアントでレンダリングされます。

サーバーサイドレンダリングでないとindexされないという可能性もあるので実運用する場合は、SSR対応する必要がありそうです。

LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す