정적 사이트 생성기를 직접 만들어보며 배운 것들

왜 직접 만들었나

Hugo, Jekyll, Gatsby 등 훌륭한 도구들이 이미 존재한다. 하지만 나에게 필요한 건 아주 단순한 것이었다. 마크다운 파일을 읽고, 미리 정의된 템플릿에 끼워 넣어 HTML을 생성하는 것. 그게 전부다.

결국 도구를 이해하는 가장 좋은 방법은 직접 만들어보는 것이라는 결론에 이르렀다.

기본 구조

프로젝트의 구조는 다음과 같이 간단하게 잡았다.

project/
├── posts/          # 마크다운 파일들
├── src/            # 빌드 소스
├── public/         # 정적 에셋
└── dist/           # 빌드 결과물

핵심은 build.ts 하나다. 이 파일이 모든 일을 한다. 마크다운 파싱에는 marked 라이브러리를 사용했고, front matter 파싱에는 gray-matter를 사용했다.

배운 것들

직접 만들어보면서 몇 가지 깨달은 점이 있다.

  • 빌드 도구의 본질은 결국 파일 변환이다.
  • 템플릿 엔진도 결국 문자열 치환에서 시작한다.
  • 복잡한 도구를 쓰기 전에, 내가 정말 필요한 게 무엇인지 먼저 정의해야 한다.

가장 좋은 도구는 내가 완전히 이해할 수 있는 도구다.

마무리

물론 이 방식이 모든 상황에 적합한 것은 아니다. 규모가 큰 사이트라면 검증된 도구를 쓰는 편이 낫다. 하지만 개인 블로그 정도의 규모에서는, 직접 만든 도구가 주는 자유로움과 이해도는 꽤 가치 있다.

목록으로