Hexo에서 Gatsby로 플랫폼 이전하기 1

Tags: gatsbymigration

June 11, 2021

블로그 이전?

현 회사로 이직한 후 블로그 관리를 거의 하지 않았다. 새로운 회사에서의 적응이 제일 우선이었고 이후에는 블로깅에 별로 흥미를 가지지 않았다.

그러다가 최근 개인적인 시간이 생겼고 블로깅이 다시 필요하다고 생각이 들었다. 기존 블로그에 글을 올리는 것도 괜찮았겠지만 아니나 다를까 여기저기 기웃거리며 야크셰이빙을 하다가 다른 플랫폼으로 옮겨보자는 생각이 들었고, 아래의 조건에 알맞은 플랫폼으로 Gatsby를 사용해보기로 결정했다.

  • 마크다운 기반일 것
  • 마크다운이 플랫폼 종속적이지 않을 것
  • 블로그 기능 커스커마이징이 가능할 것
  • Github page에 publish 가능할 것

Hexo 종속성 문제

프론트매터 (Frontmatter)

Gatsby도 Hexo와 같이 마크다운 파일을 파싱해서 웹페이지를 생성해준다. 각 마크타운 파일 가장 위에는 아래와 같은 부분이 있는데 프론트매터라고 부르며 글의 메타데이터를 포함한다.

---
title:
category:
date:
tags:
---

기존의 프론트매터는 Hexo에 종속적이었지만 쉽게 이전할 수 있었다. 먼저 title이나 date는 공통적으로 사용하고 있었고, 나머지는 커스터마이징으로 쉽게 추가하고 뺄 수 있었기 때문이다.

이미지

Hexo에서는 플러그인을 사용해서 다음과 같은 문법으로 이미지를 첨부해야 했다.

{% asset_img filename alt %}

Gatsby에서는 일반적인 마크다운 문법 [alt](filename)을 사용하기 때문에 기존의 마크다운 파일을 하나하나 수정했다. 지금에서나 드는 생각이지만 매크로를 사용했으면 더 간단히 할 수 있었을 것 같다.

코드블럭

기존 Hexo에서는 글에 코드를 넣을 때 마크다운에 직접 코드를 넣는 대신에 GitHub Gist에 있는 코드를 가져와서 보여주는 플러그인을 사용했다. 코드를 따로 관리할 수 있는 점에서는 좋았지만 Github gist에 너무 종속적이고 번거로웠다.

{% gist gist_hash filename %}

이미지와 마찬가지로 각 마크다운 파일을 직접 수정해서 코드를 넣어줬다.

댓글창

기존에 Hexo 블로그에서는 Disqus를 이용해서 댓글 기능을 추가했었다. 하지만 블로그를 운영하면서 댓글이 그리 많지도 않았고 특별히 필요하다고 생각되는 부분도 없어서 새 블로그에는 댓글 기능을 넣지 않기로 했다.

댓글 대신에 GitHub 이슈 기능이나 트위터로 충분히 소통이 가능하다고 생각한다.

RSS

gatsby-starter-blog에 이미 포함되어 있는 gatsby-plugin-feed를 이용했다. 기존의 rss 주소에 맞춰서 약간의 수정을 해주었다.

Google Analytics

이것도 RSS와 마찬가지로 기본으로 포함되어 있는 gatsby-plugin-google-analytics를 이용했다. 기존에 쓰던 Google Analytics Tracking ID만 가져오는 것으로 아주 간단히 셋업이 가능했다.