Nuxt로 정적 블로그 만들기

blog.howeverina.studio는 howeverina.studio와는 독립적으로 운영되는, 포트폴리오 및 기술 중심의 블로그입니다. 일과 관련된 페이지에서만 공개할 예정이며 방송 관련으로는 따로 발굴되지 않는 이상 공개하지 않을 생각이구요.

이 블로그에는 원래 ghost를 사용할까 하다가, 그래도 github pages를 이용한 정적 블로그만큼 저렴하고 편한 건 없다라는 생각에 사로잡혔습니다.

그래서 Nuxt라는 프레임워크를 가지고 처음부터 만들어서 완성했습니다. 아니 사실 태그 등의 주요 기능들이 아직 존재하지 않는 상태라, 완성 단계라고 할 수는 없어요.

왜 Nuxt였나?

이전에 Misskey라는 Vue 기반 오픈소스 프로젝트에 관심을 가져 본 적이 있어서 저 스스로가 Vue를 조금 더 편하게 생각합니다. 실제로 쉽기도 하고요. 제가 만약 여전히 개발자를 지망하고 있으며, 이 프로젝트를 개발 업무의 일환으로 제작했다면 아마 React 기반의 Next를 사용했을 것입니다. 하지만 지금은 개발자를 지망하고 있지도 않고, 이 프로젝트가 제 메인 프로젝트가 되지도 않을 것입니다. 따라서 Nuxt를 사용했습니다.

Nuxt Content

제가 기존에 Nuxt로 정적 페이지를 만들 일이 있을 때에는 우선 깃허브에 모든 코드를 올린 다음에 마크다운 파일 목록을 직접 fetch하는 방식으로 블로그를 제작했습니다. 하지만 직접 로컬 폴더에 접근하는 또 다른 방법이 있을 거라고 생각했고 다행히 그 생각은 들어맞았습니다. Nuxt를 이용해 정적 블로그를 만들기 위해서는 Nuxt Content라는 모듈을 쓰면 되었던 것이었습니다.

Nuxt Content는 Nuxt로 제작된 페이지의 콘텐츠를 관리할 수 있도록 도와주는 모듈입니다. 이 모듈을 사용하면 마크다운 등의 파일 시스템으로 콘텐츠를 작성한 뒤, 페이지에서 해당 데이터를 쿼리하여 표시할 수 있습니다.

이 모듈을 사용하면 /content/라는 폴더에 하위 폴더를 만들어서 (지킬과 유사한 방식으로) 포스트를 관리하게 되는데, 하위 폴더 하나하나가 데이터베이스의 테이블, 폴더의 파일 하나하나가 데이터베이스의 행(row)과 같은 역할을 하는 모양이더라구요. 이 앱을 실행하면 이와 같은 데이터베이스에서 쿼리를 수행해서 페이지를 표시해 주는데, 정적 페이지를 만들 때에는 generate 명령어를 통해서 각 포스트에 해당하는 정적 파일을 생성합니다. 이걸 gh-pages 브랜치에 올려서 배포하면 됩니다.

앞으로 해야 할 일

사실 연습과 작업에 집중해야 해서 이 블로그의 기능 자체를 개발하는 데 그렇게 긴 시간을 투자하기는 어렵습니다. 그래도 언젠가 추가하고 싶은 기능이라고 한다면....

• 별거 아니지만, 블로그 푸터 만들기
  • 이게 있고 없고는 사이트를 꽤 달라보이게 만들더라구요.
• 태그 기능 만들기
  • 사용자가 제 블로그에서 정보를 효과적으로 찾기 위해서, 카테고리별로 포스트를 따로 볼 수 있어야 합니다.
• 뮤직 플레이어 기능 만들기
  • 블로그 내에서 제공하는 여러 재생목록(전체 듣기, 오리지널곡, 커버곡, 작업물 등)을 돌려 들을 수 있는 플레이어 기능을 만들어 보고 싶습니다.

굳이 안 하고 싶은 것도 있습니다.

• 댓글 기능 만들기
  • 댓글이 달려서 별로 좋은 것도 없을뿐더러 주로 깃허브 아이디로 로그인해서 깃허브 이슈 페이지에 댓글을 작성하게 되는 건데 별로 매력적이진 않습니다. 기존에 댓글 기능이 있는 티스토리에서 수익화 블로그를 운영하는 노하우를 가르치는 사람들도 댓글은 막아두라고 하더군요.

코드의 업데이트는 느리더라도 포스트 작성이나 포트폴리오 업데이트 등은 시간 날 때마다 해보려고 합니다. 잘 부탁드려요.

이 포스트가 유익하거나 재미있었다면