피드로 돌아가기
Dev.toInfrastructure
원문 읽기
Hugo와 Cloudflare Pages 기반 월 $0 비용의 초고속 정적 사이트 구축
I Built a Blazing Fast Website for $0/Month — Here's the Exact Stack (Hugo + Cloudflare Pages)
AI 요약
Context
공유 호스팅 기반 WordPress 사용 중 플러그인 간 충돌로 인한 유지보수 복잡도 증가 및 느린 TTFB 발생. Core Web Vitals 점수 저하와 월 $15의 고정 비용 발생이라는 기술적 부채 직면.
Technical Solution
- Database를 제거한 정적 사이트 생성기(SSG) 기반의 아키텍처 전환을 통한 서버 런타임 오버헤드 제거
- Build 속도 최적화를 위해 Node.js 기반 도구 대신 단일 바이너리로 동작하는 Go 기반 Hugo 채택
- Cloudflare Pages의 Edge Network를 활용한 글로벌 콘텐츠 전송 및 무제한 대역폭 확보
HUGO_VERSION환경 변수 명시를 통한 로컬-빌드 환경 간 버전 불일치 및 배포 실패 방지- WebP 이미지 파이프라인 적용을 통한 프론트엔드 렌더링 성능 최적화
- GitHub 연동을 통한 CI/CD 파이프라인 구축으로 Push 시 자동 빌드 및 Preview 배포 구현
Impact
- 인프라 비용: 월 $15에서 연간 $10(도메인 비용)으로 약 93% 절감
- 빌드 속도: 400ms 미만의 초고속 빌드 타임 달성
- 성능 지표: 글로벌 TTFB 200ms 미만, FCP 0.8초 미만 기록
- 배포 효율: 평균 약 25초 내외의 빠른 배포 사이클 확보
Key Takeaway
동적 기능이 필요 없는 콘텐츠 사이트의 경우, Database와 Server runtime을 완전히 제거한 정적 아키텍처가 유지보수 비용과 성능 최적화 측면에서 압도적 효율을 제공함.
실천 포인트
- 정적 사이트 전환 시 build speed가 개발 생산성에 미치는 영향 검토 - CI/CD 환경 설정 시 런타임 버전을 명시적으로 고정하여 환경 일관성 확보 - 대역폭 비용 최적화를 위해 CDN 제공사의 무료 티어 제약 사항 비교 분석 - LCP 개선을 위해 이미지 포맷을 WebP로 변환하는 파이프라인 구축