선정

이전 게시글에서 봤듯이, 스터디용 블로그를 위해서 최대한 빠르게 만들 수 있는 정적 웹 블로그가 필요했다.
공부하고 -> 정리하고 올리고 하는 용도의 Note처럼 쓰기 위한 블로그라서 "시간을 잡아먹는(야크털 깎기) 요소들을 줄이고 집중하자."라고 생각했지만 예상외로 초입부터 야크털을 좀 깎았다.

템플릿

Jekyll + github page 조합은 썩 맘에 들지 않아서, JamStack 참고해서 TailwindCSS + Next.js 조합의 템플릿을 발견했다. 바로 새 git repo 새로 파고 몇가지 커스텀을 진행했다.

커스텀

• JS Official 버전으로 진행
  • local project path에서 npx degit https://github.com/timlrx/tailwind-nextjs-starter-blog.git 명령어를 실행해 clone함
• Sitemetadata.js custom
  • 웹에서 사용하는 메타데이터 구성 요소들 수정
• favicon 등 Assets 수정
  • fivicon 및 Asset들 수정
• 기타 레이아웃 수정
  • 쓰지 않을 라우터 및 페이지 삭제

내가 사용하고 싶은 부분만 수정해서 진행했다.
템플릿 자체가 다른 서드파티 플랫폼 연동을 위한 소스코드가 잘 정리되어 있어서 수정하는데 큰 어려움은 없었다.

Netlify 연결

설정 방법은 아주 간편하다.

• 내가 hosting 하고 싶은 github repository(project)와 연결한다.
• install을 진행하고 deploy setting을 진행한다.
  • main branch or master branch를 지정해주고, build command를 setup 해준다.
  • 내가 선정한 템플릿은 next.js(SSR)를 사용하므로 자동으로 form field에 build command가 채워졌다.
  • 이외의 템플릿을 진행한다면 netlify가 굉장히 친절하게 설명해주고 있으니 공식 사이트를 참고한다.

• Setup이 완료되면 deploy scripting을 netlify가 진행하고, domain 설정을 진행하면 된다.

• 나는 위의 절차대로만 진행하고 따로 domain settings 옵션에서 custom domain 설정을 해주었다.

• netlify에서 내가 설정한 master branch에 소스 코드 변동 사항이 감지되면 Deploys 탭에서 확인할 수 있듯이 building -> published 과정을 진행하는 것을 볼 수 있다.
• Building 중의 오류 사항, 진행 사항을 상세히 볼 수 있다. 또 published 상태에서도 Log를 확인할 수 있다.
• 아직 확실하지는 않지만 Vercel과는 다르게 이전에 배포한 버전으로 쉽게 rollback 할 수 있는 옵션은 제공하지 않는 듯 하다.

시행착오

정신차리자 진짜 👎 ...

위에 보았듯, build script 초기 세팅이 꼬여버려서 에러를 내고
두번째 에러는 분명.. official document를 봤는데도 guide대로 하지 않았기 때문이다.
next.js에서 server-side rendering은 build command를 next build로 지정하고
public directory는 .next가 맞는 것인데..
static html export build command를 지정해서 image optimized api setting을 하고...
먼길을 돌아서 왔다...

닫는 말 🚪

남은 Task

• giscus 연동
• analytics 연동

뭔가 알맹이 없이 끝내는 것 같지만, 이제 꾸준히 정리하고 또 정리하고 ...
미친듯이 달려갈 일만 남았다.