Gatsby로 블로그 만들기

Gatsby?

Gatsby는 React 기반의 Static Site Generation(SSG) 툴이다. SSG는 간단히 말해 빌드 타임에 각 페이지마다 필요한 리소스(주로 html과 json파일 형태)를 미리 생성하고, 요청이 있을 때 정적(static)으로 제공하는 방식이다.

 

그래서 개인 블로그처럼 동적인 API 호출이 굳이 필요하지 않고, 복잡한 상태관리가 요구되지 않는 사이트에 적합하다. 그리고 HTML을 만들어두기 때문에 SEO 친화적이라는 것도 장점이다.

Gatsby Starter Blog

Gatsby는 React의 create-react-app 같은 몇 가지 스타터 프로젝트를 제공하는데, gatsby-starter-blog도 그 중 하나다. 블로그를 만드는데 필요한 최소한(정말 최소다..)의 기능이 구현된 것으로, 이걸 설치해서 블로그를 만들기 시작했었다. 기본 튜토리얼도 있는데 스타터를 받기 전에 한 번 살펴보면 도움이 될 것 같다. 처음 시작해서 막막하실 분들을 위해 gastby-starter-blog의 구조를 간단히 설명해보려고 한다.

gatsby-*.js

gatsby-config.js 파일은 사이트(블로그)의 메타데이터를 설정하고, 프로젝트에서 사용할 플러그인과 해당 옵션들을 정의한다. 플러그인은 사이트를 만드는 데 필요한 기능을 제공하는 패키지를 의미한다. 스타터 프로젝트에 기본으로 포함된 플러그인들이 있고, 추가적으로 필요하다면 npm을 통해 플러그인을 설치할 수 있다.

 

 

gatsby-node.js 파일은 Gatsby가 사이트를 빌드할 때 실제로 페이지들을 생성하는 코드를 포함한다. Gatsby에서는 빌드에 필요한 데이터(메타데이터, 이미지, 마크다운 등)를 GraphQL을 사용해 불러오게 되는데 여기서 그 스키마를 정의한다. 또한 데이터를 추가하거나 미리 불러와 페이지 생성에 사용할 수도 있다. 마지막으로 빌드 과정에서 발생되는 이벤트(빌드 완료, 에러 등)에 대응하는 코드도 이 파일에 포함된다.

 

 

gatsby-browser.js 파일은 브라우저에서 발생하는 Gatsby와 관련된 이벤트(Route 업데이트 등)에 대응한다고 되어 있는데, 아직 적용해보지는 못했다. 스타터 프로젝트에 기본적으로 import되어 있는 normalize.css, style.css처럼 global하게 사용하고 싶은 css파일이나 폰트가 있다면 여기에 포함하면 된다.

src

다음으로 src를 보면 이미지 폴더, css 파일들과 pages templates components 디렉토리가 있다. 위에서 언급했듯이 Gatsby는 React를 기반으로 하기 때문에 컴포넌트를 만들고, 그것들을 조합해 페이지를 제작한다. 즉 스타터 프로젝트를 처음 받았을 때 세 개의 디렉토리에 포함된 파일들은 모두 컴포넌트인데, 쓰임새에 따라 구분해놓은 것으로 볼 수 있다.

 

 

pages에 포함된 컴포넌트들은 모두 자동적으로 개별 페이지로 만들어진다. 따로 설정을 하거나 코드를 작성할 필요 없이 index.js는 _index.html_이, 404.js는 _404.html_이 된다.

 

 

templates는 이와 달리 페이지를 생성하는 데 반복적으로 사용할 컴포넌트를 모아놓은 것이다. 예를 들면, 위에서 말한 gatsby-node.js 파일에서 모든 포스트에 대한 정보를 불러온 뒤 각 포스트마다 blog-post.js라는 '템플릿'을 활용해 페이지를 생성하는 방식이다.

 

 

components는 위 두 개와 같은 page component가 아닌 컴포넌트들(layout, header, footer 등)의 모음이다. 여기서 page component란 페이지를 생성하는 데 사용되는 최상위 컴포넌트를 의미한다.

content\blog

각 포스트마다 디렉토리가 있는 것을 확인할 수 있다. 기본 설정을 바꾸지 않으면 각 포스트의 디렉토리명을 slug로 하는 페이지가 만들어지는 것을 확인할 수 있다.

이후에는..

• 카테고리별로 포스트 불러오기
• TOC (Table Of Contents: 목차)
• pagination

이런 기능들을 추가해서 사용했었다. 이것에 대한 포스팅은 따로 작성할 예정.

지금은 왜 안 쓰는데?

근본적인 이유는 내가 게을러서다. Gatsby는 죄가 없다. 그치만 단점을 조금 적어보자면 우선 귀찮다. Gatsby는 SSG 툴일 뿐, 블로그 전용이 아니기 때문에 블로그라면 기본이라고 할만한 기능들도 스스로 구현해야 한다.

 

물론 플러그인도 꽤 있지만 그것을 프로젝트에 추가하고 설정하는 것도 어쨌든 일이고, 원하는대로 동작하지 않는다면 어느 정도 커스터마이징도 필요하다. 그 과정이 재밌기도 하지만... 블로그에 꾸준히 글을 쓰는 것도 꽤 성실함이 필요한 일인데, 그 과정에 다른 일이 수반된다면? 쉽지 않았다.

 

당연한 말이지만 어디까지나 내 경험일 뿐이고 사람마다 다를 수 있으니 도전해보는 것도 추천한다.