TL;DR
- Nuxt의 Content 모듈을 사용해 마크다운을 렌더링
- Nuxt를 통해 SPA 웹사이트를 빌드
- 빌드된 웹사이트를 Netlify로 호스팅
- Netlify CMS로 마크다운을 작성해 Git push 가능
왜 갈아엎었는가?에 대한 변명
올해 초에 Nuxt.js와 Contentful, Github Actions, 그리고 Github Pages로 블로그를 제작했었습니다. 확실히 Contentful 등의 CMS에서 포스트를 작성하면 Github Actions을 통해 자동으로 프로젝트 빌드가 진행되고, 그것이 Github Pages를 통해 호스팅되는 것은 제가 생각했던대로 잘 진행이 되었습니다. 하지만 생각한 것 이상으로 빌드가 오래 걸리고, CMS를 외부에 두고 있다보니 게시글의 구조 등을 변경하기 위해선 CMS 서비스와 프로젝트 양쪽에서 수정해야 한다는 불편함이 있어 많은 아쉬움이 있었습니다. 그렇다보니 이번에 공부를 한 내용들을 글로 공유하기 불편해 이참에 새롭게 만들어보게 되었습니다.
또 다시 Nuxt, 그런데 약간 다른
이번 프로젝트도 역시 Nuxt를 사용했습니다. 웹페이지가 빌드되는 방식 자체에는 이전과 큰 차이가 없네요. 제일 처음 이 프로젝트를 만들었을 땐, 그리고 초반엔 웹서버를 라즈베리파이에서 구동하는 방식으로 서비스를 할 예정이었지만 생각보다 정적 페이지 빌드가 오래 걸리지를 않아서 이전과 동일한 빌드 방식으로 다시 바꾸었습니다. 이전과 달라진 곳은 주로 포스트를 작성하는 방식과 작성한 포스트를 가져오는 방식입니다.
포스트 관리는 Git이 책임진다
이전에 사용했던 Contentful도 분명 좋은 서비스였으나 컨텐츠의 구조 등을 관리해야할 지점을 하나로 모아주고 싶었습니다. 그래서 이번엔 Nuxt에서 제공하는 모듈 중에 Content라는 모듈을 대신 채용했습니다. 해당 모듈은 특정 경로에 마크다운이나 JSON 등의 파일로 컨텐츠를 작성하면, 그 파일들을 조회하는 API나 문서를 렌더링하는 컴포넌트 등의 기능을 제공합니다. 이를 이용하면 작성한 글 역시 프로젝트 내 다른 코드처럼 Git을 통해 버전관리가 가능해집니다. 그것보다 작업을 할 때 VSCode 하나만 켜도 테스트 데이터를 작성하고 프론트엔드 구성하고 다 할 수 있다는 게 더 매력적이네요. 이 정도면 기존의 Contentful을 대체하는 데 부족함이 없다고 생각이 되었는데, 마크다운 내에 Vue 컴포넌트를 배치하는 등의 매력적인 기능들이 많아 이번 기회에 배워볼 겸 사용하게 되었습니다.
그럼 글 쓸 때마다 직접 커밋?
게시글 작성을 항상 컴퓨터로만 할 수는 없습니다. 그런데 안드로이드의 Spck Editor 등을 사용해서 커밋도 해봤는데 불편하더라구요. 그래서 대책을 찾아보다보니 Netlify에서 CMS 기능을 제공한다는 것을 알게 되었습니다. Git 저장소나 컨텐츠 구조 등을 설정하는 config.yml 파일과 index.html 파일을 프로젝트에 추가하면 블로그에 CMS 페이지를 추가할 수 있습니다. Nuxt 기준으로 static 폴더에 admin이라는 폴더를 만들고 거기에 파일들을 넣으면 /admin으로 접근했을 때 CMS 페이지를 이용할 수 있는데, Netlify CMS에서 로그인 기능 역시 제공해주기 때문에 특정 사람만 글을 작성할 수 있도록 설정이 가능합니다. 이미지 업로드 기능도 제공하고, 컨텐츠 작성이나 삭제 수정도 가능합니다. 깔끔하네요. 아쉬운 건 모바일에서 사용하기 그렇게 편하지는 않았습니다. 모바일 UI가 별도로 없는 상태인데 나중에 추가된다면 좋을 것 같습니다.
댓글은 또 왜 바꿔?
이전 블로그에서는 라이브리라는 서비스를 사용해 댓글 기능을 제공했었습니다. 그런데 매번 광고가 거슬리더라구요. 있는 건 크게 신경 안 쓰는데 광고가 너무 안 예쁘게 달려서 이참에 바꿨습니다. 이번에 사용한 건 utterances인데, Github 이슈 기능을 통해 댓글 시스템을 구현하다보니 댓글을 달려면 Github 계정이 반드시 필요하다는 문제가 있습니다. 그래도 기본적으로 제공하는 테마가 다양해서 좋고, 광고 없고, 무료고, Github 이슈니까 메일로 알림도 옵니다. 다크 테마는 절대 못 참죠.
그래서 만족하는가
사용하는 모듈을 교체하는 것으로 생각보다 많은 변화가 가능했습니다. 메인 페이지에 있는 경력 목록처럼 마크다운 내에 동적으로 내용을 추가하거나, Vue 컴포넌트를 마크다운에 삽입할 수 있으니 컴포넌트를 만들어 Notion 비슷한 느낌을 내볼 수도 있구요. 사실 그냥 Notion으로 블로그를 만드는 것도 고려 대상이었지만 기능 확장에 한계가 있다고 생각해 이렇게 만들게 되었네요.
이번 글에서는 일단 프로젝트 구조에 대한 내용만 살짝 공유하는 수준에서 마무리하려고 합니다. 프로젝트 세팅 과정 등까지 한 번에 하자니 길어지는 것도 길어지는건데 엄두가 잘 안 나네요...다음에 따로 정리하도록 하겠습니다.