(2022년 10월 9일 시점에 개츠비에서 Eleventy로 갈아탔다. 개츠비의 여러가지 기능에 만족하기도 했지만 나만의 블로그를 만드는 데 있어서 기능보다는 Eleventy의 단순 명료한 정적 사이트 제작 환경이 더 마음에 들었다. 참고해서 보시길.)
벌써 3주 이상 블로그 환경을 워드프레스에서 개츠비(Gatsby)로 옮기고 있다. 발단은 도메인 문제가 걸린 외부적인 요인인데 원하지 않게 시간이 많이 소모되고 있지만 결과적으로 요즘 유행하는 Jamstack에 대해 알아보고 개츠비 기반의 정적 사이트 제작에 대해 여러가지를 정리해볼 수 있었다. 아직 진행 중이고 문제도 많아 언제 끝날지 모르지만 일단 GitHub에 정착하게 되어 글을 올려본다.
이 과정에서 내가 얻은 가장 큰 교훈은 하나로 요약할 수 있다. 블로그 이전은 웬만하면 추천하지 않는다.
워드프레스의 장점과 단점
워드프레스가 전세계 블로그 플랫폼의 최강자이긴 하지만 누구나 만족하며 사용하지는 않을 것이다. 7년간 워드프레스를 사용하면서 장점으로 느낀 것은 다음과 같은 것들이다. 개발자 관점이 들어가 있다.
- 생태계가 방대하므로 원하는 거의 모든 기능은 플러긴으로, 디자인은 테마를 설치하여 해결할 수 있다.
- 플러긴이나 테마로 해결 안되거나 원하는 경우 입맛에 맞게 커스터마이징이 가능하다. 설치형 블로그의 장점이다.
- 일단 정착이 되면 관리자 페이지에서 전반적인 블로그 상태를 관리할 수 있다.
다음은 단점이다.
- 상업적 목적이 태생이므로 플러긴이라든가 테마 등에 비용을 들이는 방향으로 자꾸 유도된다.
- PHP라는 개발 환경 특성상, 워드프레스의 구조적 특성상 결과물에 비해 사이트 속도가 느리다.
- 경량화된 클라우드 환경이 대세인 요즘 추세에 비해 PHP 실행, 데이터베이스 운영 등 서버 환경에 대한 요구 사항이 크다.
Jamstack
그래서 이왕 블로그를 이전하는 김에 대안을 찾아보게 되었고 먼저 눈에 들어온 것이 GitHub에서 Git 저장소에 HTML을 올리면 바로 웹 사이트를 띄울 수 있다는 “정적인 사이트” 플랫폼이었다. Jamstack은 이러한 정적인 사이트의 핵심 기술인 JavaScript, API, Markup을 합한 기술 스택이란 의미이며 웹 초창기의 HTML 기반 정적인 사이트와는 다르게 진화한 JavaScript 위주 웹사이트의 기반 기술을 의미한다.
GitHub는 깃허브 페이지라는 개념으로 정적인 사이트를 지원하는데 Ruby 언어 기반의 정적 사이트 제너레이터인 Jekyll을 기본적으로 사용할 수 있게 해준다.
Jekyll 테마 중 Minimal Mistakes를 알게 되었고 그 블로그 스타일이라든가 지원하는 기능이 마음에 들어서 설치해보고 커스터마이징을 시작했는데… 좀더 깊게 커스터마이징하려면 Ruby를 설치하고 소스를 수정해야 하는 것이었다. 정적 사이트를 만드는데 내가 잘 모르는 서버 기술이 필요하다니.
아쉽지만 낯선 Ruby를 공부하기보다는 다른 방법을 찾아보기로 했다. 이미 React 기반의 웹사이트 제작 도구인 Gatsby는 알고 있었지만 블로그를 쉽게 만들 수 있는지는 몰랐는데 샘플 프로젝트 성격인 "스타터"가 상당히 많이 있어서 Jekyll처럼 선택하고 설치하면 금방 블로그를 띄울 수 있음을 알게 되었다. 그래서 이번에는 Lumen이라는 Gatsby 스타터를 선택하여 커스터마이징을 시작했다. 그러나 역시 쉽지만은 않았다. 커스터마이징 과정에서 다음과 같은 교훈을 얻었다.
- Gatsby 공식 플러긴은 안정적이고 쓸만하다는 느낌을 받는데 커뮤니티 플러긴은 엉성한 면이라든가 버그가 보인다. 뭔가 필요하다면 공식 플러긴부터 살펴 보는 게 좋다.
- 디자인은 내 영역이 아니라 또 다른 어딘가에서 소스를 따오든지 영감을 받아 직접 제작해야 한다.
- 본격적으로 커스터마이징하려면 GraphQL이라든가 SASS 등 또 다른 여러 기술을 공부해야 한다.
워드프레스에서 Gatsby 기반 개발/배포로 옮기기
Gatsby는 다른 정적 사이트 생성기와 마찬가지로 Markdown 파일을 콘텐트 소스로 하여 정적인 HTML을 만들어 낸다. 이 과정에서 효율적인 페이지 구조, 이미지 리샘플링 등의 최적화가 자동으로 처리된다. 이 HTML이나 CSS, JS, 이미지 등을 GitHub에 저장소에 올리고 GitHub 페이지를 열겠다고 설정하면 된다.
내가 Gatsby Lumen 스타터를 기반으로 워드프레스에서 GitHub로 블로그를 이전한 과정은 다음과 같다.
- 워드프레스 콘텐트 내보내기(XML 파일 다운로드)
- wordpress-export-to-markdown을 사용하여 마크다운 파일 및 이미지 파일 추출 - 원하는 마크다운 형식을 위해 소스 수정 - 추출 반복
- Gatsby Lumen을 로컬에 클론하고 그 안에 마크다운, 이미지 복사,
gatsby develop을 실행하여 브라우저에서 확인, 커스터마이징 반복 gatsby build로 배포를 위한 산출물을 만듦.gatsby develop과 달리 마크다운 페이지에 오류가 있는 경우 전체 빌드가 중단되므로 오류를 모두 없앤 후 빌드해야 한다.- GitHub에 개인 GitHub 페이지 저장소를 만듦(feeva.github.io)
- 산출물을 개인 GitHub 페이지 저장소로 푸시 -
gh-pages -d public -b master -r git@github.com:feeva/feeva.github.io.git - 이제 https://feeva.github.io 를 열면 페이지가 나타난다.
Gatsby Lumen 커스터마이징
기본 상태의 Lumen을 보니 원래 워드프레스에 비해 부족한 것이 많았다. 지금까지 다음과 같이 커스터마이징했다. 커스터마이징 결과는 feeva.gatsby-starter-lumen 프로젝트로 GitHub에 올렸다.
- 시작 페이지 상단에 대형 이미지 배치 - Jekyll Minimal Mistakes 테마의 Hero 이미지 오버레이를 따서 컴포넌트를 만들어 넣음
- 글 목록의 각 글에 대표 이미지가 있으면 나오게 했다 - 소스 Markdown의 frontmatter에
featuredImage라는 필드를 넣고 해당 필드가 있는 글에 대해서는 gatsby-image의 최적화 기능을 활용하도록 보완 - 글 속성 중 카테고리를 하나만 지정할 수 있었으나 태그처럼 다수 지정할 수 있도록 보완
- 나중에 다국어 제공을 대비해서 일단 날짜라도 로캘 고려 - 자바스크립트
Date개체의toLocaleString()활용 - 워드프레스 같은 이미지 갤러리는 아니더라도 부족하나마 “이미지 그리드”, 이미지 확대 기능 추가
- 페이지 이동간 댓글이 다시 나타나지 않는 문제가 있는 react-disqus-comments 모듈을 제거하고 gatsby-plugin-disqus 모듈 추가
- 다양한 스타일 변경 - 본문 영역 폭, 글꼴 크기, 코딩 구문 강조 스타일 등 다양한 부분을 입맛에 맞게 바꿨다.
다음은 안되는 것, 앞으로 하려고 생각 중인 것들이다.
- 검색 기능 추가 - 클라이언트 기반 검색 엔진이 몇 가지 있어서 활용 예정
- 페이지별 단독 스크립트 추가 기능 - 페이지에 따라 단독으로 자바스크립트를 사용해야 할 경우가 있는데 아직 자바스크립트를 삽입할 수 있는 기능을 구현하지 못했다. 현재 여러 페이지가 이 문제로 정상 표시되지 않는다.
- 페이지 이동 컴포넌트가 “이전”, “다음” 방식인데 페이지 번호 방식으로 변경
- 블로그 외에 다른 형식의 콘텐트 추가
- 문의 양식
- 광고나 기부 기능
기타 어려웠던 문제들
이번 작업에서 가장 시간을 많이 잡아 먹은 것은 Disqus 댓글을 붙이는 작업이었다. 댓글 모듈을 뭘 사용할 것인가부터 고민이 많았으며 특히 기존 워드프레스 댓글을 Disqus에 부었는데도 블로그에는 나타나지 않는 문제를 잡느라 시간이 많이 걸렸다.
기타 예상치 못한 문제들은 다음과 같다.
- 기존 워드프레스 댓글을 Disqus 댓글로 옮겨서 새 블로그에서 나타나게 하려면 블로그 글의 식별자를 댓글과 매칭시켜야 하는데 Gatsby의 Disqus 모듈에서는 글 제목을 식별자로 사용하는 반면 Disqus로 불러오기한 경우는 어떤 식별자를 사용하는지 분명하지가 않았다. 결국 Disqus의 API 콘솔에서 댓글을 조회해봤는데 식별자가 없는 것이었다. Disqus 연동 문서를 보니 식별자가 없는 경우 링크 URL을 식별자로 사용한다는 것을 보고서야 해결 방법을 찾았다. 기존 콘텐트를 마크다운 파일로 만들 때 frontmatter에 링크 URL을 심어놓고 그 URL을 Disquss 모듈에 넘겨줌으로써 해결했다.
- 난 Windows 환경에서 Visual Studio Code로 개발하는데 VS Code가 WSL을 지원하기 때문에 윈도에서도 리눅스 환경으로 개발할 수 있다. 그래서 Gatsby도 리눅스 환경으로 개발했으나 파일 복사 과정 중 문제가 발견되었다. 결국 순수 윈도 환경에서 Gatsby를 개발했다.
- Lumen 프로젝트는 Jest 기반 단위 테스트를 지원하는데 내가 커스터마이징한 것 때문인지 내가 만든 테스트는 물론 원래 테스트도 진행 자체가 잘 되지 않는다. 확인하고 고치려면 시간이 더 필요하다.
맺음말
아직 온전하지는 않지만 페이지가 빠르게 열리는 걸 보면 상당히 만족스러운 기분이다. 그러나 도입부에서 말했듯이 상당히 힘든 과정이다. 결국 모든 걸 내가 책임지고 커스터마이징해야 한다는 것은 장점이면서도 피곤한 단점이 되기도 한다. 요즘 대세가 되고 있는 정적 사이트 개발이 좀더 일반화가 되면 이런 과정이 좀더 쉬워지리라 생각해본다.