드디어 블로그를 만들었다! 부끄럽지만 작년에 회사를 다닐 때 블로그 포스팅을 전혀 하지 못했다. 올해부터는 배운 것을 꼭 기록하고 공유하자는 다짐과 함께 애정을 듬뿍 담아 블로그를 만들어 보았다.

내가 중요하게 생각한 것은 두 가지다. 내가 글 쓰는 데에만 집중할 수 있는 환경과 독자들이 사용하기 쉬운 환경이다. 글을 쓸 때마다 마크다운을 작성하고 깃허브에 푸쉬하는 과정이 귀찮았기에 CMS를 이용하기로 했다. 그리고 여러 웹사이트를 둘러보며 나에게 좋은 경험을 주는 요소(ex. 다크모드, 반응형)들을 적용했다. 이에 관련해서는 다른 포스팅에서 자세히 설명할 것이다.

미리 알면 좋은 개념

Headless CMS -  말그대로 얼굴 없는 CMS. 웹사이트를 구성할 때 view(얼굴)와 contents(몸)를 분리시키는 것이다. 호빵맨처럼 얼굴을 다양하게 갈아끼울 수도 있다. 컨텐츠 편집자와 뷰 개발자가 분리될 수 있다는 것이 가장 큰 장점이다.

SSG(Static Site Generator) - 정적 페이지 기반 웹사이트를 만들어주는 도구. 정적 페이지는 클라이언트의 요청 후 서버의 추가적인 처리 과정을 거치지 않는다. 그렇기 때문에 사용자는 개발자가 구현한  모습을 보게 된다. 대표적인 예로 회사 소개 페이지와 블로그 페이지가 있다.  

반면 동적 페이지는 클라이언트의 요청 후 서버에서 그 요청을 해석하는 과정을 거치고 클라이언트는 그에 맞는 데이터를 가져오게 된다. 대표적인 예로 쇼핑 검색 결과 페이지가 있다.

기술 스택

CMS - Ghost

가볍고 최신 기술으로 만들어진 CMS를 선택하려다 보니 Ghost가 제격이었다.

프론트엔드 - Gatsby

React를 기반으로 하는 SSG를 선택하려다 보니 Next.js와 Gatsby가 눈에 띄었다. Ghost와 함께 사용하기에 Gatsby가 더 편했고, Gatsby의 다양한 플러그인에 반해 선택하게 되었다.

배포 - Netlify

Gatsby와 함께 Netlify를 자연스레 선택했다. 무료로 이용할 수도 있고, 레포지토리에 푸쉬만 하면 빌드와 배포가 자동으로 되는 것에 대해서 극찬을 많이 들었기 때문이다. 경험 삼아 가볍게 써보게 되었는데 사용하기에 정말 쉬운 도구인 것 같다.

호스팅 - DO(Digital Ocean)

DO는 Ghost의 공식 호스팅 파트너이다. DO를 선택한 가장 큰 이유는 Ghost를 설치하기 쉽기 때문이다. DO 공식 문서에서 1-click 앱을 지원한다고 말하는데, 그 정도로 사용하기 쉽다. 비용도 월 $5 정도로 부담이 없는 편이다.

도움이 된 자료

How to Build a Gatsby Static Site Using Ghost as a Headless CMS, (2022.01.03), https://hackernoon.com/how-to-build-a-gatsby-static-site-using-ghost-as-a-headless-cms-1k2o35sw

How I Built My Blog with Gatsby and Ghost, (2022.01.03), https://www.conordewey.com/blog/building-my-blog-with-gatsby-and-ghost/