블로그에 정이 안가..

기존에 만들어두었던 블로그는 github에서 호스팅하는 jekyll을 기반으로 만들어져 있었다. 개발 내용을 필기할 블로그 보유를 목적으로 만들었기 때문에 기존에 개발 커뮤니티에서 jekyll을 기반으로 블로그를 만들었다는 글을 보고서 무작정 따라하여 블로그를 개설하였다. 블로그를 막상 개설하고 보니 생각치도 못한 문제가 발생하였다.

우선, 반응형으로 구성되어 있지 않았다. 물론 개인적인 기록을 남기기 위해 시작한 블로그인 것은 분명하지만 블로그를 구축한 이후, 글을 작성하고 모바일 환경에서 게시글을 살펴본 적이 있는데 반응형으로 이루어지지 않아 불편함이 있었다.

두번째로, ruby 기반으로 이루어져 있었던 문제가 있었다. github 역시 ruby로 이루어져 있기도 했고 ruby는 rails라는 프레임워크도 있기 때문에 서버로서의 검증은 이루어졌다고 볼 수는 있다. 하지만 개인적으로 ruby에 대해서는 문외한이었기 때문에 ruby 및 jekyll의 cli에 대한 심도있는 이해라던가 환경 구성에 대해서 어려움이 있었다. 불행 중 다행이도, 맥북의 경우 ruby로 환경 구성이 어렵지 않은 편이었으나 윈도우로 구성하게 된다면 추가적으로 설정할 부분이 귀찮기도 하고 이러한 설정은 블로그 작성을 맥북 하나에만 귀속되어버리는 문제가 있었다.

그러던 도중, 우연히 개발 커뮤니티에서 살펴본 개발 관련 블로그 글을 읽는 도중, 나와 같이 github에 정적으로 블로그 페이지를 배포하여 포스트를 하신 개발자가 있었다. 우연히 호기심이 생겨서 블로그를 살펴보니 hexo를 이용하여 배포하는 것을 알 수 있었다. 이를 눈여겨보고 있다가 뜸해진 블로그를 다시 관리할 겸 새로 게시글을 작성하기 위해 블로그에 들어와보니 이참에 새롭게 꾸며보고 싶어 블로그를 고치게 되었다.

블로그 리모델링

hexo는 기본적으로 node로 구성되어 있어 친숙한 것이 강점이다. 또한 문서도 한글화 되어 있어 구축에 어려움도 적었다. 기본적으로 jekyll과 마찬가지로 markdown으로 게시글을 작성하면 이를 html로 변환하여 사용자에게 제공한다. 물론 github pages를 통한 배포 이외에도 정적 페이지 배포로 netlify 등 무료로 정적 페이지를 제공하거나 직접 만든 react SPA 페이지를 gatsby를 통해 정적 페이지를 생성하여 제공하는 방법 등 방법이야 여러 가지 있지만 github.io를 블로그 도메인으로 가지는 간단한 페이지를 가지면서도 친숙한 js기반의 hexo를 최종적으로 채택하게 되었다.

hexo 설치

hexo를 설치하기 위해서 우선 global로 hexo를 설치한다. npm이든 yarn이든 적당한 package manager를 골라서 전역으로 hexo를 설치해보자. 본인은 yarn을 주로 사용했으므로 yarn을 통해 전역으로 설치하였다.

$ yarn global add hexo-cli
# npm install -g hexo-cli

설치가 완료되었으면 블로그를 위한 경로 설정 및 hexo 설정을 위해 다음과 같은 명령어를 입력한다.

$ hexo init {경로명}
$ cd {경로명}

이후 hexo에 대한 기본적인 설정으로 package.json 파일이 생성되고 필요한 dependencies가 설치되고 폴더 경로가 구성된다.

테마부터 골라보자

이왕에 migration을 진행하는데 있어서 보기 좋은 떡이 좋다는 말이 있듯이 일단 테마부터 고르려고 했다. 기본적인 설정만 마친 후 theme 페이지로 이동하여 테마를 골라보았다. 우선적으로 고려한 사항들은 영문 문서의 존재여부였다. hexo는 대만의 개발자를 주도로 개발되었던 만큼 중국 커뮤니티의 참여가 많았고, 테마들도 중문 문서들이 대다수였다. 영문 문서가 있는 테마들 중에서 두 번째로 고려한 것은 반응형의 여부였다. 이 두 가지 상황을 고려하여 테마를 고르고 migration을 진행하였다.

게시글 옮기기

우선적으로 게시글들을 옮기기 위해 markdown 구성을 살펴보니 큰 차이가 없어서 게시글 자체는 설정만 바꾸면 바로 적용할 수 있었다. 게시글을 옮기고 난 이후에는 정상적으로 블로그 페이지가 동작하는지 로컬서버에서 확인하는 명령어 역시 hexo에서 지원하고 있다. 로컬서버에서 블로그를 동작하기 위한 명령어는 다음과 같다.

$ hexo s
# hexo server

로컬 서버에서 테마를 적용해보니 미처 영문으로 번역되지 않은 중문항목이 있어 해당 내용을 배포 전에 수정할 수 있었다.

게시글 작성하기

$ hexo new post {게시글 이름}
# hexo new draft {게시글 이름}

{게시글 이름}을 제목으로 가진 markdown 파일이 init 설정된 root 폴더 내 /source/_posts 경로 내에 새로이 생성된다. 바로 반영되는 post 게시글 이외에도 draft라는 초안 파일을 생성해 블로그에 직접 적용이 되지 않지만 게시글을 작성하는 기능도 있다. 현재 게시글 역시 post를 cli로 생성하여 내용을 작성하였다.

배포하기

마지막으로 블로그를 실제 github pages에 배포하는 작업을 진행하기 위해서 hexo init시 생성된 _config.yml 파일에 배포에 대한 설정을 입력한다. 현재 블로그는 git으로 버젼을 관리하기 때문에 다음과 같은 설정을 하였다.

# _config.yml
...
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/gonewbie/gonewbie.github.io.git
  branch: master
...

기존 블로그와 마찬가지로 {Github ID}.github.io라는 원격 repository에 블로그 파일을 배포하기 위해 해당 주소를 입력하였다. 이후에는 해당 원격 repository에 파일을 build 한 후 deploy하기 위한 절차가 필요한데, 이 역시 cli가 있어 간단하게 배포가 가능하다. 빌드 및 배포에 대한 명령어는 다음과 같다.

$ hexo generate # 빌드하기
$ hexo deploy

배포를 완료하고 보니 깜짝 놀라는 현상이 발생하였다. gonewbie.github.io repository가 깨끗히 날라가고 hexo가 빌드된 파일만 올라와 있는 것이 아니겠는가?!

당황스러워 해당 내용을 검색해보니 hexo는 배포된 레포지토리에서는 코드 변경을 관리하지 않기 때문에 페이지 코드 변경을 관리하기 위해 별도의 repository가 하나 더 필요하다는 것을 알게 되었다. 이후 블로그에 대한 설정 및 코드 관리를 위한 repository를 하나 더 생성하여 문제를 해결할 수 있었다.

느낀 점

전체적으로 블로그 배포 구조가 유사하다고 해서 마냥 migration이 쉽다고 생각하고 달려든 것에 비해 헤메던 점이 좀 있었다. 하지만 일단 만족스러운 테마를 건지기도 했고(물론 가장 큰 소득..) 블로그 개편에 더불어 블로그 게시글 작성에 대한 의욕을 살릴 수 있다는 점에서 긍정적으로 보고 있다. 또한 이건 가끔씩 볼 수 있는 오류 stack이 더 익숙한 javascript 이기 때문에 원인 추적(할 일도 거의 없지만)이 훨씬 수월해진 것 같다. 개인적으로 진행할 다음 목표로는 기존 블로그에서 블로그 포스트 항목 이외의 항목도 점진적으로 수정하여 포스트할 예정이다. 물론 최종적인 목표는 React에 능숙해져서 Gatsby를 통해 정적 페이지를 직접 제공하고 싶은 아직은 먼 훗날의 계획이 있다.. 물론 이러한 점진적인 개발 및 관련 내용에 대한 회고 및 기록을 최우선으로 두기 위한 목적의 일환으로 블로그를 개선한 점이기 떄문에 이 점부터 차근차근 진행할 예정이다.

긴 글 읽느라 고생 많으셨습니다. :D