Github jekyll 테마 적용하다 만난 오류들(Chirpy 테마)

lzlkolo·2023년 4월 26일

혹시 나처럼 구글링해도 안나오는 생소한 문제때문에 헤매고 있을 누군가를 위해 github jekyll테마 적용하다 만난 오류를 기록해본다.

오류 1. Gemfile 생성 안됨

테마 주소를 Join한 레파지토리를 생성하고 clone한 후 ruby 설치하고 하려는데 계속 Gemfile이 없다고 나온다.

저장소를 지웠다 만들었다 몇 번을 반복해도 똑같았고 Gemfile이 생성이 안되서 결국은 githubname.github.io 레파지토리를 생성하고 원격에서 clone 후 적용하는 방법으로 해보기로 한다.

오류 2. 빌드 실패(js파일 does not exist)

방법을 바꾸고 로컬에서는 적용된 테마가 잘 나왔는데 git에 push하려고 하니 빌드 실패
이 문제 때문에도 몇 번을 지웠다가 다시 만들고...
다시 보니 원격에서 실행해볼 때 아래처럼 에러 메시지가 나와서

일단 404.html(로컬 루트), about.markdown, index.markdown 세개 삭제해서 오류 메시지를 없앴다.

빌드 실패..!!

저 긴 문구들이 복잡스러워서 읽을 엄두가 안났는데 정신 붙잡고 하나하나 읽어보니 [assets]/[dist]디렉토리 내 js파일이 없단다.

혹시 해결방법을 찾으신다면 아래로 내려가주세요..
그 전까지는 저의 오답노트..

원격저장소에서 찾아보니 js파일이 [assets]/[dist] 디렉토리가 아닌 [_javascript]에 들어가 있다.
심지어 [assets] 내에 [dist]가 아예 없다..!!!

구글링을 아무리 해도 이런 문제를 겪은 사람은 없는 거 같기에.......
다시 해결 방법을 생각해봤다.

먼저 [dist]디렉토리의 js파일을 참조하는 코드를 확인해봤다.

여기서 잠깐 고민을 했다.

코드를 수정할까?
파일을 옮길까?

코드를 수정하기엔 좀 겁나서 [assets]디렉토리 내에 [dist] 폴더를 만들고 js파일을 옮겼다.

음 그래도 똑같은 오류가 나네

그럼 코드를 수정해봐야겠다.
assets/dist를 검색해서 전부 다 _javascript로 변경했다.

다시 push

그래도 안된다?!
오히려 오류가 12개로 늘어남..?ㅎㅎㅎㅎ

위의 모든 과정을 거치고도 계속 js파일을 찾을 수 없다고 나왔는데 드디어 해결방법을 찾았다.

빌드 실패(js파일 does not exist) 해결 방법
아래는 오류 문구

internal script /assets/js/dist/misc.min.js does not exist (line 1)
- _site/categories/서브-카테고리/index.html

1.위처럼 js파일이 애초에 잘못된 디렉토리로 지정되어 있다면 먼저 참조하는 코드를 올바른 경로로 수정한다.

2.jekyll은 js파일을 처리하는 디렉토리가 정해져있고 [_javascript]는 그 디렉토리가 아니기 때문에 jekyll이 [_javascript]라는 폴더 안의 js파일을 처리할 수 있도록 _config.yml 코드를 수정한다.

include:
 - _javascript

코드의 위치는 상관없다.

jekyll push 후 404에러 해결 방법

드디어 js파일을 못 찾는 문제는 해결했고 원격에서는 실행이 잘 되는 것을 확인했다.

근데 git에 push하니까 404에러가 뜬다.

머선일이고..

찾아보니까 jekyll은 언더바()가 있는 파일, 폴더를 특수 리소스로 판단하고 사이트에 복사하지 않도록 설정되어있다고 한다.
[_javascript] 폴더명 앞에 붙어있는 언더바(
)때문이라는데!?

정말로 확인해보니 git에 push된 폴더 중 [_javascript] 폴더와 몇 개 파일이 없다.
루트 디렉토리에 .nojekyll 파일을 생성해주면 된다고 한다.
자 다시 .nojkeyll파일을 생성하고 다시 업로드해본다.

근데 또 문제 발생
push하려고 하니 수정된 게 없다고 한다.

누락된 파일, 폴더들을 git에서 직접 올려본다.

직접 올려보는 건 처음이라 잔뜩 긴장했는데
오마이갓

드디어 빌드 성공!!!!!!!!
이제 잘 나온다.

결국 만들어냈다.
희열 쩐다..

3개의 댓글

comment-user-thumbnail
2024년 2월 8일

저도 처음에 dist 가 없는 문제 때문에 이 블로그 보고 따라했는데 자잘한 문제가 있어 이걸 해결하려고 씨름하다가 알아낸 진짜 해결방법을 공유해드립니다.

asset/js/dist/....min.js 파일들이 없다는 오류를 해결하기 위해 본 포스트 내용을 적용하면 당장 오류는 잡을지 몰라도 다크테마<->라이트 테마 전환이나 검색 기능 등이 동작하지 않게 됩니다...

asset/js/dist/....min.js 파일들이 없는 이유는 테마를 fork 또는 클론한 뒤 "bash tools/init" 명령어를 실행하지 않았기 때문입니다.

공식 가이드 https://chirpy.cotes.page/posts/getting-started/#option-2-github-fork 에 나와있는 것처럼, fork나 clone을 한 직후에 "리눅스 환경"에서 "최신 버전"의 node.js를 설치한 뒤 "bash tools/init" 명령을 실행하면 asset/js/dist/ 가 정상적으로 생성되며, 기능 문제 없이 성공적으로 빌드할 수 있습니다.

참고로 node.js를 설치할 때 그냥 "sudo apt install node" 하시면 "bash tools/init"가 중간에 실패하게 됩니다. 리눅스 패키지 서버에 있는 node 버전은 12버전대이므로 구식이기 때문입니다. 따라서 최신 버전의 node를 꼭 설치하셔야 됩니다. 그 방법은 아래 URL을 참고하세요.
https://jjeongil.tistory.com/2106

2개의 답글