gatsby, gatsby cloud, github로 블로그 시작하기(2)

2개 이상의 filesystem 사용하기

아래와 같이 blog 포스트들을 모아둘 폴더와 tech 포스트들을 모아둘 폴더를 이용하려 한다.

│   
├── src 
│   ├── index.js    
│   ├── refer.js    
│   ├── blog    
│       ├── index.js    
│   ├── tech    
│       ├── index.js      
├── blog        
├── tech    

아래와 같이 config.js 파일에 파일시스템을 추가한다.

plugins: [
    //...
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `blog`,
        path: `${__dirname}/blog`
      },
    },
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `tech`,
        path: `${__dirname}/tech`
      },
    },
  ],

튜토리얼에서는 AllMdx를 사용하여 블로그 제목들을 보여줬지만, 여러개의 폴더를 구분하여 보여주고 싶으면 allFile을 사용한다.

const BlogPage = ({data}) =>{
    return ( 
        <Layout pageTitle="나의 기록">
            {
                data.allFile.nodes.map(node =>(
                    <article key={node.id}>
                        <h2>
                            <Link to={`/blog/${node.childMdx.frontmatter.slug}`}>    
                                {node.childMdx.frontmatter.title}
                            </Link>
                        </h2>
                        <p>Posted: {node.childMdx.frontmatter.date}</p>
                    </article>
                ))
            }
        </Layout>
    )
}
export const query = graphql`
query{
    allFile(filter: {absolutePath: {regex: "/blog/"}} sort: {fields: childrenMdx___frontmatter___date order: DESC}) {
      nodes {
        childMdx {
          frontmatter {
            date
            slug
            title
          }
          id
        }
      }
    }
}
`

absolutePath: {regex: }를 사용하여 해당 경로가 있는 폴더의 파일들만 모은다.
childMdx로 Mdx파일들만 꺼낸다. 이런식으로 \폴더명\ 안의 파일들만 불러올 수 있다.

allFile(filter: {absolutePath: {regex: "/blog/"}} sort: {fields: childrenMdx___frontmatter___date order: DESC}) {
      nodes {
        childMdx {
          frontmatter {
            date
            slug
            title
          }
          id
        }
      }
    }

gatsby-plugin-mdx

mdx파일을 읽기 위해 gatsby-plugin-mdx를 사용한다. config.js에 아래와 같이 추가한다.
gatsby 버전이 바뀌면서 options의 내용이 아래와 같이 바꼈다. 자세한 사항은 공식사이트를 읽어보자.

plugins:[
.....
{
      resolve: "gatsby-plugin-mdx",
      options:{
        extenstiond: [`mdx`,`md`],
        mdxOptions:{
          remarkPlugins: [
          ],
          rehypePlugins: [
          ],
        },
      },
    },

구글링이나 유튜브를 봐도 옛 버전으로 안내된 글이 많다.
공식 사이트를 보면 plugin의 내용도 바뀌었다.

config.js는 아래와 같이 바꼈다.(-가 옛버전, +가 현재버전, 옛버전 내용은 지우고 현재버전을 써야한다.)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
-       remarkPlugins: [],
-       rehypePlugins: [],
+       mdxOptions: {
+         remarkPlugins: [],
+         rehypePlugins: [],
+       },
      },
    },
  ],
}

index.js는 아래와같이 바뀌었다.

import React from "react"
import { graphql } from "gatsby"
- import { MDXRenderer } from "gatsby-plugin-mdx"

- function PostTemplate({ data: { mdx } }) {
+ function PostTemplate({ data: { mdx }, children }) {

  return (
    <main>
      <h1>{mdx.frontmatter.title}</h1>
-     <MDXRenderer>
-       {mdx.body}
-     </MDXRenderer>
+     {children}
    </main>
  )
}

 export const pageQuery = graphql`
  query PostTemplate($id: String!) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
      }
-     body
    }
  }
`

export default PostTemplate

React, node.js, javascript 모두 아는 것이 없어 여기서부터 막혔다. 나중에 더 공부하고 다시 해볼 것이다.