Jekyll 설정 파일을 동적으로 생성하고 활용하는 방법

Jekyll과 같은 정적 사이트 생성기는 _config.yml 파일을 사용해 설정을 관리합니다. 이 파일의 설정은 모두 Jekyll 전용이지만, 자신만의 변수를 정의하고 웹사이트 전체에서 활용할 수도 있습니다. 이 글에서는 Jekyll 설정 파일을 동적으로 생성했을 때 얻을 수 있는 장점들을 소개하겠습니다.

로컬 노트북에서 Jekyll 웹사이트를 테스트할 때 저는 다음 명령어를 사용합니다:

bundle exec jekyll serve --incremental --config _config.yml

여러 설정 파일 결합하기

로컬 테스트 중에는 설정 옵션을 재정의해야 할 때가 종종 있습니다. 제 웹사이트의 현재 _config.yml 파일에는 다음과 같은 설정이 들어 있습니다:

# Jekyll Configuration

# Site Settings
url: "https://notes.ayushsharma.in"
website_url: "https://notes.ayushsharma.in/"
title: ayush sharma's notes ☕ + ? + ?️
email: ayush@ayushsharma.in
images-path: /static/images/
videos-path: /static/videos/
js-path: /static/js/
baseurl: "" # the subpath of your site, e.g. /blog

로컬의 jekyll serve URL은 https://localhost:4000이므로 위에 정의된 URL은 작동하지 않습니다. _config.yml을 복사해 _config-local.yml로 만들고 모든 값을 교체할 수도 있지만, 더 간단한 방법이 있습니다.

Jekyll은 여러 설정 파일을 지정할 수 있으며, 나중에 선언된 파일이 앞선 파일의 설정을 덮어씁니다. 즉, 다음 코드로 새로운 _config-local.yml 파일을 만들면 됩니다:

url:""

그런 다음 이 파일을 메인 _config.yml과 다음처럼 결합합니다:

bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml

두 파일을 결합하면 이번 jekyll serve 실행 시 url의 최종 값은 빈 값이 됩니다. 이렇게 하면 웹사이트에 정의된 모든 URL이 상대 URL로 바뀌어 로컬 노트북에서도 정상적으로 작동하게 됩니다.

동적 설정 파일 결합하기

간단한 예로, 웹사이트에 현재 날짜를 표시하고 싶다고 가정해 보겠습니다. 이를 위한 bash 명령어는 다음과 같습니다:

> date '+%A, %d %B %Y'
Saturday, 16 October 2021

Jekyll의 _config.yml에는 커스텀 콘텐츠도 담을 수 있다는 점을 이미 알고 있으므로, 위 날짜를 새로운 Jekyll 설정 파일로 출력해 보겠습니다.

my_date=`date '+%A, %d %B %Y'`; echo 'my_date: "'$my_date'"' > _config-data.yml

이제 _config-data.yml 파일에는 다음 내용이 담기게 됩니다:

my_date: "Saturday, 16 October 2021"

새로 만든 설정 파일을 기존 파일들과 결합하면 웹사이트 어디에서나 my_date 변수를 사용할 수 있습니다.

bundle exec jekyll serve --incremental --config _config.yml,_config-local.yml,_config-data.yml

위 명령어를 실행하면 {{ site.my_date }}가 설정된 값을 출력합니다.

결론

위 예제는 아주 간단하지만, 가능성은 무궁무진합니다. Bash, Python 등 다양한 프로그래밍 언어로 Jekyll 설정 파일을 동적으로 생성할 수 있으며, 이를 build 또는 serve 과정에서 결합하면 됩니다.

실제로 findmymastodon.com에서는 Python으로 Mastodon 사용자 통계를 가져와 새로운 _config-data.yml 파일에 기록하고(현재는 수동으로 처리), 홈 페이지 등에서 이 설정 파일의 데이터를 표시합니다. 이렇게 하면 동적인 백엔드의 장점을 살리면서도 정적 웹사이트가 주는 여러 이점을 그대로 유지할 수 있습니다.

이 글이 여러분의 정적 웹사이트 프로젝트에 새로운 아이디어를 불러일 수 있기를 바랍니다. Jamstack은 정적 웹사이트에 훌륭한 선택이지만, 동적 콘텐츠를 위해 굳이 별도의 API 백엔드 전체를 구축할 필요는 없습니다. 대신 빌드 작업을 통해 업데이트된 콘텐츠로 설정 파일을 생성하는 방식은 어떨까요? 모든 사용 사례에 맞지는 않겠지만, API 하나를 줄인다는 것은 인프라의 복잡성도 그만큼 줄어든다는 의미입니다.

다음 정적 웹사이트 프로젝트에 이 글이 도움이 되기를 바랍니다. 계속 배우고, 즐거운 코딩 되세요.