이 블로그를 만들었던 방법.
처음에 이 블로그는 Jekyll을 사용했습니다. 별도의 빌드 과정을 사용자가 세팅 할 필요 없이 그저 push하면 알아서 GitHub Pages에 자동으로 빌드되었습니다. 이것은 GitHub이 Ruby 기반이고, Jekyll 지원을 내장했기에 가능했습니다.
하지만 Jekyll기반의 블로그는 기능 제약이 심했습니다. 다른 툴로 바꾸고 싶다는 심정이 매우 강했었죠. 그때 나왔던 툴이 Python으로 개발된 Lektor였고, 냉큼 갈아탔었습니다. 하지만 시간이 흘러 어느덧 Lektor로도 만족하지 못하는 자신을 발견했습니다.
Gatsby.
이런 고민을 하던 차에 제 생각에 들었던 것은 보다 효율적인 툴이었습니다. 가장 처음 물망에 올랐던 것은 Rust로 개발된 Zola였습니다. 하지만 이쪽은 커스터마이징이 극도로 제한된 툴이어서 빠르게 포기했습니다.
직접 툴을 만들어야하는지 고민하는 지경에 이르렀는데 이런 저를 보고 주변 지인분들이 한결같이 GatsbyJS를 추천해주셨습니다. 사실 한참 전에 React로 SPA 개인 프로젝트를 할 때도 추천 받았어서 살펴봤던 툴이었지만 다시 한 번 들여다보기로 했습니다.
GatsbyJS는 JavaScript 기반의 정적 사이트 생성툴입니다. 개발은 React로 진행되도록 강제되어있고, 내부 데이터 처리를 위해 GraphQL이 사용됩니다. 플러그인 기능이 지원되어 입맛대로 기능을 추가할 수도 있습니다.
입맛대로 세팅하기.
TypeScript.
가장 먼저 바꾸고 싶었던 것은 언어입니다. 어떻게 해서건 TypeScript를 쓰고 싶었죠. 그래서 이런 의존성들을 추가했습니다.
yarn add typescript @types/react gatsby-plugin-typescript gatsby-plugin-typescript-checker
Markdown.
Gatsby 생태계에서도 가장 많이 쓰이는 것은 markdown입니다. 저는 문법강조와 이미지 첨부도 필요했기에 필요한 것이 좀 많았습니다.
yarn add prismjs gatsby-source-filesystem gatsby-transformer-remark gatsby-plugin-sharp gatsby-remark-copy-linked-files gatsby-remark-images gatsby-remark-prismjs gatsby-remark-responsive-iframe gatsby-remark-smartypants
SEO.
검색엔진 최적화도 버릴 수 없었기에 다음과 같은 요소들도 추가했습니다.
yarn add @types/react-helmet react-helmet gatsby-plugin-react-helmet gatsby-plugin-sitemap
Frontend.
기존 블로그에는 일부 웹폰트와 Font-Awesome이 사용되고 있었습니다. React 기반으로 변경하기 위해 의존성을 설치했습니다.
yarn add hack-font typeface-staatliches @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
웹폰트는 gatsby-browser.js에 추가하면 됩니다.
기능 이전.
기존 블로그에 있었던 기능을 이전하는데에 필요한 것도 설치했습니다.
yarn add gatsby-plugin-feed gatsby-plugin-google-analytics
Hook.
저는 Git Hook을 걸어두는 것을 선호합니다. 예전엔 lint를 사용했는데 이번엔 prettier를 사용하기로 정했습니다. 덤으로 import 순서도 자동수정하기로 했습니다.
yarn add --dev husky import-sort import-sort-cli import-sort-style-module lint-staged postcss-scss prettier
페이지 생성.
하지만 이것들을 설치한다고 필요한 기능이 마법같이 해결되진 않았습니다.
주로 문제가 되었던 부분은 Pagination과 Tags였습니다.
두 문제는 모두 gatsby-node.js 에서 createPage 메소드를 이용해 해결할 수 있었습니다.
이걸 위해 정말 많은 Starter를 참조했습니다.
변경 후기.
변경작업을 위해 공부 및 삽질을 바꾸길 잘했다는 생각이 듭니다. 일단 많은 공부가 되었다는 점이 가장 좋았고, 블로그 기능이 전반적으로 더 편리해졌습니다.
마치며.
개발을 어느정도 하다가 보니 깨달은 점은, 이 meme와 같은 툴을 사용하게 되었다는 점입니다. 하지만 게시물 3개로 멈추는 결말만큼은 공유하고 싶지 않습니다. 블로그 툴을 바꾼 것을 계기로 더욱 열심히 포스팅해야겠다고 생각했습니다.