Wordpress에서 Hugo로 블로그 새 단장

회사를 다니기 시작한 2018년 이후로 거의 블로그 업데이트가 없었다. 일로 인해 너무 바쁘다 보니 취미로 하던 코딩과 IT 기술 공부만 깔짝대기도 바빴기 때문에, 블로그는 댓글 위주로만 살짝씩 건드렸고 그나마도 서버 설정이 뭐가 잘못됐는지 중간부터는 댓글 알림도 오질 않았다. 새로 달린 댓글도 답글 없이 거의 6개월 ~ 1년 가까이 방치하기 일쑤였고. 최근 들어서야 저녁 시간에 조금 시간이 나기 시작하면서 그동안 관리하지 못하던 것들을 다시 조금씩 관리하기 시작했다.

2018년 당시 사용하던 Synology NAS는 진작에 처분한 지 오래고, 그 후로는 Odroid H2를 이용한 Ubuntu 서버에 Docker로 Wordpress를 설치하여 사용하고 있었다. 문제는 가끔 관리하고 거의 방치하다 보니 시간이 지나면 지날수록 뭔가 하나씩 이상해지고 느려지고…. 급기야는 관리자페이지 로그인도 안되는 사태가 일어났다.

그래서 결국 예전처럼 Jekyll과 같은 Static Site Generator(이하 SSG)를 활용해서 블로그를 새 단장 하기로 했다. 하지만 Github Pages와 완벽히 연동되어 있기까지 한 Jekyll을 선택하진 않았다. 이유는 Windows 환경에서 Ruby 설치가 굉장히 귀찮고 Jekyll을 설치하기도 참 어렵다는 것이다. 그동안 Jekyll이 업데이트를 하면서 무슨 일이 있었는지는 모르겠지만 패키지 설치를 하면서 SSL 라이브러리 등을 빌드를 하던데 그 과정에서 한번 에러가 나면 다시는 복구도 안 돼서 아예 Ruby를 다시 설치해야 했다. 윈도가 문제인 건지 Ruby가 문제인 건지 Jekyll이 문제인 건지……

여튼 그래서 그냥 아예 윈도용 바이너리가 있는 Hugo를 선택했다. SSG 도구 중에서는 Jekyll만큼 핫하기도 하고, Go언어 기반이라 데이터가 많아져도 빌드가 굉장히 빠른 게 장점이다. 2013년에 Jekyll 기반으로 Github Pages에 배포했던 블로그 소스 코드가 있어서 사실 글과 댓글만 가져오면 금방 Github Pages로 이동할 수 있었지만, 위의 이유로 인해 새로 Hugo로 블로그를 만들었다.

이를 위해 수행한 작업은 다음과 같다.

1. Jekyll 템플릿 코드를 Hugo 코드로 마이그레이션
2. Git으로 대용량 이미지 관리를 하기는 어려우므로 이미지 CDN 서비스 Cloudinary 사용
3. 댓글 시스템을 구현하기 위해 Staticman 사용
4. Github Action으로 빌드, 배포 자동화

사실 마이그레이션 작업이라고 하기도 뭐한 게, 블로그 글을 위한 마크다운 파일을 제외하고는 사실 대부분 새로 만든 수준이기 때문이다. 워드프레스에서 사용하던 Avada 테마에서 마음에 들었던 부분들을 가져오려고 했고, 테마 컬러도 유지하려고 하다 보니 SCSS건 HTML이건 새로 짰다고 해도 과언이 아니다. Cloudinary에 이미지를 올려놨던 것은 백업 용도로 예전에 좀 정리를 해둔게 있어서 다행히 금방 완료할 수 있었고, 이미지 전용 서비스답게 URL만 살짝 변경해도 이미지 사이즈나 필터를 먹이는 등의 작업이 가능해서 템플릿에서 해당 기능을 유용하게 잘 써먹었다.

가장 큰 문제가 Staticman을 연동하는 거였다. 사실 이번 재단장을 하면서 웬만하면 개인 서버가 아니라 믿을만한 외부 서비스를 저렴하거나 무료로 사용하자는 부가적인 목표가 있었는데, 이를 위해서 Heroku에서 무료로 Staticman 서버를 생성하여 사용하였다. 문제는 이 서버 인스턴스가 미국에 있다는 거였고, 이로 인해 Staticman 서버에 Request를 날리는 데 시간이 좀 걸려서 UI 쪽에서 댓글 등록 요청 중임을 반드시 반영해 줄 필요가 있었다. 안 그래도 Staticman을 제대로 연동한 오픈소스 템플릿은 Jekyll 템플릿인 Minimal Mistakes 말고는 거의 없다시피 한 상황에서 내 전용의 댓글 템플릿을 새로 만들어야 했는데, 거기에 자바스크립트도 건드려야 하게 되었다. 다행히 어찌어찌 잘 해결은 해서 댓글 시스템도 잘 작동하는 것 같다.

Github Action으로 빌드, 배포 자동화는 생각보다 쉬웠다. 벌써 많은 사람이 Hugo 자동배포용 코드를 만들어 놨기 때문이다. 공식 사이트에서도 제공하기도 하고. 블로그 글 작성 및 댓글 작성 시간이 변경되는 문제를 해결하기 위해서, 타임존 변경을 위한 Action만 추가해 주었다. 처음엔 몰랐는데, Staticman이 댓글 작성 시간을 기록할 때는 무조건 UTC 기준이라 반드시 필요한 과정이었다.

이런저런 과정을 거쳐서 일단은 이제 개인 서버에서 워드프레스를 내려놔도 될 정도까지는 된 것 같아 도메인 설정 등 마무리 작업을 통해서 이렇게 작업을 완료하였다.

바로 이 이전 블로그 글이 2018년이라니, 그동안 블로그에 정말 소홀하긴 했다. 가끔 들어와서 댓글도 정리하고 하긴 했지만… 확실히 글을 계속해서 안 쓰다 보니 구글 애널리틱스 보고서에도 한 달에 4000 정도 되던 조회 수가 1200 정도로 줄었다. 다시 좀 열심히 써보려고 한다. 그동안 기록하고 싶었던 일들이 너무나 많다. 우선 이번 작업을 하면서 Hugo와 Staticman 등에서 Trial & Error가 꽤 있었는데, 이것부터 한번 블로그에 정리해 둬야겠다.

아참, Vaultpress 때문에 가입한 Wordpress Jetpack 유료 구독부터 취소해야겠다.