Gatsby.js + mdxでヘルプサイトを作ってみる

ヘルプ用のサイトをGatsby.js + mdxで作ってたので紹介

www.gatsbyjs.org

Gatsby.jsは、Reactベースで静的サイトを簡単に作成できるツール

MDXはMarkdownでJSXをimportして使用したり、JS側にMarkdownで記載したファイルをimportしたりできるライブラリ

この２つでサイト生成はGatsby.js、ヘルプページの記事はMDXみたいな感じでサクッとサイトを作成してみた

まず、Gatsby.jsの準備

www.gatsbyjs.org

$ npm install -g gatsby-cli
$ gatsby new gatsby-site
$ cd gatsby-site
$ gatsby develop

localhost:8000にアクセスすると以下の画面が表示 f:id:wheatandcat:20200215192306p:plain

次にGatsby.jsでMDXを使用できるようにします。

www.gatsbyjs.org

$ yarn add gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

gatsby-config.jsに以下を追加

■gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-mdx`,

　   ...（略）
  ],
}

↑を追加するMDXが使用できるようになるので、以下のファイルを追加

■ src/help/general/account.mdx

## データをローカルからクラウドへ保存

### 未ログイン時
未ログインで使用する場合は**端末のストレージ**に保存を行っています。


### ログイン時 
ログイン後は、**データをサーバー**に保存しています。


## 以下、今後実装予定の機能

 - web版へのデータ同期
 - Alexaでのスケジュール登録、確認

↑のMDXファイルをimportして

■ src/pages/general/account.js

import React from "react"
import Layout from "../../components/layout"
import HelpAccount from "../../help/general/account" // ← mdxファイルをimport
import Breadcrumbs from "../../components/help/Breadcrumbs"
import Card from "../../components/help/Card"

const breadcrumbItems = [
  { label: "ペペロアヘルプセンター", to: "/" },
  { label: "全体向け" },
  { label: "会員登録するとできること" },
]

const IndexPage = () => {
  return (
    <Layout>
      <Breadcrumbs items={breadcrumbItems} />

      <Card>
        <HelpAccount />
      </Card>
    </Layout>
  )
}

export default IndexPage

表示は、こんな感じ

f:id:wheatandcat:20200215193224p:plain