Gatsby で雑にマークダウン形式ブログを作る

「そうだ、自作ブログを作ろう。」
「どうせなら Qiita の記事をそのままブログに載せられるようにしたい。」
「もっというと、マークダウン形式のファイルをそのままブログに突っ込めるようにしたい。」
「でも面倒なことはしたくない。サーバーすら立てたくない」

こんなわがままでもブログが作れてしまいます。
そう、Gatsby ならね。

前準備

npm がインストールされている前提で進めます。
まずは Gatsby のプロジェクトを作成しましょう
公式のチュートリアルを見つつ、コマンドをぽちぽち叩いていきましょう。

npm install -g gatsby-cli
gatsby new {任意のプロジェクト名}

これで完了です。早い。
生成されたディレクトリに移動し、npm run developを実行することで Gatsby のデフォルトページが閲覧できます。
TypeScript を使いたい場合はsrc/pagesディレクトリ中のjsファイルの拡張子をtsxに変えましょう。もともと TypeScript での開発も想定されているようで、これだけで機能します。すごい。

マークダウンファイルのパース

下準備はできたので、早速本題に入りましょう。
マークダウンをパースするためにはgatsby-transformer-remarkを使います。
npm install gatsby-transformer-remarkでインストールし、gatsby-config.jsに設定を加えましょう。

gatsby-config.js

  plugins: [
    `gatsby-transformer-remark`,
  ],

プラグイン項目に記述を追加するだけで動作してくれます。

次に、実際に読み込みたいマークダウンファイルを追加します。
プロジェクトのルートディレクトリ配下ならどこでもいいのですが、今回はsrc/markdown配下に追加することとします。
適当に記述したマークダウンファイルを配置できたら、再びgatsby-config.jsに記述を追加しましょう。

gatsby-config.js

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `markdown`,
        path: `${__dirname}/src/markdown`,
      },
    },
  ]

こちらの設定はマークダウンファイルを Gatsby のエコシステムで認識できるようにするためのものです。

ここまで設定できたら、一度ローカル環境で起動し、http://localhost:8000/___graphqlにアクセスしてみましょう。
Gatsby では GraphQL を採用しており、様々な情報を GraphQL 経由で取得することができます。
今回追加したマークダウンファイルについても同様で、上記の設定を追加することで GraphQL から取得できようになっています。
下記のクエリを投げてみましょう。

query MyQuery {
  allMarkdownRemark {
    nodes {
      html
    }
  }
}

問題がなければ、先ほど追加したマークダウンファイルが HTML 形式で取得できているはずです。

Gatsby への追加

では、上記で取得できた HTML を Gatsby に追加していきましょう。
先ほど行った修正により、マークダウンファイルを HTML 形式で GraphQL 経由で取得することができるようになっています。
Gatsby ではこの GraphQL を利用することができます。

index.js

import * as React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"

export const query = graphql`
  query MyQuery {
    allMarkdownRemark {
      nodes {
        id
        html
      }
    }
  }
`

const IndexPage = ({data}) => (
  <Layout>
    <div dangerouslySetInnerHTML={{__html: data.allMarkdownRemark.nodes[0].html}}></div>
  </Layout>
)

export default IndexPage

GraphQL で取得したデータは、引数にdataを指定することで読み込むことができます。簡単ですね。
HTML 形式で取得しているので、あとはそのまま出力するように突っ込むだけです。

今回利用しているdangerouslySetInnerHTMLは React で提供されている属性です。
わざわざdangerouslyとしているのは XSS の危険性があるためです。詳しいことは公式のドキュメントを参照してください。

あとはnpm run developなどで結果を確認するだけです。
うまく設定できていれば、マークダウンファイルの中身がちゃんと表示されているはずです。

おわりに

というわけで、Gatsby なら簡単にマークダウン形式のブログが作れるよ、という記事でした。
私は上記に加え Github Pages を利用することで、簡単な俺俺ブログにしています。
厳密には Qiita では改行コードがそのまま改行として扱われますが、今回作成したものではちゃんとスペースを2つ並べなければ改行されません。
とはいえあとはほぼそのままで動きますし、改行させるだけなら大した手間ではないでしょう。
Gatsby は便利だなぁ。