Gatsby Blog 2년 사용 후기

2024년 09월 26일

TOC

Gatsby

지난 2년간 커스텀 블로그를 생성 후 관리하며 느낀 점, 주요 플러그인 등 후기를 간략하게 정리.

커스텀 블로그의 시작

블로그를 만들어야겠다 느낀 건 2022년 9월 경, 개발을 배워가면서 얻은 지식들을 정리하여 기록물로 남겨두고 싶다 생각이 든 것이 시작이었다. 맨 처음에는 Tistory, Velog 등 내가 배울 때 유용하게 정보를 얻었던 블로그 플랫폼을 통해 개설하고 포스팅을 하려 했다.

그렇게 여러가지 방안을 생각해 보다가 문득, 그냥 블로그를 직접 만들어 보는 것이 재밌겠다는 생각이 들었다.

minimal-mistakes

Minimal Mistakes Jekyll theme

Github Repository

(Jekyll을 사용할 때의 블로그 스크린샷이 현재 남아 있지 않다)

시작은 Jekyll를 통해 블로그를 만드는 것을 선택했다. Jekyll은 정적 사이트 생성기로, Ruby로 만들어진 프레임워크이다. 사용하게 된 이유로는 여러 블로그들 중에서도 아주 심플하고 가독성 좋은 구조로 되어 있었고, 이용자가 많기 때문에 그만큼 다양한 템플릿과 정보가 갖추어져 있었다. 처음 Jekyll 환경을 구축할 때 많은 고생을 했다. rbenv 설치, 버전 설정, 의존성 관리 세팅 등 Ruby를 다뤄본 적이 크게 없었기에 그려러니 하면서 블로그 개발 환경을 완성해 나갔다. 그리고 최종적으로 배포에 성공한 나의 블로그 모습은 나름 만족스러웠다.

하지만 결국 나는 Jekyll을 버렸다.

첫 번째 이유는 Ruby에 있다. 블로그 플랫폼으로 나와있는 것을 사용하지 않고 커스텀 블로그를 생성하여 사용하는 것은 결국 자유도가 핵심적인 이유다. 본인의 입맛대로 구조와 디자인 변경이 용이해야 한다. 하지만 Javascript를 주로 다뤄왔던 나로써는 커스텀에 많은 불편함을 느꼈다.

두 번째 이유는 생각보다 개발 환경, 플러그인 설정 등에 문제가 많았던 것이다. 처음이다보니 익숙하지 않아서 사소한 실수를 겪은 것인지는 명확하지 않지만, 미루고 미루다가 댓글 기능조차 제대로 구현해보지 못했다. 처음부터 프레임워크의 문제라 생각하지는 않았고, 나의 부족함을 탓하며 여러가지 방안을 강구하며 연구해 봤지만, 시간이 흐르면서 문득 그런 생각이 들었다. 이렇게까지 힘들게 사용해야 한다면 이게 의미가 있을까? 차라리 플랫폼을 사용하거나 더 개선된 버전의 Jekyll Blog 또는 다른 프레임워크를 쓰는 것이 맞지 않을까?

Gatsby로 블로그 리뉴얼

그동안 제작한 블로그를 날리고, Gatsby를 사용하여 다시 제작했다.

apple1 apple2

Gatsby Starter Apple 테마를 사용하여 생성한 초기 블로그

custom1 custom2

Post List 형태 변경, 글 태그 추가, 측면에 카테고리 표시 등의 커스텀 진행됨.

custom3 custom4

최근과 가장 비슷한 모습. 삭제했던 썸네일이 다른 형태로 추가되었다.

Gatsby는 Jekyll과 유사하게 정적 사이트 생성기로 많이 사용되며, React 기반으로 만들어졌기 때문에 나에겐 굉장히 적응하기 쉬웠다. 취향에 맞게끔 디자인을 쉽게 수정할 수 있었고, 총 포스트 개수를 표시하는 것과 같은 기능도 편하게 추가할 수 있었다. 각종 플러그인 또한 안정적으로 작동되어 블로그의 역할을 수행하게 해주는 여러가지 기능들을 성공적으로 추가할 수 있었다.

주요 사용 플러그인

Utterances

처음 블로그를 생성하게 되면 댓글 기능은 존재하지 않는다. 사용자가 직접 추가해야 한다. Gatsby에서는 Utterances 플러그인을 설치하여 댓글 시스템을 구축할 수 있다. Comment Repository를 생성하고 Issue를 통해 신규 댓글을 받아볼 수 있다. Github와 연동된 메일로 Issue 알림을 확인할 수 있기에, 댓글이 달리면 즉각적인 리액션이 가능하다.

utterances

Gatsby 블로그에 utterances 댓글 앱 추가하기

Gatsby 블로그 댓글 플러그인(utterances)

Gatsby 블로그 - utterances 소셜 댓글 기능 도입하기

Google Search Console

내가 작성한 블로그 글이 검색 엔진에 노출되기 위해서는 색인이 등록되어야 한다. 이를 도와주는 시스템이라 보면 된다. Sitemap.xml, Robots.txt를 생성하고 Google Search Console에 등록하여 구글에 내 글이 검색되게 할 수 있다.

gsc

위와 같이 색인이 생성된 페이지 정보, 총 노출수, 클릭수 통계가 확인 가능하다.

Gatsby Blog Google Search Console에 등록하는 방법

Gastby 블로그 검색엔진 최적화 방법

개츠비(Gatsby) 구글 서치콘솔 등록

Google Adsense

adsense1 adsense2

자신의 블로그에 광고를 기재함으로써 수익을 창출할 수 있는 플러그인이다. 엄청난 조회수가 아닌 이상 수익을 발생시키기에는 무리가 있으나, 한 번 사용해 보는 것이 나쁠 것은 없어 보였다. 블로그 이용에 지장이 생길 정도의 광고 과다 표기는 오히려 역효과를 일으킬 수 있기 때문에 주의해야 한다.

개츠비(Gatsby) 블로그에 구글 애드센스(Adsense) 적용하기

Gatsby 사이트에 Google AdSense 추가하기

Gatsby에 Google Adsense를 추가하는 방법

정리

지난 2년간 커스텀 블로그를 만들어 오면서 최종적으로 현재 Gatsby를 사용중인 상태다. 기존에 Javascript, React에 익숙한 유저라면 강력 추천한다. React 기반이기 때문에 커스텀이 Jekyll보다 훨씬 쉬웠다. 또한 플러그인 접근성이 좋고 안정적으로 느껴졌다. 위에서 다룬 플러그인들 또한 별다른 문제를 마주하지 않고 성공적으로 세팅할 수 있었다.

그리고 한 가지 알아야 할 것으로, 무엇보다 중요한 것은 사용자가 Markdown 사용에 불편함을 느끼지 않아야 블로그를 계속 지속시킬 수 있다는 것이다.

markdown

결국 모든 포스트는 Markdown을 통해 작성한다. 이에 익숙해야 꾸준히 포스팅을 하는데 있어 지장이 없을 것이다. 블로그 구축과 디자인 커스텀, 포스팅 등 이러한 과정들이 귀찮고 어렵게 느껴진다면 다른 블로그 플랫폼을 이용하는 편이 훨씬 낫다.

나는 아직까지 Gatsby에 대해 완벽하게 이해하고 있다고 생각하지는 않는다. 하지만 Gatsby에 대한 이해도가 부족하다고 생각해도, 개인 커스텀 블로그 생성을 원한다면 일단 시작해 보자.


Reference

Minimal Mistakes Jekyll theme

Gatsby Starter Apple

Gatsby 블로그에 utterances 댓글 앱 추가하기

Gatsby 블로그 댓글 플러그인(utterances)

Gatsby 블로그 - utterances 소셜 댓글 기능 도입하기

Gatsby Blog Google Search Console에 등록하는 방법

Gastby 블로그 검색엔진 최적화 방법

개츠비(Gatsby) 구글 서치콘솔 등록

개츠비(Gatsby) 블로그에 구글 애드센스(Adsense) 적용하기

Gatsby 사이트에 Google AdSense 추가하기

Gatsby에 Google Adsense를 추가하는 방법

Written by

yhuj79

🌱 Junior Developer