🦥

Gatsbyを使ってMarkdownをサクッとWeb公開してみる

2022/11/30に公開

Firebase

Gatsbyという静的サイトジェネレーターが人気を集めています。
Reactをもとに作られており豊富なプラグインがあることが特徴です。
今回はそんなGatsbyを使ってMarkdownから静的サイトを作る方法について書いていきます。

MarkdownからHTMLへの変換部分はこちらのプラグインを使います。

GitHubでMarkdownを表示したような見た目にしたかったのでこちらのパッケージを利用しています。

Gatsbyでプロジェクトを作成

以下のコマンドを実行してサイト名などを入力します。

npm init gatsby

構築が終わったらフォルダに移動してローカルサーバーを起動してみます。

npm run develop

うまくいけば http://localhost:8000/ にアクセスするとデフォルト画面が表示されるはずです。

Markdwonをパース

まずは必要なライブラリをインストールしておきます。

npm i gatsby-source-filesystem gatsby-transformer-remark

利用するプライグインの指定をするために gatsby-config.js に以下を追記します。

plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/sample.md`,
      },
    },
    `gatsby-transformer-remark`,

読み込む対象のMarkdownファイルは ${__dirname} を使って指定することが可能です。

試しに以下の sample.md を読み込んでみます。

# マークダウンのサンプルです

リストの例
- １つ目のアイテム
- ２つ目のアイテム
- ３つ目のアイテム

テキスト内で強調する例  
これは**サンプル**です。

テーブルの例
|ラベルA|ラベルB|
|:---|:---|
|AAA1|BBB1|
|AAA2|BBB2|
|AAA3|BBB3|

引用の例
> 引用テキスト

ソースコードの例
｀｀｀
npm run develop
｀｀｀

Gatsbyでは読み込んだデータを GraphQL 経由で取得することができます。
http://localhost:8000/___graphql にアクセスするとGUIツール（GraphiQL）が表示されるのでこれを使ってMarkdownの内容が取得できるか確認します。

GraphiQLの左のタグから allMarkdownRemark > edges > node > html にチェックを入れて実行すると sample.md の内容を html に変換したものを取得でき以下のように出力されるはずです。

これをコンポーネント側で呼び出すには pages/index.js を以下のように変更します。

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

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

export const query = graphql`
  query IndexPageQuery {
    allMarkdownRemark {
      nodes {
        html
      }
    }
  }
`;

export default IndexPage;

http://localhost:8000/ にアクセスすると取得したhtmlが描画されます。

見た目を整える

リストや強調に関してはそれなりに見やすくなっていますがテーブルやソースコードの見た目が微妙なので見やすくしていきます。github-markdown-css を使うとGitHubでREADMEを表示させたようないい感じの見た目を再現できるので採用しました。

npm でインストールして pages/index.js でインポートします。

import "github-markdown-css";

クラスを指定したいので描画部分を以下のように変更します。

<article className="markdown-body">
  <div
    dangerouslySetInnerHTML={{
      __html: data.allMarkdownRemark.nodes[0].html,
    }}
  ></div>
</article>

ブラウザで開くと見た目がいい感じになりました。

デプロイ

Web公開するためにFirebase Hostingを採用しました。Gatsby Cloudという新しいサービスがありGatsby製のサイトと相性良さそうですが無料プランだと１サイトしかホスティングできない点をデメリットに感じています。

Firebase CLIを使うことでGitHubとFirebaseを連携しリポジトリにマージやプッシュした際にビルドされるようにできます。やり方の詳細は以下のブログ記事を参考にさせて頂きました。
https://kimuralog.com/?p=632

まとめ

Gatsbyを使うとあっという間に静的サイトの構築ができデータを取得する部分もGraphQLを使って楽に実装できるので使い易かったです。人気が高まってきているのも納得です。

今回はGatsbyを使ってMarkdownから静的サイトを作る方法について解説しました。見た目の調整や独自のCSSを設定することも可能です。何かの参考になれば幸いです。

参考

Gatsby Quick Start
Gatsby Plugin Library
React & Gatsby開発入門 (技術の泉シリーズ（NextPublishing）) Kindle版

Gatsbyでプロジェクトを作成

Markdwonをパース

見た目を整える

デプロイ

まとめ

参考

Discussion