gatsby5でmarkdownを構築する方法

ソフトウェアバージョン構成

下記にソフトウェアのバージョン構成が記載されています。

• @mdx-js/react: ^2.3.0
• gatsby: ^5.13.2
• gatsby-plugin-image: ^3.13.1
• gatsby-plugin-manifest: ^5.13.1
• gatsby-plugin-mdx: ^5.13.1
• gatsby-plugin-sharp: ^5.13.1
• gatsby-remark-images: ^7.13.1
• gatsby-remark-mermaid: ^4.0.0
• gatsby-remark-prismjs: ^7.13.1
• gatsby-remark-relative-images: ^2.0.5
• gatsby-source-filesystem: ^5.13.1
• gatsby-transformer-remark: ^6.13.1
• gatsby-transformer-sharp: ^5.13.1
• puppeteer: ^22.3.0
• react: ^18.2.0
• react-dom: ^18.2.0

フォルダ構成

「*」は新規作成するファイル、フォルダを示しています。「**」は変更する既存のファイル、フォルダを指します。

.
├── LICENSE
├── README.md
├── gatsby-browser.js
├── gatsby-config.js**
├── gatsby-node.js
├── gatsby-ssr.js
├── node_modules
├── package-lock.json**
├── package.json**
├── public
└── src
       ├── components
       │   ├── header.js
       │   ├── index.module.css
       │   ├── layout.css
       │   ├── layout.js
       │   └── seo.js
       ├── content*
       │   └── test.md*
       ├── images
       │   ├── example.png
       │   ├── gatsby-icon.png
       │   └── info_black_18dp.svg
       ├── pages
       │   ├── 404.js
       │   ├── blog*
       │   │   └── {markdownRemark.frontmatter__slug}.jsx*
       │   ├── index.js
       │   ├── page-2.js
       │   ├── using-ssr.js
       │   └── using-typescript.tsx
       └── templates
           └── using-dsg.js

gatsby-starter-defaultの構築

下記のコマンドを実施する

$ npx gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
$ cd gatsby-starter-default
$ npm install
$ npm run develop

markdonwの構築

パッケージインストール

下記のパッケージをインストールする。

$ npm install @mdx-js/react gatsby-plugin-mdx gatsby-transformer-remark

gatsby-config.jsの変更

下記のフォルダとファイルを作成する

$ mkdir src/content
$ touch src/content/test.md

下記の通りにgatsby-source-filesystemとgatsby-transformer-remarkをgatsby-config.jsに追加、変更する

module.exports = {

  // ~~~ 中略 ~~~

  plugins: [
    // ~~~ 中略 ~~~
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `content`,
        path: `${__dirname}/src/content`,
      },
    },
    `gatsby-transformer-remark`,
  ],
}

gatsby-config.js

src/pages/blog/{markdownRemark.frontmatter__slug}.jsx をファイルを作成し、下記のとおりに記述する。

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

export default function BlogPostTemplate({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  return (
    <div>
      <div>
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <div
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  )
}

export const pageQuery = graphql`
  query($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`

{markdownRemark.frontmatter__slug}.jsx

下記の通りにmarkdownを書いてください。

---
slug: "/test"
date: "2022-11-24"
title: "My first blog post"
---

test.md

アクセス

下記のurlに接続して動作確認をする。

$ npm run develop

アクセス先: http://localhost:8000/blog/test/

mermaidの構築

パッケージインストール

下記のパッケージをインストールする。

$ npm install gatsby-remark-mermaid puppeteer

gatsby-config.jsの変更

下記の通りにpuppeteerとgatsby-remark-mermaidとgatsby-remark-relative-imagesをgatsby-config.jsに追加、変更する

const puppeteer = require('puppeteer');

module.exports = {

  // ~~~ 中略 ~~~

  plugins: [
    // ~~~ 中略 ~~~

    // mermaidの設定値
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-mermaid`,
            options: {
              launchOptions: {
                executablePath: puppeteer.executablePath(),
              },
              svgo: {
                plugins: [{ name: 'removeTitle', active: false }]
              },
              mermaidOptions: {
                theme: 'neutral',
                themeCSS: '.node rect { fill: #fff; }'
              },
            },
          }
        ],
      },
    }
  ],
}

gatsby-config.js

下記をmarkdownに追記する。追記したら開発機につなげて動作確認を行ってください。

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

画像の構築

パッケージインストール

下記のパッケージをインストールする。

$ npm install gatsby-remark-images gatsby-remark-relative-images

設定値変更

gatsby-remark-relative-imagesとgatsby-remark-imagesを設定に追加する。

const puppeteer = require('puppeteer');

module.exports = {

  // ~~~ 中略 ~~~

  plugins: [
    // ~~~ 中略 ~~~
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            // mermaild設定値
            resolve: `gatsby-remark-mermaid`,
            options: {
              launchOptions: {
                executablePath: puppeteer.executablePath(),
              },
              svgo: {
                plugins: [{ name: 'removeTitle', active: false }]
              },
              mermaidOptions: {
                theme: 'neutral',
                themeCSS: '.node rect { fill: #fff; }'
              },
            },
          },
          //　画像用設定値
          `gatsby-remark-relative-images`,
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 700,
            },
          },
        ],
      },
    }
  ],
}

gatsby-config.js