저는 프론트엔드 개발자이기 때문에 Ruby 같은 다른 스크립트 언어에는 익숙하지 않습니다. 처음 블로그를 시작할 때 Github Pages를 블로그 플랫폼으로 사용했는데, 기본적으로 Jeklly 프레임워크를 사용했습니다. 내용이 프레임워크보다 중요하다고 생각해서 그냥 사용하게 되었고, 이렇게 10년이 흘렀습니다.
그동안 몇 가지 테마를 바꿨고, 나중에는 Hux가 제공하는 테마로 정착했습니다. 깔끔하고 세련되며 오픈 소스였기 때문입니다:
이 테마에 맞춰 많은 커스터마이징을 했습니다. 예를 들어 오른쪽 콘텐츠 사용자 정의, 데이터 사용자 정의, Notion을 데이터 소스로 사용하여 렌더링하는 등이 있었습니다.
하지만 Apple의 M 시리즈 칩이 출시되면서 Intel과 Apple 칩 간의 Ruby 차이점을 처리하는 것이 점점 어려워졌습니다. 예를 들어 빌드할 때 특정 x86 아키텍처 명령어를 사용해야만 간신히 올바르게 빌드되는 경우가 있었고, 이는 어떤 의존성도 마음대로 변경할 수 없는 상태에서였습니다:
이유는 모르겠지만 Hexo에서 :category/:name.html을 설정했는데도 life/2024-life-xxx.html(- 디렉토리 구분 사용)가 생성되었습니다. 예상대로라면 life/xxx.html이어야 했습니다. 소스 코드 name를 보면 slug의 basename를 사용하지만, slug 생성 로직은 folder 경로를 기반으로 하여 -를 추가하는 방식이었습니다. 그래서 파일 이름을 수동으로 수정할 수밖에 없었습니다. Jekyll에서는 파일 이름 앞의 날짜 형식(예: 2024-02-12-xxx.md)에서 2024-02-12는 무시되고 title은 바로 xxx가 됩니다. 하지만 Hexo에서는 post에서 읽는 title이 front matter의 title이기 때문에 permalink 주소를 최종 결정하기 위해 filter 플러그인을 작성해야 했습니다:
그렇지 않으면 오류가 발생합니다(.endsWith를 보면 왜 오류가 나는지 알 수 있습니다):
EJS 템플릿 문법 문제
ejs 템플릿을 중첩할 때 Jekyll의 liquid 문법과 달리 템플릿 내에서 front-matter를 사용자 정의할 수 없습니다. 즉, 템플릿 간의 매개변수 전달은 외부에서 내부로만 가능하고 내부에서 외부로는 불가능합니다. 예를 들어 index의 레이아웃이 page이고 front-matter도 설정했지만 이 front-matter는 page.ejs 템플릿에서 읽을 수 없습니다. 그래서 사용하는 모든 곳에서 매개변수를 전달해야 했습니다.
Markdown 문법 렌더링 문제
Hexo의 기본 marked 마크다운 렌더러는 jekyll의 karmarkdown 렌더러와 차이가 있습니다. 전자는 ## h2 (줄바꿈+빈 줄) 단락에서 빈 줄+단락을 무시하는 반면 후자는 그렇지 않습니다.
큰 문제는 아니지만 이렇게 되면 홈페이지에서 콘텐츠 요약에 공백이 하나 빠져 완전히 일치하지 않게 됩니다. 저는 가능한 한 완전히 일치시키고 싶었습니다. 그래야 SEO 순위가 떨어지지 않고 검색 엔진이 콘텐츠에 큰 변경이 있었다고 판단하지 않을 수 있습니다.
그래서 markdown-it을 사용해 처리했고, hexo-renderer-markdown-it을 설치했습니다.
문제는 Liquid의 정렬에서 sort 부분이 동일한 경우 href 문자열로 정렬된다는 점입니다. 따라서 이를 상속받으면:
Mermaid 문법 문제
mermaid는 highlight로 강조 표시할 수 없으며 hexo의 config에서 제외해야 합니다:
1 2
exclude_languages: -mermaid
Markdown에서 EJS 문법 사용 불가 문제
일단은 건드리지 않고 우회했습니다.
페이지네이션 생성 문제
hexo-generator-index의 pagination은 page/2, page/3 형식으로 생성되지만 jekyll에서는 page2, page3 형식을 사용합니다. 그래서 해당 플러그인 소스코드를 복사하여 로컬에서 수정했습니다(scripts/pagination.js 위치):
기본적으로 취소선은 s 태그를 사용하지만 jekyll은 del 태그를 사용합니다. after_render:html을 이용해 직접 교체했습니다(scripts/tag-del.js 위치):
1 2 3
hexo.extend.filter.register('after_render:html', function (str) { return str.replace(/<s>/g, '<del>').replace(/<\/s>/g, '</del>'); });
빌드 후 불필요한 파일 문제
일부 파일은 불필요하므로 빌드 후 삭제합니다:
구체적으로 다음 파일들이 해당됩니다:
categories/*
i_dont_wanna_use_default_archives/*
i_dont_wanna_use_default_tags/*
less/*
RSS 문제
Notion Bookmark에서 가져온 콘텐츠를 Notion의 Bookmark처럼 보기 좋게 렌더링하기 위해 커스텀 태그 스타일을 사용했습니다. 하지만 이렇게 하면 Reeder 같은 RSS 리더에서 스타일이 제대로 렌더링되지 않는 문제가 발생했습니다. 그래서 Jekyll에서는 템플릿 문법 처리 함수를 사용해 빌드 시점에 커스텀 스타일을 동적으로 교체하도록 처리했습니다:
1 2 3 4 5 6 7 8 9
moduleJekyll moduleBookmarkFilter def bookmark_filter(input) input.gsub(/^\<p\>\<a\s+class=\"link-bookmark\"\shref=(.*)\starget=\"_blank\"\>\<span\>(.*)\<\/span\>\<span\>\<span\>(.*)\<\/span\>\<span\>\n(.*)\n\<\/span\>\<span\>(.*)\<\/span\>\<\/span\>\<\/a\>\<\/p\>$/, '<p><a href=\1 target="_blank">\3</a></p>'); end end end
저는 인생의 중요한 선택의 기로에 섰을 때, 누군가 최선의 방법을 알려주어 소중한 시간을 헛되이 보내지 않기를 바라곤 합니다. 그런 마음으로 저는 자주 블로그를 쓰며, 광활한 인터넷의 이 작은 구석에 제게는 단 한 번뿐인 인생 경험을 기록하여 도움이 필요한 분들에게 도움이 되기를 바랍니다.