Next로 Github Blog 만드는 법, 고려사항 및 유의사항

작성일 :

React Next 로 만든 Github 블로그


이 블로그는 여러 시행착오를 거쳐 가며 직접 초기 세팅부터 만든 블로그이다. Medium, Velog, T-story 등 블로그 전용 플랫폼도 상당히 많고 입문도 매우 간단하지만, 엔지니어의 타이틀을 달고 블로그는 직접 만들어야 하지 않나 싶었다. 하지만 블로그를 직접 만들기 위해서는 프런트, 백, 서버, DB, 호스팅, 관리자 등 신경을 써야 할 것이 너무 많았다. 몇번의 실패를 거쳐 가며 기존의 나의 스택을 최대한 활용하고 비용을 최소화하는 방향으로 블로그를 설계하였다.

블로그 제작에 고려된 사항 📚

  • 높은 자유도와 생산성
  • 제작 시간 최소화
  • SEO 최적화
  • 광고도 게재 가능
  • 사람들과 소통할 수 있게 댓글 기능
  • 방문자 행동 분석 가능
  • 별도의 도메인 사용
  • 성장에 도움

"블로그 만들기" 프로젝트를 몇 번이나 뒤엎은 이유는 위의 요구사항을 만족하는 기술 스택을 찾기 힘들었기 때문이다. 마음 같아서는 호스팅을 통해 서버를 직접 구성하고 싶었지만, 유지보수와 운영이 큰 걸림돌이었다. 인스턴스의 기본 비용과 서버관리에 투입되는 시간, 그리고 자동화 배포와 관리자 구성까지 고려하면 생각보다 긴 장기 프로젝트가 될 가능성이 컸다. 결론적으로 심사숙고 끝에 결정된 개발 스택은 다음과 같다.

  • Github Pages
  • React | Next
  • Google Analytics
  • Utterances

Github Pages

github-pages

Github pages는 Github에서 제공하는 정적 웹 호스팅 서비스이며, 무료이다. 무료 서비스와 유료 서비스로 나뉘어져 있다고 하지만 무료 서비스로 충분하다. 성능적으로 무언가 기대하기는 힘들지만 블로그 같이 화면 Render가 많지 않은 웹 페이지는 불편함 없이 서비스를 제공할 수 있다.

참고 자료가 많다는 것도 또 다른 장점이다. 개발자 노동시장의 수요가 증가하면서 개발 학원들이 많이 생겼고 필수 교육 과정 중 하나는 블로그 운영인듯싶다. 덕분에 Github pages를 활용해 블로그를 만드는 자료들이 매우 많다. Static Site Generator(이하 SSG)를 이용해서 이미 만들어진 템플릿으로 블로그를 쉽게 만들 수 있으며, 직접 Static Web Page를 만들어 배포할 수도 있다.

그리고 Custom Domain도 지원을 한다. Custom domain을 구매하는 이유는 블로그를 이전하게 되더라도 소유하고 있는 도메인을 유지하고 각 게시글의 url만 유지해주면 기존의 트래픽을 그대로 가져올 수 있다는 장점이 있기 때문이다. 블로그 운영은 긴 여정이 될 예정이므로 Custom Domain의 지원 여부도 이번 프로젝트에 크게 영향을 주었다.

React | Next

github-pages

React는 Front-end를 구성하기 위한 Javascript 라이브러리이다. React로 블로그를 제작하는 이유는 익숙하기 때문이다. SSG를 사용해 블로그를 생성해 보기도 하였지만, 디테일한 기능을 사용하기 위해서는 학습해야 할 내용이 많았다. 학습한 내용이 추후 다른 프로젝트를 진행할 때 도움이 될 것 같지도 않았다. 그래서 앞으로도 내 성장에 도움이 될 React와 Next로 제작하였다. Next를 이해하기 위해서는 Client Side Rendering과 Server Side Rendering에 대한 기본 지식이 필요한데, 이는 추후 정리해서 글로 남기겠다.

Google Analytics(GA)

blog_ga

구글 애널리틱스는 웹사이트 트래픽을 추적하고 보고하는 웹 애널리틱스 서비스이다. 블로그를 통해서 마케팅하진 않겠지만 사용자 분석은 블로그 글을 쓰는 동기부여가 되고 또 다른 프로젝트를 위한 영감을 준다. 얼마나 많은 사람이 블로그 글을 볼지 모르지만, 하나의 서비스를 운영해 본다는 것 자체가 이번 프로젝트의 큰 의의가 있어서 최대한 많은 실험을 해보고 점차 블로그의 사용성을 개선해 볼 예정이다.

Utterances

blog_utterances

Utterances는 Github repository issue를 댓글 형태로 사용할 수 있도록 도와주는 라이브러리이다. 다른 대체수단이 많지만, Utterances를 사용하는 이유는 광고가 없고 무료이기 때문이다. 다만 한 가지 아쉬운 것은 Github 계정으로만 댓글을 달 수 있다는 것이다. 앞으로 다양한 종류의 글을 쓸 것이고 엔지니어가 아닌 이용자도 늘어날 텐데, Github이라는 플랫폼에 익숙한 사람이 많지 않으리라고 예상되기 때문이다. 추후 구글 로그인을 통한 댓글 서버를 구축할 계획이 있으나 이는 GA를 분석해 필요성이 느껴지면 그때 진행할 예정이다.

정리하며


블로그의 beta 버전은 이미 만들었고 론칭도 하였다. 만들어진 퀄리티나 기능들은 만족스럽다. 하지만, 걱정되는 것은 글을 쓰는 것이다. 그동안 노션에 수많은 글을 정리해왔기 때문에 그냥 복사 붙여넣기 하면 되겠다고 생각했지만, 나만 보려고 쓰는 글과 다른 사람에게 설명하는 글은 천지 차이다. 이제 고작 두 개의 글을 썼는데 블로그를 만드는 시간보다 글을 쓰는 시간이 더 많이 소요된 기분이다. 앞으로 걱정이 되긴 하지만 조급해하지 말고 즐겁게 블로그를 운영해 봐야겠다.