Next.js로 블로그 만들기

기존 Notion을 활용한 블로그에서 Next.js 기반의 블로그로 바꿨다. 왜 노션에서 Next.js로 블로그를 옮겼는지, 블로그를 어떻게 만드는지에 대한 이야기이다.

🤔 왜 노션에서 Next.js로?

Next.js블로그 만드는 법을 바로 보고싶은 분들은 여기

기존 노션 블로그의 단점

• 댓글
  나는 순수 notion을 DNS를 연결해서 블로그로 활용했는데, 순수 노션을 블로그로 이용할 경우 댓글을 설정할 수 없었다. 물론 oopy를 사용하면 댓글이나 폰트변경 등 더 많은 기능을 사용할 수 있지만 매월 결제하면서까지 하고싶지 않았다는 🤑

• TIL과 겹치는 내용
  블로그를 공부한 내용을 정리하는 용도로 사용했는데 그러다보니 github의 TIL과 같은 내용이 올라갈 때가 있었다. '둘 중 하나만 올리면 되지!'라고 생각할 수도 있지만 github 잔디도 블로그 정리도 포기못하는 나였다🙄

• 작성중인글, 아카이빙의 어려움
  블로그 포스팅을 하면서 전부 작성하지 못하고 중간까지만 작성한 경우 노션은 글 비공개의 기능이 없기 때문에 블로그를 위한 페이지가 두 개를 만들어야했다. 나중에는 요령이 생겨 공개 속성을 만들고 데이터베이스에서 필터링을 이용하여 글을 옮기는 수고는 덜었지만, 비공개인 게시물을 다시 보기위해서는 역시 페이지 두개가 필요했다.

그래서 나는 블로그를 옮기기로 마음먹었다! (이게 이렇게 번거로운 일인지 몰랐다 ... 🙄)

velog도 tstory도 jekyll도 있는데 왜 Next.js죠?!

• 자율성
  tstory나 개발자들이 많이하는 velog도 있지만 굳이 next.js를 사용한 이유는 자율성이다! tstory는 테마를 자유롭게 꾸밀 수 있지만 naver에 검색이 안되는 단점 ... 다른 블로그들은 형식에 얽매인다는 점이 커스텀 블로그를 사용하게 된 이유이다.
• 루비를 몰라요 .... 😅
  다양한 정적 블로그중 단연 유명한건 jekyll! 그러나 ruby를 몰라서 기존 테마를 커스텀하는데 애를 먹을것 같다는 생각이 들었고 react를 사용한 next.js나 gatsby를 이용하는게 더 나을 것이라고 생각했다.(회사에서 쓰이는 next.js 코드 공부할 시간도 부족하다구요...또 ruby sever 조차 되지 않았다... 😬)
• Next.js 공부도 할 겸 🤓
  회사에서 next.js를 사용하는데 물론 블로그 테마를 사용했지만 코드를 커스텀하기에 이미 알고 있는 next.js로 하는 것이 편할 것 같고 공부도 될 것 같아서 Next.js로 최종결정!!!

(그냥 블로그를 위해서 새로운걸 배울 시간이 없었다는 이야기)

➡️ Next.js 블로그 세팅하기

본격적으로 Next.js를 이용해 어떻게 블로그를 만들었는지에 대해 적겠다.

1. 블로그 테마 정하기 나는 jamstack themes이라는 사이트에서 블로그 테마를 골랐다!

2. 원하는 블로그 테마를 선택했다면 레포지토리 클론하기 or 템플릿 사용하기
   내가 고른 테마는 tailwind starter 블로그였는데 (저 회사에서 tailwind도 쓰거든여 ㅎㅎㅎ 커스텀할때 꿀~~🍯)
   템플릿이 있어서 새 레포지토리를 만들지 않아도 바로 새레포지토리+클로닝된 레포지토리를 얻을 수 있었다!

3. local 실행을 위한 패키지 다운 받기
   npm i로 필요한 패키지를 다운받는다. 터미널에서 npm 명령어가 되지 않는다면 node.js가 설치되어있지 않을 가능성이 있으니 node.js를 다운받는다

4. 실행하기
   패키지까지 다운 받았음 npm run dev를 통해 로컬에서 실행시킬 수 있다 localhost:3000에서 로컬 서버로 돌아가는 나의 블로그를 확인 할 수 있다😆

5. 배포하기
   gh-pages와 vercel로 배포 할 수 있는데, 나는 username.github.io레포지토리가 아니리 baseurl설정하는 번거로움이 있을 것 같아서 vercel로 배포했다.

포스트 작성은 어떻게 해요?📝

각 테마마다 상이할 수 있지만 내가 사용하는 Tailwind-Nextj-starter-Theme은 /data/blog 폴더에 md혹은 mdx 파일로 config와 내용을 작성하면 알아서 블로그 글이 생긴다!
아마 자세한 내용은 각 테마의 Readme.md에 적혀있을 것으로 예상~

---

🙌 마무리

왜 블로그를 이전했는지와 간단하게 Next.js 블로그를 설정하는 법에 대해 적어봤다! 사실 너무 별내용 아닌데 그래도 새로 세팅한 블로그에 이전글 말고 새로운 글도 적고싶어서 헤헤 😚
앞으로는 이 블로그에 내가 깨달은 내용, 다른 사람들에게 도움이 될 수 있는 내용들로 채워 나가려고 한다! 만반잘부~~