ebiebievidence.com

私について  /  RSS

ブログをGatsbyJS v2で実装したらめちゃくちゃ楽だった

January 18, 2019

B!

目次

目的

ブログをすべて自前で実装するのは、とても楽しい。 ありとあらゆる部分を、自分でカスタマイズできる。 一方で、その茨の道は本当にやりたくないことで溢れている。

  • OGP 対応(と、そのための SSR)
  • RSS 対応
  • コードのシンタックスハイライト

GatsbyJS v2 なら、これらをプラグインと多少のコードで済ませることができる。 本記事では、これらを一つずつ解消していく。

想定する読者

  • React でのコーディング経験がある
  • Markdown でブログ記事を書きたい

GatsbyJS とは?

GatsbyJS とは、React を利用する静的サイトジェネレータである。 GatsbyJS に関する日本語の詳しい記事としては、以下を参照されたい。

また、ちゃんとしたチュートリアルを望むのであれば、以下を参照されたい。

GatsbyJS のインストールとプロジェクト作成

まず、GatsbyJS のための CLI をインストールする。

npm i -g gatsby-cli

次に、Gatsyby CLI によって、プロジェクトを作成する。 GatsbyJS でのプロジェクト作成時は、「Starter」と呼ばれるテンプレートを利用出来る。

gatsby new プロジェクト名 利用するStarterのURL

今回は、Markdown による記事執筆が可能なgatsby-starter-blogを利用する。 gatsby-starter-blog

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
cd blog
yarn

開発環境は、yarn startで起動し、http://localhost:8000から表示できる。 また、yarn buildでビルドが行われ、publicディレクトリに出力される。

GatsbyJS の構成

├─ gatsby-browser.js
├─ gatsby-config.js
├─ gatsby-node.js
├─ package.json
├─ static
├─ public
├─ src
│   ├─ components
│   ├─ pages
│   └─ templates

src/pages/

ページを定義する。 src/pages/hello.jsから React コンポーネントを export することで、http://localhost:8000/helloからそのページを表示することが出来る。

import React from 'react'
import { graphql } from 'gatsby'

// Page コンポーネント
export default () => (
  <div>
    <h1>こんにちは〜</h1>
  </div>
)

ただし、ページはgatsby-node.jsから Gatsby Node APIs を経由して作成することも出来る。

gatsby-config.js

サイトのメタデータや、利用するプラグインなどを定義する。

gatsby-browser.js

ブラウザでの表示時に実行される部分を書く。 今はあまり気にしなくていい。

gatsby-node.js

Gatsby Node APIsとやり取りをする。 Node については後述する。 今はあまり気にしなくていい。

src/templates/

gatsby-node.jsからページを作成する際に使用するテンプレートを記述する(場合が多い)。

src/components/

src/pagessrc/templatesで利用する React コンポーネントを定義する(場合が多い)。

GatsbyJS におけるリソース

GatsbyJS では、画像・テキストファイル・設定ファイル・外部 API など、すべてのリソースは「データ」と呼ばれる。 ページからデータへのアクセスは、gatsby が提供する GraphQL API を経由して行うことができる。 また、GatsbyJS では、データはNode という単位で扱われる。

以下に、about ページからデータへアクセスする例を示す。

// src/pages/about.js
import React from 'react'
import { graphql } from 'gatsby'
import Layout from '../components/layout'

// ページ
export default ({ data }) => (
  <Layout>
    <h1>{data.site.siteMetadata.title}について</h1>
    <p>
      このページでは、私の飼っている可愛いチンパンジーを紹介しています。
      <br />
    </p>
  </Layout>
)

// graphqlを通じてdataへアクセスする
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

Source プラグインは、外部 API からの出力やファイルの内容を読み込んで、Node を追加することができる。 例えば、ファイルを読み込んで Node として扱うためには、gatsby-source-filesystemプラグインを利用する。

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
  ],
}

Transformer プラグインは、Source プラグインによって提供されたデータを新しいノードやノードフィールドに変換することができる。 例えば、Markdown ファイルを Nodegatsby-transformer-remarkプラグイン

記事の作成

content/blog/${記事パス}/index.md に記事を書くことで、http://localhost:8000/${記事パス}に記事が表示される。記事タイトルと作成日時は、YAML 形式で記事の冒頭に書く。 この YAML によってメタデータが書かれた部分は、frontmatter ブロックと呼ばれる。

---
title: test
date: '2019-01-18T00:00:00.000Z'
---

yo

OGP を設定する

実は、既にsrc/components/seo.jsにて OGP/SEO 対策の為の Component が実装されている。 また、その Component はsrc/templates/blogPost.jsから読み込まれている。

そう、最初から全てこのスターターが既にやってくれている。ありがたい。

RSS 対応

やっぱり RSS には対応したい。gatsby-plugin-feedは、Gatsby Nodes API を経由して、allMarkdownRemarkの Node を取得した上で、RSS フィードを生成してくれる。 なお、gatsby-plugin-feedプラグインは既にこのスターターに含まれている。 また、本来であればgatsby-config.jsにこのプラグインを読み込む設定を書く必要があるが、 それもこのスターターが既にやってくれている。ありがたい。

ただし、以下の項目に注意したい。

NOTE: This plugin only generates the /rss.xml file when run in production mode! To test your feed, run: gatsby build && gatsby serve.

つまり、yarn startgatsby developで起動している場合、RSS フィードは生成されない。 gastby buildでビルドして、gastby serveで確認してみよう。

シンタックスハイライトを適用する

Markdown ファイルにコードスニペットを書いたら、やっぱりハイライトされて欲しい。 gatsby-remark-prismjs は、prismjsを利用してシンタックスハイライトする。 なお、gatsby-remark-prismjsプラグインは既にこのスターターに含まれている。 また、本来であればgatsby-config.jsにこのプラグインを読み込む設定を書く必要があるが、 それもこのスターターが既にやってくれている。ありがたい。

src/templates/blog-post.jsにシンタックスハイライトのテーマ CSS を読み込ませる。

import 'prismjs/themes/prism-tomorrow.css'
import 'prismjs/plugins/line-numbers/prism-line-numbers.css'

また、gatsby-remark-prismjs では特定の行をハイライトすることもできる。詳細はgatsby-remark-prismjs の公式ドキュメントを参照されたい。

私について

EbiEbiEvidence
株式会社ディー・エヌ・エーでエンジニアをしています。もっと詳しく

よかったらこの記事をシェアしてください:
B!