블로그 제작기
기존엔 React-Notion-X를 사용하여 Notion의 글을 Next14로 랜더링 시켜 (구)블로그를 운영했었다.
장점으로는 글작성 자체는 Notion에서 작성하기에 쉬웠고, 개발도 React-Notion-X 덕분에 디자인적 요소만 신경쓰면 됐었다.
하지만 단점이 치명적이었는데...
글 목록, 글의 내용을 가져오는데 아래와 같은 과정이 이루어지기 때문에 랜더링 속도가 매우 매우 느렸다.
Request -> Notion API Request -> Notion API Response -> Response
(구) 블로그 PageSpeed Insights
느린거야 좀 기다리면되지라고 생각했는데 문제는 Notion API서버가 느려질때면 Next.js에서 Error 페이지를 랜더링 시켜준다.
해당 문제 때문에 Google Search Console 색인등록에 문제를 격었다.
추가적으로 Notion의 서버가 한번씩(자주) 먹통이 되는데 그럴때마다 내 블로그도 같이 먹통이된다...
따라서 해당 문제들 때문에 블로그를 리뉴얼 하기로 마음먹었다.
기존 Notion에서 MDX 기반으로 변경하게 되면 위 문제점들이 해결된다.
해당 Next.js + MDX 기반 블로그 정보를 검색하다보니 d5dr5.dev님의 블로그글을 참조하여 블로그를 완성하게 되었다.
블로그 주요 구성
Next14.js
SEO 기반의 블로그를 제작하고 싶었기 때문에 선택하게 되었고,
하루 이틀만 공부하면 간단하게 개발하기 쉽기 때문에 선택하게 되었다.
노마더 코더님 사이트보면 잘 알려주십니다!(무료!!)
https://nomadcoders.co/nextjs-for-beginners
Tailwind CSS
Next.js를 사용하게 되면 자연스럽게 따라오기 때문에 사용해 보았다.
태그마다 개별적으로 바로바로 디자인을 적용할 수 있기 때문에 매우 편리했다.
참고로 CSS만 보면 속이 울렁거리던 나한텐 Tailwind는 천사였다.
Next-MDX-Remote
MDX 파일을 랜더링 시켜주는 npm 패키지이다.
ContentLayer란 패키지도 존재하지만 꽤 오래 전부터 업데이트 되지 않아서 사용하지 않았다.
따라서 Next-MDX-Remote를 사용하게 되었다.
Vercel
무료 Web 호스팅 선택지 3가지 정도가 있었다.
- Vercel
- Github Pages
- Cloudflare Pages
3개중 하나를 골라야했기에 찾아본 결과 Vercel이 그나마 좋다고 판단하여 선택하게 되었다.
서버 속도 비교 사이트를 통해 볼 수 있듯이 Vercel이 가장 빨랐고,
호스팅하는 과정도 Repository만 연결해 두면 Repository를 commit 할때마다 자동으로 Deploy 해주기 때문에 Github Pages에서 주는 장점도 커버가 되었다.
CloudFlare Pages
도메인을 구매하고 관리하기에는 아마 최강이지 아닐까싶다.
가격도 착하고, WAF도 설정 가능하고, 공격 차단 등 무료 요금제(도메인 요금 별도)도 많은 기능을 사용할 수 있다.
어짜피 안통하는 공격이지만 그래도 탐지하고 막았다는게 그냥 기분이 좋다.
CloudFlare Pages 공격 차단 이벤트
마무리하며..
앞으로 글이 많아지면 Deploy 시간이 오래 걸릴 생각도 하면서 사진 저장을 위한 cdn 서버까지 구축해 적용해 보아야겠다.
또한 아직 포스팅 할땐 Github Codespaces나 Vscode로 작성하는데 쉬운 포스팅을 위한 방법도 한번 알아봐야겠다.