Next.js 15, MDX, Cloudflare Pages를 활용해 직접 블로그를 만든 경험을 정리했습니다

기술 블로그를 만들게 된 계기

원래는 티스토리 블로그를 쓰고 있었습니다. 하지만, 아래 2가지 이유로 직접 블로그를 만들게 되었습니다.

• 티스토리에서 코드 스니펫 하이라이트 처리가 미흡했습니다 (특히 .tsx 포맷)
• 블로그 테마를 자유롭게 꾸미기 어려웠습니다 (커스텀 테마를 만들 수도 있겠지만, 그럴 바엔 아예 직접 만드는 게 낫다고 판단했습니다)

그리고 다른 프론트엔드 개발자분들이 직접 만든 나만의 블로그를 갖고 계신걸 보고 저도 해보자 하는 의욕이 생겼습니다.

요구 조건 및 레퍼런스

다른 분들의 기술 블로그를 살펴보고, 저는 아래와 같은 조건의 블로그를 만들고자 했습니다.

• Markdown으로 작성이 가능해야 함 (평소 Notion을 자주 써서 Markdown 문법에 익숙하며 읽기에도 편할 것이라 생각)
• Markdown으로 만든 컨텐츠를 정적 페이지로 가볍게 서빙 (개발 및 배포하기 쉽게)

그리고 블로그를 처음부터 끝까지 직접 디자인할 자신은 없었기에, 참고할 만한 레퍼런스 사이트를 몇 개 골랐습니다

• Anthropic 공식 블로그
  • 따뜻한 컬러감이 마음에 들어서 컬러 팔레트를 참고
  • 반응형 UI를 위한 breakpoint와 padding, margin 등도 참고
• Dan Abramov 기술 블로그
  • 게시글 리스트 형태 등을 보고 이렇게 기본적 형태로만 우선 만들어도 되겠다 생각

기술 스택

기술 스택을 고르는 과정은 비교적 쉬웠습니다. 개발자들 사이에서 인기가 많아 유지보수가 쉽고, 제 손에 익어 개발이 편한 도구들을 골랐습니다.

• Next.js 15(App Router): 정적 페이지를 만들기 쉽고, mdx 렌더링이 용이
• Tailwind: 개인 프로젝트에서 자주 사용해왔고, 빠르게 스타일을 잡을 수 있어서 선택
• Shadcn UI: 기본 컴포넌트가 잘 구성되어 있고, Tailwind 기반이라 커스터마이징 용이

구현 과정의 어려움

mdx 렌더링

• 처음 mdx 렌더링에 성공했는데, Markdown 스타일이 전부 사라지고 텍스트만 나타나는 문제
• Tailwind가 모든 user agent 스타일을 제거했던 것이 원인
• 공식 문서를 참조하여 기본 스타일을 유지해주는 prose 클래스를 부여하는 래퍼 컴포넌트를 만들어 mdx 렌더링

배포

배포를 위해 다양한 플랫폼을 고민했습니다. 저는 도메인을 구매하여 등록할 것이었고, 따로 발생하는 비용이 들기 원치 않았습니다. 그리고 Cloudflare Pages를 선택했는데 이유는 아래와 같습니다.

• Cloudflare에서 도메인 구매 비용이 저렴(1년 후 연장 시에도 추가 비용 없음)
• Cloudflare에서 https 연결을 위한 TLS 인증서 무료 제공
• GitHub 레포지터리와 연동되어 CI/CD 자동 제공

배포 환경에서 빌드 에러가 발생하여 패키지 매니저를 Yarn -> NPM으로 바꾸는 것 이외에 어려운 점 없이 배포가 잘 되었습니다. Cloudflare Workers로 배포하는 방법도 고려했지만, 블로그는 순수 정적 사이트이며 SSR이 필요하지 않아 Pages만으로 충분하다고 판단했습니다.

향후 추가하고자 하는 기능

• 댓글 기능

  • 양방향 소통을 위해서
  • Giscus를 사용하여 별도 DB 없이 해볼 예정

• 게시글 검색, 필터링 기능

  • 카테고리 필터링, 제목이나 부제목으로 검색하기
  • 게시글이 좀 많아지면 가능할 듯

마무리

이번 경험을 통해 정적 사이트의 구조, 배포 환경 구성, 콘텐츠 관리 방식에 대해 많이 배울 수 있었습니다. 이름을 건 도메인으로 블로그를 만들 수 있어서 기분이 좋았고, 아직 부족한 점이 많아서 차차 개선해나갈 예정입니다.