[1] Contentful로 CMS 변경하기

Netlify CMS가 정말 심각할 정도로 불편해서 글을 쓰기가 힘들었다. 블로그 생성 이후 약 1달간 꾹꾹 참으며 사용했지만.. 이제는 도저히 못쓰겠다. 사실상 긴글은 거의 쓰지 못할 정도로 불편하다.

Netlify CMS는 간편히 블로그와 마크다운 파일을 연결을 할 수 있다는 장점이 있어, 블로그를 처음 만들어보는 많은 사람들이 사용한다. 하지만 자음과 모음이 조합되어야하는 한글에 대한 지원이 너무나 부족하다는 치명적인 단점이 있다. (라틴 문자 사용자에게는 아무런 문제가 없다.)

netlify-cms 관련 이슈 (Github)

찾아보니 CJK 사용자들이 공통적으로 불편함을 겪고 있는 것 같다. 그리고 이 문제는 여전히 해결되지 않았다. (내가 해결할 수만 있다면 오픈 소스에 기여를..?)

블로그 글을 작성하는 데에 불필요한 인내심이 필요하다는 게 말이 되는가.. 결국 참다못해 CMS를 변경하기로 했다. 참고로 지금 이 글은 Contentful CMS를 이용하여 작성하고 있다.

이왕 바꾸기로 마음 먹었으니, 어떤 것을 사용할지 고민하다가 커뮤니티가 가장 큰 Contentful CMS(이하 Contentful)를 선택했다. 그런데 막상 블로그에 Contentful을 붙이려고하니 쉽지 않았다. Netlify CMS와 Contentful의 성격이 상당히 달랐기 때문이다. 아래에 간략하게 작성해 보았다.

당연히 부분 유료서비스인 Contentful쪽이 기능은 압도적으로 많다. 자동저장, 임시저장, 미리보기 등등 컨텐츠를 생성하고 관리하는 데 필요한 대부분의 기능을 가지고 있다.

1. Key 설정

사실 지금도 완벽히 완성한 것은 아니지만 적어놓지 않으면 기억 하기 어려우니 조금씩 적어 보겠다.

참고로 이 글은 gatsby-starter-blog 테마로 만든 블로그를 기준으로 한다.

Contentful과 블로그를 연결하기 위해서 첫번째로 할 일은 Contentful에 가입하고 spaces를 생성하는 것이다. 이후 Content Model을 설계한다.

해당 spaces의 API Key를 생성한다.

API Key를 사용하기 위해 프로젝트에 gatsby-source-contentful를 설치한다. 그리고 환경변수 파일을 만들어 API Key를 입력한다. (개발용으로 .env.development만 생성해도 무방하다. 빌드용 Key는 Netlify에 추가해야한다.)

GATSBY_CONTENTFUL_SPACE_ID=[Space ID 입력]

GATSBY_CONTENTFUL_ACCESS_TOKEN=[Content Delivery API 입력]

이 Key는 외부에 공개되면 안되므로 .gitignore에 추가해 놓는다.

//.gitignore
# dotenv environment variable files
.env*

이후 gatsby-config.js에 다음과 같은 코드를 추가한다.

// .env파일 사용을 위해 최상단에 추가할 것
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
    plugins: [
    // ... 중략
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.GATSBY_CONTENTFUL_SPACE_ID,
        accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN,
      },
    },
    // ... 중략
}

2. gatsby-node.js 수정

정상적으로 연결이 되었다면 그래프큐엘 쿼리에 contentful 컨텐츠 데이터가 추가됐을 것이다. (아직 글을 작성하지 않았다면 테스트로 게시글을 발행해 볼 것!)

이제 이 데이터를 가져와 gatsby-node.js 와 index.js 그리고 게시글과 연관된 컴포넌트들을 전부 수정해야한다.

먼저 가장 중요한 gatsby-node.js를 수정해보자. 내 블로그의 경우, title의 value값을 slug로 설정해야했다. (좀 더 정확한 확인이 필요)하지만 위의 이미지 처럼 Contentful로 slug의 값을 따로 입력 받는다면 onCreateNode시 slug를 생성하는 과정이 불필요하다.

그래서 나는 exports.onCreateNode를 전부 주석처리했고, createPages 내부의 코드를 추가된 Contentful 쿼리에 맞춰서 변경해 주었다.

// gatsby-node.js
exports.createPages = async ({ graphql, actions, reporter }) => {
  // ...중략
  const result = await graphql(
    `
      {
        allContentfulVtMorgonBlog(sort: { fields: date, order: DESC }) {
          edges {
            node {
              id
              title
              slug
              description
              date
              tags
              blogContent {
                childMarkdownRemark {
                  html
                }
              }
            }
          }
        }
      }
    `
  )

  // ...중략

  const posts = result.data.allContentfulVtMorgonBlog.edges // 변경

  if (posts.length > 0) {
    posts.forEach((post, index) => {
      createPage({
        path: post.node.slug, // Page의 path 생성
        component: blogPost,
        // context에 추가한 값은 blogPost에서 받아서 사용할 수 있다.
        context: {
          id: post.node.id,
          prev: index === posts.length - 1 ? null : posts[index + 1].node,
          next: index === 0 ? null : posts[index - 1].node,
        },
      })
    })
  }
}

조금 아쉬운 것은 이미 작성한 게시글을 가져오는 방법을 찾지 못했다는 것이다. 원래는 onCreateNode시 if (node.internal.type === MarkdownRemark)로 MarkdownRemark 파일들의 정보를 전부 가져올 수 있었다. 사실 지금도 가능하지만 Contentful로 작성한 게시글은 작성했던 md파일들과 달리 frontmatter도, Fields도 전부 null이라서 에러가 난다.

이제 기본적인 세팅이 완료되었다. index.js를 수정하여 contentful에 작성한 게시글을 메인 화면에 띄워보자. (2편에 이어서 작성예정)