Introduction

개발 블로그를 만들겠다고 생각하고, 어떻게 만들까 고민을 짧게 했었다.

두가지 선택지가 있는데 가장 추천하는 방법은 medium이나 brunch 또는 velog와 같은 전형적인 포스팅 서비스를 이용하는 방법이다.

다른 방법은 정적 페이지를 만들어 관리하는 방법을 많이 사용하는데, 나는 예전부터 정적페이지 욕심이 있었기 때문에 굳이 정적페이지로 배포를했다.

정적 페이지 구성은 보통 jekyll, Hugo를 많이 쓰는데 ruby와 golang 기반이었던 것 같다. 풍부한 레퍼런스가 있어서 블로그를 만드는 데에 깊은 목적이 있다면 이 두가지를 고려해도 좋을 것 같다.

나는 Next.js를 이용해서 무언가를 해보고 싶었기 때문에 처음에는 Next.js에 많이 사용하는 css템플릿을 이용해서 블로그를 만드려고 했었다.

좀 찾아보니, Tailwind에서 blog 스타터팩 같은 템플릿을 제공하는 것을 확인했다. 몇가지 기능에 대한 파일럿을 진행하고 정말 접근성이 좋게 되어있어 이걸 이용하여 만들었다.

블로그를 만들면서 어떠한 과정으로 만들었는지 정리도 할 겸 내가 블로그를 만들고 배포하는 과정을 소개하려 한다.

Usage

우선 Tailwind Blog Template을 이용할 것이다.

사용법은 위 github page에 굉장히 자세히 나와있기 때문에 과정을 위주로 서술하겠다.

blog를 만들 프로젝트를 하나 생성한다.

npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git

ts는 alpha version인 것 같으니 js를 이용해야 할 것 같다. 위의 명령어는 js버전의 demo blog template이다.

나중에 낭패를 보지 않도록 npm install을 통해 디펜던시도 미리 챙겨주자.

npm install

정상적으로 template을 받아오게 되면 일반적인 Next.js 구조에서 조금 더 빵빵한(?) 형태의 구성들이 생기는데, 블로그를 운영하는데 필요한 항목만 간단하게 뜯어보자. 우선 여기까지 왔으면 70%는 끝났다.

항목별로 간단히 뜯어보기 위해서는 아무래도 Next.js의 진입점이라도 찾을 수 있는 약간의 지식은 필요하다.

이 포스팅에 설명을 쓰려다가 길어져 별도로 간단한 내용을 포스팅하였다. Next.js의 구동 방식

pages

pages 폴더 아래에는 기본적으로 필요한 항목 외에, 블로그를 지탱하는 여러가지 페이지들이 정의되어있는데 각 페이지의 레이아웃 등을 변경하고 싶으면 여길 진입점 삼아 추적하면 된다. 헤멜 수 있는 부분만 간단히 설명을 겸한다.

• /api 메일 구독 api들을 사용할 수 있도록 정의되어있다.

• /blog 블로그에 포스팅 하는 내용들을 동적경로로 만들기 위한 내용들이 정의되어 있다. 이 부분은 나중에 따로 내용을 포스팅 해야겠다. 여기는 공식 문서

• blog posts props를 바탕으로 ListLayout Component에 내용을 넣는다. 실질적인 blog의 레이아웃은 ListLayout을 변경하면 된다. posts는 /data/blog 경로의 모든 md/mdx 를 추출하여 할당된다.

• about about 페이지를 정의한 부분인데 Layout에 대한 부분이 생략되어있다. DEFAULT_LAYOUT이라는 상수가 정의되어있는데, 이는 /layout/AuthorLayout.js에 정의되어 있다. 여기에서 레이아웃을 재정의할 수 있다.

나머지 index, _app, _document의 경우 궁금하다면 위의 Next.js의 구동 방식 포스팅을 참고하면 좋을 것 같다.

public

블로그에서 사용할 정적 리소스를 담아두는 경로이다. Next는 js <Image/> 태그를 이용하는데 이것도 설명하다보니 Next.js의 구동 방식에 대한 설명이 필요하니 넘어가자.. 아무튼 로고나 기타 등등 필요한 이미지 또는 아이콘을 저장하는 용도로 사용한다.

layout

각종 레이아웃의 집합이다. 위에서 잠깐 설명했지만, blog / about 구성요소들의 레이아웃이 대부분 여기에 있는 것들을 참조하고있다. 마찬가지로 블로그 운영자의 입맛에 맞게 커스텀해서 사용하자.

data

사실 운영의 핵심이 되는 부분이다. tailwind 공식 github에서도 data의 내용을 변경하여 customize하는 내용을 대부분 다루고있다.

• siteMetadata.js : 대부분의 사이트 관련 정보, 수정이 필요한 정보를 가지고있다.
• /authours/default.md : 작성자 정보이다. 이 부분은 위의 about.js에 별다른 수정을 하지 않았다면 이 내용이 about에 담긴다.
• projectData.js : 프로젝트 섹션의 데이터인데, 나는 프로젝트 섹션을 삭제했기 때문에 별도로 사용하지는 않았다.
• headerNavLink.js : 헤더 부분의 네비게이션 항목이다. 여기서 추가할 기능이나 삭제할 기능에 대해서 추가하고 별도로 page를 구성하면 된다.
• /blog : blog에 포스팅 될 내용의 집합이다. md/mdx 파일을 수집해서 라우팅을 할 수 있게 자동으로 설정된다. 따라서 md/mdx 파일을 업로드 하면 블로그 포스팅은 끝이다.

이정도를 참고하면 블로그 운영에 기본적인 부분은 모두 조작할 수 있다. 추가적으로 필요한 기능이나 변경할 부분은 코드 진입점을 따라 쉽게 변경할 수 있다.

요약

이렇게 Tailwind blog template을 간단하게 뜯어 보았다. 방대한 기능을 갖고있는 Template이지만 필요에 따라 적당히 사용하면 좋아보인다.

위에서 설명한 내용은 이 Template의 극히 일부이다. 추가적인 부분은 하나씩 가지고 놀면서 필요하다면 포스팅 할 예정이다.

다음 포스팅은 이렇게 만들어진 블로그를 vercel을 이용하여 배포하고, google domain을 이용하여 domain을 지정할 것이다.