[Blog] GitHub Jekyll 기반에서 Vuepress 기반으로 이관 후기

Chance1분 미만

😀 GitHub.io

현재 블로그는 GitHub에서 제공하고 있는 정적 웹 호스팅을 통해 제공되고 있다.
여기서 제공되는 옵션이 많지 않고 거의 Native로 Jekyll 정적 페이지를 제공한다.

정적 웹 사이트로 제공된다는 특성 상 장점도 꽤나 많겠지만 Jekyll은 단점도 눈에 보였다.
가장 큰 것은 Jekyll은 Ruby 기반으로 제작되어 접근성 측면에서 일부 어려움이 존재했다.

커뮤니티를 위해 많은 사용자 풀을 가진 Minimal mistakes 테마로 블로그를 구축하였지만,
접근성 때문에 수정이나 구조적인 부분을 이해하는 것이 까다로울 수 밖에 없다는 단점은 안고 갔다.

이러한 부분으로 인해 내가 원하는 부분에 대한 디자인 등을 반영하기에 까다로움과 고민이 있었다.

우선 Vuepress의 장점 중 가장 큰 것은 확장성이라 볼 수 있다.

필자는 Front-End 개발자가 아니기에 자세하기 서술하기에는 어려움이 있지만,
JavaScript 기반 Front-End 프레임워크로는 React와 쌍벽을 이룬다고 알고 있다.

그렇다보니 확장성이 뛰어나고 Vue.js를 기반으로 하기에 커뮤니티도 Jekyll에 비해 뛰어나다.

또한 기존 Jekyll에 비해서 작성한 포스팅에 대한 Directory 깊이를 더 세분화할 수 있었다.

Vuepress로 옮기는 과정이 확장성이라는 키워드를 하나만 믿고 할 수 있진 않았다.

Vuepress는 URL이 기존과 차이가 있어 Google에 등록된 알고리즘을 포기해야했다.

이로 인해 테스트 과정에서 기존 URL로 접속하는 경우 404 not found를 확인하였다.

내 경우 해결책으로 client.ts에 기존 콘텐츠 URL을 신규 URL로 Route 설정했다.
하지만, 블로그 이전이 완료된 후 확인해보니 404 페이지 노출 → 페이지가 깨지긴 하더라..

어차피 이렇게 된거 사이트 구조를 조금 더 세부적으로 정리하고 Route 설정을 해둔 상태이다.

기존 사용하던 GitHub 댓글 시스템은 utterances로 구축된 상태였다.

지금 사용하는 Vuepress-theme-hope는 해당 댓글 시스템을 제공하지 않는다.
그렇다보니 그 중 가장 나은 Giscus 시스템으로 이관을 결심했고 댓글을 옮기게 됐다.

기존의 댓글은 Issue 형태로 보관됐지만 이관하게 되면 Discussions로 관리한다.
Issue에 보관된 댓글을 별도로 이관하는 작업을 추가로 해야한다는 번거로움이 생긴다.

그래도 이관이 가능하다는 점에서 나는 별도로 이관하는 절차를 진행해둔 상태이다.
댓글 시스템 설정과 이관 과정은 별도로 포스팅을 남겨두었으니 필요하다면 참고바란다.

기본적으로 제공되는 형식의 차이는 거의 없지만 이미지 반영 부분의 차이가 있었다.

### 기존 
![](/imageURL.png) {변경하고자 하는 CSS}

### 변경
![](/imageURL.png "title" =<xsize>x<ysize>)

이렇게 형식이 변경되다 보니 전체적으로 이미지로 선언한 부분을 변경할 필요가 있었다.

마지막으로 배포 방식에서 Jekyll하고 가장 큰 차이를 보이고 단점이 있었다.

우선 Jekyll의 경우 GitHub 자체에서 제공하기에 자체적으로 정적 페이지가 제작된다.
Vuepress는 별도의 정적 페이지 변환 작업을 GitHub Action을 통해 만들어줘야한다.

또한 GitHub Action을 사용해야하니 GitHub Token도 필요로 되는 사항이 존재한다.

물론 기본적으로 Vuepress와 Theme에서 제공하고 있지만 어느정도 이해는 필요한 부분이다.

나의 경우 기존 main Branch를 기반으로 서비스를 하고 있었는데 이에 변경이 필요하게 됐다.
이번 구조는 main Branch 내 Source로 정적 페이지를 gh-pages에 생성하게 했다.

그리고 Build and deployment 내에 서비스되는 Branch를 변경하여 최종 반영했다.

결국 이 포스팅을 하고 있다는 것은 내가 이관을 결심하여 이관까지 끝냈기 때문일 것이다.

이관을 결정하는 데에는 Vuepress가 제공하고 있는 장점과 어차피 이관을 할 것 같아서였다.
내 성격 상 현재의 것보다 훨 낫다고 생각하면 덮을 수 있는 리스크라면 감내하여 하는 편이다.

또한 지금 이 포스팅을 작성하고 있는 시점과 이관 시점은 나의 휴가 기간이기도 하다.
(휴가 기간에 블로그 이관 했다고 하면 이상하게 보는 사람들도 있을 것 같긴 하다..)

현재 위와 같은 단점과 귀차니즘을 모두 이겨내고 이관했고 디자인 등 나름 만족하고 있다.
다만, 아쉬운건 원래도 적었던 페이지 클릭 수가 줄어드는게 아닐지 하는 생각이다..

오랜만에 포스팅으로 블로그 이관을 진행하게 된 것에 대한 후기로 돌아왔습니다.

학교 생활과 회사 생활을 같이 하면서 블로그 포스팅을 하기가 쉽지 않네요.
올해 무더운 여름이 지나가고 있습니다. 다들 더위 조심하시고 파이팅입니다!

포스팅 읽어주셔서 감사드립니다. 다음엔 더 좋은 글로 보답하겠습니다! 😎