서버비 0원으로 평생 무료 웹 서비스 운영하기: 나만의 고성능 블로그 뚝딱 만들기

Hugo, GitHub, Cloudflare Pages를 이용해 서버 비용 없이 전문가 수준의 블로그를 구축하고 운영하는 실전 노하우를 공유합니다.

이 가이드를 따라하면 서버 비용 없이 평생 무료로 운영 가능한 고성능 웹 서비스를 구축할 수 있다. Hugo(정적 사이트 생성기), GitHub(버전 관리), Cloudflare Pages(무료 호스팅)를 활용한다.

TL;DR: 핵심 요약

  1. 비용: 서버비, 호스팅, SSL, CDN 모두 완전 무료
  2. 기술 스택: Hugo + GitHub + Cloudflare Pages 조합
  3. 소요 시간: 약 30분이면 나만의 블로그 완성
  4. 핵심 장점: 데이터 100% 본인 소유, 플랫폼 종료 위험 없음, 무제한 커스터마이징

목차

목차

  1. 무료 웹 서비스가 가능한 이유
  2. 기술 스택 한눈에 보기
  3. 시작 전 준비물
  4. Hugo 설치하기
  5. 프로젝트 생성하기
  6. 테마 설치하기
  7. 설정 파일 작성하기
  8. 첫 콘텐츠 작성하기
  9. 로컬에서 테스트하기
  10. GitHub에 업로드하기
  11. Cloudflare Pages로 배포하기
  12. 마무리
  13. 참고 자료

무료 웹 서비스가 가능한 이유

웹 서비스에는 서버 비용이 필수라고 생각하기 쉽다. Hugo + GitHub + Cloudflare Pages 조합을 쓰면 얘기가 다르다.

  • 서버 비용 0원: 정적 사이트라 별도 서버가 필요 없다
  • 무료 호스팅: Cloudflare Pages 무료 플랜은 대역폭 무제한이다
  • 자동 배포: git push만 하면 자동으로 업데이트된다
  • 글로벌 CDN: 전 세계 어디서든 빠른 속도를 낸다
  • 무료 SSL: HTTPS가 자동으로 적용된다

기존 플랫폼과 비교

비교 항목티스토리/네이버 블로그Hugo + GitHub
비용무료무료
커스터마이징제한적무한대
데이터 소유권플랫폼 소유100% 본인 소유
SEO 최적화플랫폼 정책 따름세밀하게 제어 가능
서비스 종료 위험있음없음
개발자 브랜딩어려움포트폴리오 활용 가능
난이도쉬움초기 설정 필요

Hugo를 선택해야 하는 이유

  1. 완전한 소유권: 내 콘텐츠, 내 데이터, 내 도메인이다. 플랫폼이 종료되어도 영향이 없다.

  2. 개발자 브랜딩: GitHub 프로필에 기술 블로그가 있으면 포트폴리오로 쓸 수 있다.

  3. 실무 기술 습득: Git, CI/CD, 마크다운 등 현업에서 쓰는 기술을 자연스럽게 익힌다.

  4. 다국어 지원: 해외 독자를 위한 다국어 사이트 구축이 쉽다.

이 가이드는 Hugo 공식 Quick Start와 Cloudflare Pages 문서를 참고해서 썼다.


기술 스택 한눈에 보기

세 가지 핵심 기술을 정리한다.

Hugo + GitHub + Cloudflare 워크플로우 Hugo, GitHub, Cloudflare를 조합한 무료 배포 파이프라인

Hugo: 정적 사이트 생성기

Hugo 동작 원리 Markdown 파일이 Hugo 엔진을 거쳐 HTML로 변환된다

Hugo는 Go 언어로 작성된, 세계에서 가장 빠른 정적 사이트 생성기다.

특징설명
빌드 속도수천 개 페이지도 1초 내 빌드
작성 방식Markdown으로 간편하게 작성
테마수백 가지 무료 테마 제공
보안데이터베이스 없음 = 해킹 위험 최소화

Hugo 공식 사이트

GitHub: 버전 관리 및 저장소

Git은 코드 변경 이력을 추적하고, GitHub는 이를 클라우드에 안전하게 저장한다.

  • 잘못 수정했어도 언제든 이전 버전으로 복구 가능
  • 여러 기기에서 동기화하며 작업 가능
  • Cloudflare와 연동하여 자동 배포 가능

GitHub 공식 사이트

Cloudflare Pages: 무료 호스팅 및 자동 배포

배포 파이프라인 GitHub에 Push하면 Cloudflare가 자동으로 빌드하고 배포한다

Cloudflare Pages는 GitHub 저장소와 연결해서 자동으로 빌드하고 전 세계에 배포하는 서비스다.

무료 플랜 혜택내용
비용완전 무료
대역폭무제한
SSL자동 HTTPS
CDN전 세계 엣지 네트워크

Cloudflare Pages 공식 문서


시작 전 준비물

항목필수 여부비고
macOS / Windows / Linux필수이 가이드는 macOS 기준
터미널 (Terminal)필수명령어 실행용
GitHub 계정필수무료 가입
Cloudflare 계정필수무료 가입
코드 에디터 (VS Code 등)권장콘텐츠 작성 시 편리

준비는 끝났다. 이제 Hugo 환경을 구축한다.


Hugo 설치하기

macOS (Homebrew 사용)

터미널을 열고 다음 명령어를 순서대로 실행한다.

1. Homebrew가 없다면 먼저 설치:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrew 공식 사이트

2. Hugo 설치:

brew install hugo

3. 설치 확인:

hugo version

다음과 비슷한 출력이 나오면 성공이다:

hugo v0.154.3+extended+withdeploy darwin/arm64 ...

Windows

Windows 사용자는 공식 설치 가이드를 참고한다.


프로젝트 생성하기

# 새 Hugo 사이트 생성 (blog 폴더에)
hugo new site blog

# 생성된 폴더로 이동
cd blog

프로젝트 구조

폴더 구조 Hugo 프로젝트의 기본 폴더 구조

폴더/파일역할
content/콘텐츠가 저장되는 곳
content/page/정적 페이지 (About, Search 등)
content/posts/블로그 포스트
assets/처리가 필요한 리소스 (이미지, SCSS)
static/정적 파일 (favicon, 로고 등)
layouts/커스텀 템플릿
themes/테마 파일
hugo.toml메인 설정 파일

테마 설치하기

Hugo Themes에서 원하는 테마를 고른다. 무료 테마만 수백 가지다.

추천 테마

테마특징추천 대상
Stack사이드바, 위젯, 카드형 디자인광고/위젯 활용 시
PaperMod심플, 빠름, 많은 사용자미니멀 디자인 선호 시
Blowfish모던, 다양한 레이아웃화려한 디자인 원할 때

이 사이트는 Stack 테마를 쓴다. 사이드바에 광고 위젯을 배치하기 좋고, 아카이브/태그 등이 잘 정리돼 있다.

Git Submodule로 설치해야 하는 이유

중요: 테마는 반드시 Git Submodule 방식으로 설치한다.

Hugo 공식 문서에서도 권장하는 방식이다:

  • 테마 원본 코드와 내 프로젝트 코드를 분리해서 관리
  • 테마 업데이트 시 git submodule update로 간편하게 반영
  • Cloudflare Pages 배포 시 필수 (일반 복사 방식은 오류 발생)

설치 명령어

Stack 테마 (이 사이트에서 사용):

# Git 저장소 초기화
git init

# Stack 테마를 submodule로 추가
git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack

Stack 공식 문서


설정 파일 작성하기 (hugo.toml)

hugo.toml 파일을 열어 다음 내용으로 교체한다. 각 설정에 대한 설명은 주석으로 달아뒀다.

# ============================================
# 기본 설정
# ============================================
baseURL = 'https://내도메인.pages.dev/'  # 배포 후 실제 주소로 변경
title = 'My Tech Blog'                    # 사이트 제목
theme = 'hugo-theme-stack'                # 사용할 테마

# ============================================
# 다국어 설정
# ============================================
defaultContentLanguage = 'ko'             # 기본 언어: 한국어
defaultContentLanguageInSubdir = true     # URL에 /ko/, /en/ 접두사 사용
enableRobotsTXT = true                    # robots.txt 자동 생성

# ============================================
# 검색 기능 (hugo-theme-stack 내장)
# ============================================
[outputs]
  home = ["HTML", "RSS", "JSON"]          # JSON 필수 (검색용)

# ============================================
# 언어별 설정
# ============================================
[languages]
  # --- 한국어 ---
  [languages.ko]
    languageCode = 'ko-KR'
    languageName = '한국어'
    weight = 1
    
    [languages.ko.params]
      description = '개발자의 기술 블로그'
      mainSections = ["posts"]

    [[languages.ko.menu.main]]
      name = "Archive"
      url = "/archives/"
      weight = 10
    [[languages.ko.menu.main]]
      name = "Tags"
      url = "/tags/"
      weight = 20
    [[languages.ko.menu.main]]
      name = "Search"
      url = "/search/"
      weight = 30

  # --- 영어 ---
  [languages.en]
    languageCode = 'en-US'
    languageName = 'English'
    weight = 2
    
    [languages.en.params]
      description = 'Developer Tech Blog'
      mainSections = ["posts"]

    [[languages.en.menu.main]]
      name = "Archive"
      url = "/archives/"
      weight = 10
    [[languages.en.menu.main]]
      name = "Tags"
      url = "/tags/"
      weight = 20
    [[languages.en.menu.main]]
      name = "Search"
      url = "/search/"
      weight = 30

# ============================================
# Stack 테마 설정
# ============================================
[params]
  # 사이트 기본 정보
  description = '개발자의 기술 블로그'
  mainSections = ['posts']
  
  # 사이드바 설정
  [params.sidebar]
    emoji = ''
    subtitle = '개발 블로그'
    
    [params.sidebar.avatar]
      enabled = true
      local = true
      src = 'images/avatar.webp'

  # 댓글 설정 (나중에 활성화)
  [params.comments]
    enabled = false

  # 푸터 설정
  [params.footer]
    since = 2026

  # 색상 설정
  [params.colorScheme]
    toggle = true
    default = 'auto'

첫 콘텐츠 작성하기

필요한 페이지 생성

Stack 테마가 정상 작동하려면 몇 가지 페이지가 필요하다:

# Archive 페이지 (글 목록)
cat > content/archives.md << 'EOF'
---
title: "Archive"
layout: "archives"
summary: "archives"
---
EOF

# Search 페이지 (검색)
cat > content/search.md << 'EOF'
---
title: "Search"
layout: "search"
summary: "search"
---
EOF

첫 번째 글 작성

Leaf Bundle 방식(폴더 + index.md)을 쓰면 이미지 관리가 편리하다:

# 새 글 폴더 생성
hugo new content/posts/hello-world/index.md

생성된 content/posts/hello-world/index.md 파일을 열어서 내용을 작성한다:

+++
date = '2026-01-08T10:00:00+09:00'
draft = false
title = '안녕하세요, 첫 번째 포스트입니다!'
tags = ["첫글", "Hugo"]
+++

## 소개

이 사이트는 Hugo와 Cloudflare Pages로 만들어졌습니다.

## 앞으로의 계획

- 개발 경험 공유
- 기술 튜토리얼 작성

로컬에서 테스트하기

배포 전에 로컬에서 확인한다:

hugo server -D

브라우저에서 http://localhost:1313 접속!

-D 옵션은 draft = true인 글도 보여준다.

로컬 테스트가 끝났으면 저장소에 올릴 차례다.


GitHub에 업로드하기

GitHub에서 새 저장소 만들기

  1. GitHub에 로그인
  2. 오른쪽 상단 + 버튼 → New repository
  3. Repository name: my-blog (원하는 이름)
  4. Public 또는 Private 선택
  5. Create repository 클릭

로컬 프로젝트와 연결

# .gitignore 생성 (빌드 결과물 제외)
echo "public/" >> .gitignore
echo "resources/" >> .gitignore
echo ".hugo_build.lock" >> .gitignore

# GitHub 저장소 연결
git remote add origin https://github.com/사용자명/my-blog.git

# 첫 커밋 & 푸시
git add .
git commit -m "Initial commit: Hugo blog setup"
git branch -M main
git push -u origin main

Cloudflare Pages로 배포하기

Cloudflare Dashboard 접속

https://dash.cloudflare.com에 로그인한다.

새 Pages 프로젝트 생성

Step 1: 우측 상단의 + 버튼을 클릭하고 Pages를 선택한다.

Cloudflare Pages 메뉴 Cloudflare 대시보드에서 Pages 선택

Step 2: “Get started” 화면에서 Import an existing Git repository 옵션의 Get started 버튼을 클릭한다.

Cloudflare 시작하기 Git 저장소 가져오기 옵션 선택

Step 3: GitHub 계정을 연결하고 방금 만든 my-blog 저장소를 선택한다.

처음 연결하는 경우 GitHub 권한 허용 창이 뜬다. Authorize Cloudflare 버튼을 클릭한다.

빌드 설정

설정 항목값
Framework presetHugo
Build commandhugo
Build output directorypublic

중요: Environment Variables에서 HUGO_VERSION을 0.154.3 (또는 로컬 버전)으로 설정한다.

배포 시작

Save and Deploy 버튼을 클릭하면 자동으로 빌드가 시작된다.

몇 분 후, https://프로젝트명.pages.dev 주소로 접속할 수 있다.


마무리

이제 이런 완전 무료 환경을 갖췄다:

항목비용
Hugo무료
GitHub무료
Cloudflare Pages무료
SSL 인증서무료
CDN무료
월간 총 비용$0

다음 단계

  • 커스텀 도메인 연결 (예: myblog.com)
  • 댓글 시스템 추가 (Giscus, Utterances)
  • SEO 최적화

참고 자료

공식 문서

추가 학습

Experience · Understanding · Insight · 문의하기