GitHub Pages 배포 시간을 80% 줄인 Jekyll 빌드 최적화 비결

은퇴 후 취미로 시작한 기술 블로깅

대학에서 40년간 컴퓨터공학을 가르치다 지난해 은퇴한 나는, 남은 인생을 취미와 지식 나눔에 할애하기로 결심했습니다. GitHub Pages와 Jekyll로 블로그를 시작했을 때, 나는 순진하게 생각했습니다. “글만 잘 쓰면 되지 않을까?” 하고요. 하지만 현실은 달랐습니다.

처음 한 달간 저는 블로그 포스트를 작성할 때마다 배포되는 데 5분 이상 걸리는 답답함을 경험했습니다. 매번 커밋을 푸시하고 GitHub Actions 탭을 열어 빌드가 완료되기를 기다려야 했습니다. 제자들이 수업 중 보여주던 최신 기술들도 있었지만, 내 블로그는 여전히 느렸습니다. 그렇게 3개월이 지나며 저는 이 문제를 체계적으로 해결해야겠다고 마음먹었습니다.

불필요한 플러그인 제거와 _config.yml 최적화

첫 번째 변화는 제 블로그의 설정 파일을 들여다보는 것이었습니다. Jekyll Chirpy 테마를 처음 설치했을 때, 저는 모든 권장 플러그인을 활성화했습니다. 이미지 최적화, SEO 플러그인, 분석 도구들 말이죠. 하지만 대학 교수 은퇴자인 저는 복잡한 기능이 필요 없었습니다.

저는 _config.yml 파일을 다시 정리했습니다. 실제로 사용하지 않는 플러그인들을 주석 처리했고, exclude 섹션을 활용하여 빌드에서 불필요한 파일들을 제외시켰습니다. 특히 node_modules, .git, 임시 파일들을 명시적으로 제외하자 빌드 시간이 즉시 개선되었습니다. 이것이 제 첫 번째 승리였습니다.

exclude:
  - node_modules/
  - .git/
  - .gitignore
  - Gemfile.lock
  - assets/js/dist/

이 간단한 수정만으로도 빌드 시간이 3분 40초로 단축되었습니다.

GitHub Actions 캐싱과 incremental 빌드 활용

두 번째 단계는 더욱 흥미로웠습니다. 저는 GitHub Actions의 공식 문서를 읽기 시작했고, 캐싱(Caching) 기능을 발견했습니다. 아, 제가 매번 gem 의존성을 다시 다운로드하고 있었구나 깨달았습니다.

.github/workflows/jekyll.yml 파일에 캐싱을 추가했습니다:

- uses: actions/cache@v3
  with:
    path: vendor/bundle
    key: $-gems-$
    restore-keys: |
      $-gems-

더욱 중요했던 것은 jekyll build 명령어에 --incremental 플래그를 추가하는 것이었습니다. 이제 Jekyll은 변경된 파일들만 다시 빌드합니다. 변경하지 않은 1000개의 기존 포스트는 그대로 둔 채로요.

이 두 가지 최적화를 적용한 후, 빌드 시간은 놀랍게도 1분 5초로 단축되었습니다. 저는 마치 대학원생 시절로 돌아간 느낌이었습니다. 느린 대형 컴퓨터를 기다리던 그때의 답답함이 있었는데, 이제는 없어졌거든요.

이미지 최적화와 추가 팁들

세 번째 개선 사항은 이미지 최적화였습니다. 저는 교수 시절 강의 자료로 사용하던 고해상도 이미지들을 많이 업로드했습니다. 각 이미지가 2~3MB였던 것이죠. 이는 빌드뿐 아니라 블로그 로딩 속도도 저하시킵니다.

저는 모든 이미지를 WebP 형식으로 변환했고, 크기를 1MB 이하로 압축했습니다. 또한 불필요한 마크다운 파일들(드래프트 단계의 포스트들)도 _drafts 폴더로 이동시켰습니다. 블로그에 150개의 공개 포스트만 남기고, 500개의 초안은 따로 관리하게 된 것입니다.

마지막으로 저는 Gemfile을 다시 살펴봤습니다. 불필요한 gem들을 제거하고, 필수적인 것들만 남겼습니다. 결과적으로 최종 빌드 시간은 50초대로 안정화되었습니다.

마무리

은퇴 후 새로운 것을 배우려는 의지와 오래전 배운 최적화 원칙들을 합치니, 80% 이상의 성능 개선이 가능했습니다. 지금 저의 블로그는 여전히 작지만, 빠릅니다. 여러분도 Jekyll 블로그의 빌드 속도가 답답하다면, 오늘 바로 _config.yml부터 살펴보시고 불필요한 것들을 제거해보세요.

지금 바로 당신의 Jekyll 블로그를 점검해보시고, 빌드 로그에 표시되는 시간이 얼마나 개선되는지 댓글로 공유해주세요!