나는 월 $0으로 초고속 웹사이트를 만들었다 — 정확한 스택 (Hugo + Cloudflare Pages)

Source: Dev.to

그 기분을 아시죠. 느린 워드프레스 사이트를 고치기 위해 캐싱 플러그인을 설치합니다. 캐싱 플러그인에 설정 플러그인이 필요합니다. 설정 플러그인이 SEO 플러그인과 충돌합니다. 이제 세 개의 플러그인이 하나의 작업을 형편없이 수행하고 Core Web Vitals 점수는 참여 트로피 수준이 됩니다.

나는 지긋지긋해져서 모든 것을 처음부터 다시 만들었습니다. 결과는 laserengraverexpert.com — 레이저 조각기 리뷰 사이트로, Hugo 0.147.0 위에서 실행되고 Cloudflare Pages에 호스팅되며, 배포 시간은 약 25 초, 호스팅 비용은 정확히 $0 / month입니다.

이 글은 전체 기술 분석입니다: 스택, 설정, 이유, 트레이드‑오프, 그리고 처음에 실수해서 디버깅에 이틀을 더 잡아먹은 한 가지 사항까지. 콘텐츠 사이트, 제휴 사이트, 문서화 사이트 혹은 데이터베이스가 필요 없는 어떤 사이트를 구축하고 있다면 — 이 스택은 진지하게 고려할 가치가 있습니다.

한눈에 보는 전체 스택

전체 인프라 비용: ≈ $10 / year (도메인). 나머지는 모두 무료.

왜 일반적인 후보가 아닐까?

Next.js

생태계가 훌륭하고 React를 알고 있습니다.
하지만 Next.js는 앱을 위해 설계되었습니다. 정적 내보내기는 가능하지만 순수 정적 출력을 원할 때마다 프레임워크와 싸워야 합니다. 빌드 결과물은 콘텐츠 사이트에 비해 과하게 무겁고, Vercel의 무료 플랜은 트래픽이 늘면 문제가 되는 대역폭 제한이 있습니다.

Gatsby

2019년에 정답이었습니다.
GraphQL 데이터 레이어는 강력하지만, 내가 필요로 하지 않는 오버헤드가 있습니다. 사이트 규모가 커질수록 빌드 시간이 악명 높게 오래 걸리고, 생태계가 분산되었습니다. 나는 프로덕션 사이트를 그것에 걸고 싶지 않았습니다.

Eleventy (11ty)

가장 가까운 경쟁자.
Eleventy는 정말 훌륭합니다: JavaScript 전용, 의견이 없으며, 매우 조합성이 높습니다. 이미 Node 생태계에 깊이 들어가 있고 최대 유연성을 원한다면 Eleventy가 적합합니다. 나는 사용을 거의 결정할 뻔했습니다.

왜 Hugo가 승리했는가

속도 – 웹사이트 속도가 아니라 빌드 속도.
Hugo 빌드는 밀리초 단위로 측정됩니다. 현재 제 사이트는 모든 콘텐츠를 포함해 400 ms 이하로 빌드됩니다. Eleventy를 사용할 때는 비슷한 사이트에 대해 3–5 초가 걸렸습니다. 레이아웃과 템플릿을 반복해서 수정할 때, 이 차이는 개발 과정에서 큰 영향을 줍니다.

• Hugo는 단일 바이너리이며 node_modules, package.json, 의존성 지옥이 없습니다.
• Cloudflare Pages에서는 이 때문에 빌드 환경이 깨끗하고, 재현 가능하며, 빠릅니다.

트레이드오프: Go 템플릿

Hugo의 템플릿 문법은 날카로운 부분이 있습니다 — 파이프 문법, .context 스코핑, 그리고 부분 렌더링 모델이 사람들을 헷갈리게 합니다. 학습 곡선이 없다고 가장하지 않겠습니다. 실제로 존재합니다. 하지만 그만큼 가치가 있습니다.

Cloudflare Pages 설정

1. 가입 for a Cloudflare account (if you don’t have one).

2. 연결 your GitHub repo. That’s the core of it — but a few specifics are worth knowing.

   • 무료 티어는 월 500 빌드를 제공합니다. 합리적인 게시 주기를 가진 콘텐츠 사이트라면 절대 초과하지 않을 것입니다. 저는 한 달에 30을 넘은 적이 없습니다.
   • main에 푸시할 때마다 빌드와 배포가 트리거됩니다. 모든 풀 리퀘스트는 자체 URL을 가진 프리뷰 배포를 받으며, 병합 전 변경 사항을 검토하기에 좋습니다.

wrangler.toml

[build]
  command = "hugo --minify"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.147.0"

[[headers]]
  for = "/*"
  [headers.values]
    X-Content-Type-Options = "nosniff"
    X-Frame-Options = "DENY"
    Referrer-Policy = "strict-origin-when-cross-origin"
    Permissions-Policy = "camera=(), microphone=(), geolocation=()"
    Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"
    Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' cloudflareinsights.com; frame-ancestors 'none';"

[[headers]]
  for = "/css/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/js/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/img/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

캐시 전략 — 불변 캐싱이 게임 체인저인 이유

max-age=31536000 은 브라우저에게 파일을 1년 동안 캐시하도록 지시합니다. immutable 은 브라우저가 재검증조차 하지 않게 합니다 — 파일이 캐시에 있으면 네트워크 라운드‑트립 없이 그대로 사용합니다.

CSS를 업데이트하면 어떻게 될까요?
콘텐츠 주소 기반 파일명을 사용합니다. Hugo의 에셋 파이프라인은 파일에 지문을 찍습니다 — 파일 내용의 해시를 파일명에 추가합니다:

{{ $css := resources.Get "css/main.css" | minify | fingerprint }}

파일이 변경되면 해시가 바뀌어 새로운 파일명이 생성되고, 브라우저는 최신 에셋을 가져옵니다.

WebP 이미지 파이프라인

WebP 파일은 동일한 시각적 품질에서 JPEG보다 60–80 % 작습니다.
400 KB 제품 JPEG가 90 KB WebP가 됩니다. 30장의 이미지에 적용하면 방문당 몇 메가바이트를 절약하게 됩니다.

{{ $original := resources.Get "images/product.jpg" }}
{{ $webp := $original.Resize "800x" | images.Convert "webp" }}
[이미지: 제품]

빌드 파이프라인

1. Push를 GitHub에 푸시합니다.
2. Cloudflare Pages가 hugo --minify를 실행합니다.
3. Hugo가 정적 사이트를 ~400 ms 안에 생성합니다.
4. 빌드가 ≈ 25 seconds 안에 엔드‑투‑엔드로 완료됩니다 (네트워크 지연 포함).
5. index.json이 루트에 생성됩니다 — 향후 빌드 변경 없이 클라이언트‑사이드 검색(Fuse.js, Pagefind)을 바로 사용할 수 있습니다.

Performance — What to Expect

레이저 조각기 비교 가이드를 포함합니다. 실제로 이 스택이 어떤 결과를 내는지 확인하려면 PageSpeed Insights를 사용해 보세요.

Marcus Webb은 레이저 조각기와 그 주변을 구축하는 데 사용하는 도구에 대해 에서 씁니다.