Next.js와 Tailwind 블로그 템플릿을 이용하여 블로그 생성하기

블로그 시작

블로그나 사이트를 만드는 실험을 계속 진행중이던 중에,코딩, 개발 등의 작업을 하면서 생기는 소소한 정보들을 모아놓을 곳을 따로 만들면 좋을 것 같아서 이곳을 만들었다. 기존의 tistory블로그, 구글블로그 등에 있는 자료들도 이곳으로 모을 생각이다.

Tailwind Next.js Starter Blog

Vercel에 수록된 Next.js템플릿 중 하나인 Tailwind Next.js Starter Blog로 블로그를 생성했다.

Headless CMS vs MarkDown

이 블로그 템플릿은 별도의 Headless CMS를 하지 않고 마크다운 기반으로 글을 작성하는 방식이다. Prismic이라는 Headless CMS를 사용해본 적이 있으며 기타 CMS서비스를 검토해본 적이 있다. CMS사용시에 글을 작성하는 에디터가 별도로 제공되어 보기가 편하고 코드에 대해서 큰 고민없이 글을 발행할 수 있어서 편한 점이 있었다.

md파일을 직접 만들어서 관리하는 방식은 보기에 조금 지저분하기도 하고, 글 하나당 새로운 파일을 하나씩 만드는 과정이 비효율적이기도 하다. 문법이 틀려서 에러가 나거나 배포가 실패하기도 하는 것이 단점이다.

하지만 이번에 md파일 방식을 사용한 이유는 이렇다.

처음에 보기에는 조금 불편하지만, 익숙해지면 콘텐츠를 파일 형태로 보는 것이 좀더 직관적이다.

CMS 사용시에 이미지 업로드, 코드 스니펫 사용이 불편했고 개선하는데 한계가 있었다. md방식 코드 스니펫이나 이미지 표시가 간단하게 지원이 되고, mdx를 사용해서 개선을 하기도 쉽다.

일단 글과 이미지가 혼합된 글의 업로드를 좀더 편하게 할수 있는 방법을 생각중이다.

디자인 및 구성

이블로그 템플릿을 사용한 이유는 일단 블로그 구성이나 디자인적으로 필요한 것들이 다 들어있어서이다.

이 템플릿은 전반적으로 기술 블로그에 적합한 디자인과 기능을 갖추고 있다.

블로그를 빈 페이지부터 만드는 과정도 재미도 물론 있지만,

기본적으로 글을 발행하는 것을 기본으로 하는 것이 목적이기 때문에 블로그를 만들고 개선하는 코딩을 많이 하지 않아도 기본 뼈대가 잘 갖춰진 것을 선택하려고 했다.

이 템플릿은 사용 예시도 많고 포스트 작성, 태그, giscuss를 통한 댓글 기능 등이 기본적으로 들어가 있고 보이는 모양새도 깔끔해서 마음에 들었다.

tailwind css를 사용해본 적은 없지만, tailwind css는 이미 널리 알려진 프레임워크이기 때문에

tailwind css와의 호환성이 좋을거라고 기대하는 것도 있다.

More...

다 갖추고 있을 것 같지만 그래도 고쳐야 할 부분들이 많다.

이것들은 반복적으로 해야 할 작업이기 때문에 익숙해지려고한다.

커스텀 폰트 적용 댓글 달기 Google Analytics 붙이기 typescript 셋팅 Google Search console 등록 네이버 웹마스터도구 등록 개인 도메인 붙이기 구글 애드센스 및 기타 소셜광고 붙이기 ...

여기까지는 기본이고 앞으로도 조금씩 글도 쓰고 사이트도 개선해 나가려고 한다.