Gatsby + Contentful + Netlify 블로그 제작 후기

개발 블로그를 만들었습니다. 경력은 쌓여가는데 슬프게도 개발 실력이 쌓이지 않는 불안감에서 시작되었습니다. 이제는 개발하면서 고민하거나 겪었던 이슈를 기록하고 저뿐만 아니라 다른 분들에게 도움이 될 수 있는 공간을 만들고 싶었습니다. 그리고 제 자신의 커리어를 어필하기에도 블로그가 적합해 보였습니다.

고민충 고민만 5년째..

처음에는 미디엄, velog같은 플랫폼도 고민했지만 제가 개발자로서 브랜딩하려면 직접 제작하는 것이 좋을 것 같다고 생각했습니다. 나중에 글을 쓰고 플랫폼에 따로 발행하는 것도 좋은 방법이겠네요. 🤔

저는 Gatsby + Contentful + Netlify를 이용했는데요. 사용해본 후기를 간략하게 정리해봤습니다.

혹시 위 스펙으로 제작 방법이 궁금하시다면 이 개발자분의 블로그를 보시면 될 것 같습니다.

Gatsby

예전에는 Jekyll + Github Pages를 썼는데 글 관리와 코딩 방식에서 특별할 것이 없어서 마음에 안 들었습니다. 정적사이트 생성기를 알아보다가 Gatsby를 처음 알게 되었습니다. 하지만 정적사이트 생성기로 칭하기에는 너무 많은 기능들을 제공하고 있는데요. 덕분에 고민할 필요없이 Gatsby를 선택하게 되었습니다.

gatsby 다양한 플랫폼에서 데이터를 가져올 수 있습니다.

React.js를 베이스로 제작되었으며 마크다운 지원은 물론이고 CMS와 연동해서 사용할 수 있습니다. 또한 GraphQL을 사용해서 데이터를 가져오는데요. GraphQL을 입문하기에는 아주 적절한 선택이었습니다. GraphQL을 잘 몰라서 당황했지만 이미 훌륭한 개발자 분들이 잘 정리해주셔서 많이 참고했습니다.

Contentful

Gatsby의 장점인 CMS 연결해보고 싶었으며, 블로그 글을 예전처럼 코드 안에서 관리하고 싶지 않아서 CMS를 알아봤습니다. (CMS는 워드프레스와 같은 콘텐츠관리 시스템을 말합니다.) 워드프레스에 익숙하지만 블로그 콘텐츠만 발행하는 목적으로는 워드프레스는 너무 무거웠습니다.

처음에는 잘 모르고 Netlify CMS를 시도해봤습니다. 하지만 Netlify CMS는 정말 기본적인 마크다운 에디터만 제공했으며 심각하게 별다른 기능이 없었습니다..😞

netlifycms 가볍지만 정말 아무것도 없습니다..

결국 Headless CMS에서 인기가 많은 contentful을 선택했습니다. 유료라는 얘기를 듣고 아주 큰 오해를 했는데, 5,000 엔티티까지는 무료여서 사용해보기로 했습니다.

결과는 대만족입니다. 글의 콘텐츠 타입, 메타 데이터, 태그 등 기본으로 탑재한 기능이 많고 심지어 기대도 안 했던 리비전(글 수정 시점 기준으로 아카이브 하는 기능)을 제공합니다.

contentful 가볍지만 CMS에서 필요한 기능은 다 갖췄습니다.

특히 워드프레스에 익숙한 분들은 Contentful에 더욱 쉽게 이해하실 수 있을겁니다.

처음에 Gatsby와 연동이 조금 어려우실 수 있는데요. 아래 Gatsby + Contentful 스타터 테마를 사용하시면 어렵지 않게 시작하실 수 있을거에요.

Netlify

처음에 Github Pages에 배포했으나 git 공간을 공개로 설정해야지 가능하고 딱히 장점이 없었습니다. 대안을 찾다가 Gatsby 공식 문서에서도 밀고 있는 Netlify를 처음 접했는데 신세계였습니다. 제가 마음에 들었던 장점을 나열해보자면 다음과 같습니다.

  1. 서버사이드 렌더링 지원
  2. https 무료 지원
  3. 심플하고 깔끔한 인터페이스

netlify 가볍고 심플하지만 무려 서버사이드 렌더링을 지원합니다.

Contentful에서 글을 썼을때나 저장소로 push했을 때 Gatsby를 빌드해주는 hook을 제공하고 있어서 아주 편리합니다.

제가 Netlify에 도메인 연결과 무료 HTTPS 설치하면서 참고했던 글을 공유합니다.

번외. Styled-Component

SCSS, LESS를 CSS 전처리기를 많이 썼지만 스타일과 컴포넌트를 따로 관리하는 것이 번거로웠습니다. 이 프로젝트는 CSS 아웃풋이 따로 필요하지 않아 컴포넌트 파일안에서 스타일을 관리하는 방식이 적합하다고 판단하여 Styled-Component를 선택했습니다.

스타일 파일이 분리되어 있지 않아서 폴더구조는 심플해졌습니다. 그리고 좀 더 디테일한 컴포넌트 개발이 강제되었습니다.

Styled-Component의 코딩 방식은 다음과 같습니다.

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;
  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`
render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>
    <Button as={Link} href="/docs" prefetch>
      Documentation
    </Button>
  </div>
)

컴포넌트 안에서 스타일을 관리하고 props로 분기도 가능한데요. 하지만 아직 전처리기에 썼던 전역변수나 믹스인을 JavaScript로 쓰는 것이 익숙하지 않았습니다. 이 부분은 노하우를 좀 더 찾아봐야 겠네요.

아 참고로 Gatsby.js에서 Styled-Component 플러그인을 쓰려면 플러그인이 필요합니다.

글을 마치며

처음 써보는 라이브러리와 툴이 많았지만 생각보다 진입장벽이 높지 않았습니다. 이미 위에서 언급한 시행착오를 겪은 개발자들이 좋은 글을 공유했었고 스타터테마도 잘 제공하고 있습니다. 만약 최신 기술을 써보고 싶은데 적합한 프로젝트가 없다면 개발 블로그를 만들어보는 것은 어떨까요? 응원합니다..💪

darksoul 험난한 여정이 시작되었어요!