홈페이지 재작성 작업기

지난 몇 주에 걸쳐 홈페이지를 새로 만들었습니다. 오랜만에 글을 쓰는데, 부담이 적은 주제라 작업기를 간단히 남겨봅니다.
재작성의 이유
먼저, 이미 잘 돌아가고 있던 홈페이지를 새로 만들기로 결정한 이유를 적습니다.
기존 홈페이지의 가진 가장 큰 문제는 Jekyll 이였습니다.
Github Pages 한정 Jekyll 이여서 단순히 글을 쓸 때 commit 만 남기면 되는 편의성을 가졌지만 (Github 홈페이지에서 온라인 commit 이 가능함으로) 플러그인의 제약 등 한계가 명확 했고, 그리고 markdown 을 쓰고 싶지만 markdown 을 쓰고 싶지 않았습니다.
그러던 와중에 https://github.com/sorcererxw/blog 을 발견하게 되었습니다. 여긴 백엔드가 실시간으로 바뀌는 엄청난 구현체였습니다.
하지만 백엔드를 단순 텍스트 나열하는 홈페이지에서 상시 백엔드 구조를 가지고 싶지 않았고 이미 수많은 구독형 서비스를 쓰고 있으니 그들을 조합해서 활용하고 싶었습니다.
그래서 계획을 세우고 실행에 옮겼습니다. SSR 과 notion 을 같이 쓰는 이상한 혼종을 만들자고...
기술 선택
이번에 홈페이지를 만들면서 사용한 기술 목록입니다. 각 분야의 최고를 찾기 보다는 그냥 지극히 개인적인 흥미와 빠르게 익혀 적당히 쓸 만한 결과를 만들어 낼 수 있는 기술들을 사용했습니다.
GatsbyJS: SSR 의 React 와 GraphQL을 사용할 수 있어서 골랐습니다. 구조를 이해한다면 어느 백엔드든 연동이 가능합니다.
styled-component: 그냥 CSS-in-JS 라이브러리를 쓰고 싶었습니다.
notion: CMS 의 데이터베이스를 목적으로 사용.
재작성의 과정
글 마이그레이션
notion 에 Table 을 게시물 형태로 나오게 제작
GatsbyJS 로 코드 전환
기존에 만든 HTML 을 React 코드로 전부 재작성
Github Action 사용
일단 notion 의 경우 글 변경에 대해 webhook 같은 기능을 제공하고 있지 않고 (Slack Notification 만 가능) 그래서, SSR 빌드를 어떻게든 돌게 해야함으로 Github Action 을 적극 활용 (Github Actions + Github API)
앞으로
글의 빈도를 어떻게든 늘려보도록 하는게 다음 목표입니다.

Archives