MatxへのGatsby remarkブログの移行

この記事では、MDXを使用するために定期的にギャツビーのブログを移行する方法を紹介します.

MDXブログの設定

MDXでは、JSXをMarkdownで使用できます.あなたがMarkdownを使っている既存のギャツビーブログを持っているならば、MDXに移行するための簡単なガイドはここにあります.
出発点として、我々は使用しますGatsby starter blog すぐに私たちのブログを設定します.MDXを使用するために、この定期的なMarkdownブログを回しましょう.
まず、端末を開き、新しいサイトを作成しますgatsby-starter-blog テンプレート.

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

すぐにサイトのディレクトリに移動します.

cd my-blog

MDXプラグインの追加

まず、私たちのブログのMDXサポートを追加する必要があります.インストールしましょうgatsby-plugin-mdx プラグインとその依存関係.また、既存のgatsby-transformer-remark プラグイン.

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

あなたは正しいバージョンをインストールする必要がありますそれ以外の場合、動作しません.
今すぐ更新する必要がありますgatsby-config.js ファイル.置換gatsby-transformer-remark with gatsby-plugin-mdx そして、plugins オプションgatsbyRemarkPlugins .

// gatsby-config.js

{
-     resolve: `gatsby-transformer-remark`,
+     resolve: `gatsby-plugin-mdx`,
      options: {
-       plugins: [
+       gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 630,
            },
          },
          // Other Gatsby remark plugins
        ],
      },
}

Gatsbyノードの更新。js

次に、gatsbyにMDXを使うように指示する必要があります.移動するgatsby-node.js を返します.allMarkdownRemark with allMdx .

// gatsby-node.js

const result = await graphql(
    `
      {
-       allMarkdownRemark
+       allMdx(
          sort: { fields: [frontmatter___date], order: ASC }
          limit: 1000
        ) {
          nodes {
            id
            fields {
              slug
            }
          }
        }
      }
    `
  )

また、変更posts 定数.

// gatsby-node.js
- const posts = result.data.allMarkdownRemark.nodes
+ const posts = result.data.allMdx.nodes

さらに、我々は変更する必要がありますonCreateNode 使うMdx の代わりにMarkdownRemark .

// gatsby-node.js
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions
-  if (node.internal.type === `MarkdownRemark`) {
+  if (node.internal.type === `Mdx`) {
    const value = createFilePath({ node, getNode })

    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

最後にcreateSchemaCustomization フックチェンジMarkdownRemark to Mdx

// gatsby-node.js
exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions

  createTypes(`
    // Previous types
-   type MarkdownRemark implements Node {
+   type Mdx implements Node {
      frontmatter: Frontmatter
      fields: Fields
    }
    // Other stuff

  `)
}

ブログ投稿テンプレートの更新

次に、ブログ投稿テンプレートを更新する必要がありますsrc/templates/blog-post.js . The MDXRenderer コンポーネントは、.mdx ファイルをインポートしましょう.

// src/templates/blog-post.js

import { MDXRenderer } from 'gatsby-plugin-mdx';

ここで、GraphSQLクエリでは、markdownRemark with mdx そして、html フィールドbody .

// src/templates/blog-post.js

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
-   markdownRemark(id: { eq: $id }) {
+   mdx(id: { eq: $id }) {
      id
      excerpt(pruneLength: 160)
-     html
+     body
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
    }
-   previous: markdownRemark(id: { eq: $previousPostId }) {
+   previous: mdx(id: { eq: $previousPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
-   next: markdownRemark(id: { eq: $nextPostId }) {
+   next: mdx(id: { eq: $nextPostId }) {
      fields {
        slug
      }
      frontmatter {
        title
      }
    }
  }
`

削除するsection タグを追加MDXRenderer コンポーネント.その後、post 使用定数mdx .

// src/templates/blog-post.js
- <section dangerouslySetInnerHTML={{ __html: post.html }} itemProp="articleBody"/>
+ <MDXRenderer>{post.body}</MDXRenderer>

// src/templates/blog-post.js
- const post = data.markdownRemark
+ const post = data.mdx

ホームページの更新

The src/pages/index.js ファイルを変更する必要があります.我々がしたことに似ているsrc/templates/blog-post.js , 我々はすべての発生を変更する必要がありますallMarkdownRemark with allMdx .
まず、変更posts 定数

// src/pages/index.js
- const posts = data.allMarkdownRemark.nodes
+ const posts = data.allMdx.nodes

次に、GraphSQLクエリを変更します.

// src/pages/index.js
export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
-   allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+   allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
        }
      }
    }
  }
`

ページの使用方法allMarkdownRemark そしてallMdx .

ファイル拡張子の更新

我々は何も持っていないので.mdx ファイルは、両方を受け入れるためにギャツビーに言いましょう.md and .mdx エクステンション、我々はまだ我々の既存を使用することができます.md ファイル.インgatsby-config.js 追加するextensions オプションgatsby-plugin-mdx 拡張子の配列を渡します.

// gatsby-config.js

{
    resolve: `gatsby-plugin-mdx`,
    options: {
+     extensions: [`.md`, `.mdx`],
      // Other options
    },
  },

今ちょうどあなたがヒットする必要がありますgatsby develop そして、あなたの素晴らしいを参照してください
MDXブログアップ.

エラーの修正

を、おそらく動作しませんでした.それで、私が直面した若干の誤りは、ここにあります、そして
どのように私はそれらを修正しました.

1グラムエラー

あなたはおそらく上記の手順のいずれかを逃した.もう一度それを通過し、何を逃したを見つける.また、すべてのGraphSQLクエリが有効かどうかを確認します.

2 .エラー: mdbount問題:予期しない問題- txnは中止すべきです

を変更してくださいcreateSchemaCustomization 使うMdxの代わりにMarkdownRemark . これがうまくいかない場合は、gatsbyキャッシュをクリアしてみてください.

gatsby clean

私の場合、その問題はまだ固執していたのでnpm キャッシュ.

npm cache clean --force

3 .不明:未終了のJSXコンテンツ。

JSXが有効であることを確認してください.以下に注意してください.

変更するclass 属性className .

すべて確認<img/> and <br/> タグは自己閉鎖です.

インラインスタイルをオブジェクトとして書き込みます.

エラー: EPERM :許可されていない操作

走ってみるgatsby clean 開発サーバーを設定する前にgatsby develop .

結論

そして、それ!私たちはMDXのブログをアップロードして実行した.エンターgatsby develop そして、あなたのブランドの新しいmdxブログを見てください.今すぐあなたのすべての反応コンポーネントを使用することができます.mdx ファイル.ハッピーブログ!