DocPad to Gatsby
꽤 오랜 기간 블로그를 방치해 두다가 다시 글을 좀 써볼까 하고 저장소를 체크아웃 했다. 로컬에서 사이트 생성기를 실행하니 제대로 동작하지 않았다. 최신 버전으로 업그레이드 해야하는 건가 싶어서 DocPad 사이트에 찾아갔더니 프로젝트가 중단되었다는 소식을 접하게 되었다.
어쩔 수 없이 다른 대안을 찾아서 다시 StaticGen.com에 들어갔다. 그 사이에 자바스크립트 쪽에서는 React가 대세가 되어있었다. 블로그 만들려고 웹 프레임워크를 공부해야한다는 것이 배보다 배꼽이 큰 일인 것 같아서(난 글을 좀 쓰고 싶었을 뿐이라고..) 고민하다가 Jekyll로 다시 돌아갔다. Jekyll이야 Github에서 관리하니 프로젝트가 중단될 일은 없겠다 싶었기 때문이다.
하지만 처음 Jekyll에서 DocPad로 갔던 비슷한 이유로 (Jekyll의 제공하는 기능은 사용하기 쉽지만 커스터마이징 하려고 들면 어려운… 나는야 루알못) 결국 다른 대안을 찾을 수 밖에 없었다.
때마침 한나님이 Gatsby를 소개해주셨다. 평소 한나님의 블로그를 눈여겨 보고 있었는데 그 블로그를 Gatsby로 만들었다고 하니 혹하였다. 결국 React를 피할 수 없는 운명으로 받아들이고 써보기로 했다.
Gatsby는 React 기반에 정적 사이트 생성기로 데이터 처리는 GraphQL을 사용한다. 모두 페이스북에서 만들어서 DocPad 처럼 프로젝트가 접힐 일은 없을 것 같다.
React고 GraphQL이고 1도 몰랐기 때문에 얌전히 Gatsby.js Tutorials 부터 시작했다. 문서화가 잘 되어 있고, 보일러플레이트 저장소를 제공하고 있어서 튜토리얼을 따라가면서 기본적인 사이트의 구조와 동작을 익혀볼 수 있었다.
GraphQL의 경우에는 튜토리얼 말고도 Query를 실행 해볼 수 있는 웹 페이지(in-browser IDE)를 제공해줘서 테스트 해보면서 금방 익숙해질 수 있었다.
기본 튜토리얼을 마치고 gatsby-starter-default 를 토대로 하여 기존 DocPad로 만들었던 구성과 기능을 Gatsby로 옮겨보기로 하였다.
필요한 작업은 아래와 같았다.
- 레이아웃
- github.io 로 디플로이
- 마크다운에서 포스트 생성
- 마크다운에서 태그 생성
- 마크다운에 있는 코드 블록 하이라이팅
- 마크다운에 있는 수식 포맷팅
한 달여간 매일 조금씩 손 본 끝에 이제는 대부분이 잘 동작하게 되었다. 👏
Gatsby로 옮기고 나니 이전에 블로그를 관리하면서 썼던 글들은 이제 필요 없거나 낡은 것이 되었다. 그렇다고 지우자니 안 그래도 글이 없는 블로그에 글이 더 없어 보여서 놔두기로 했다.
한 동안은 위에 적은 개별 작업에 대해서 글을 써볼 생각이다.