이 가이드를 따라하면 서버 비용 없이 평생 무료로 운영 가능한 고성능 웹 서비스를 구축할 수 있습니다. Hugo(정적 사이트 생성기), GitHub(버전 관리), Cloudflare Pages(무료 호스팅)를 활용합니다.
목차
- 무료 웹 서비스가 가능한 이유
- 기술 스택 한눈에 보기
- 시작 전 준비물
- Hugo 설치하기
- 프로젝트 생성하기
- 테마 설치하기
- 설정 파일 작성하기
- 첫 콘텐츠 작성하기
- 로컬에서 테스트하기
- GitHub에 업로드하기
- Cloudflare Pages로 배포하기
- 마무리
- 참고 자료
무료 웹 서비스가 가능한 이유
웹 서비스를 운영하려면 서버 비용이 필수라고 생각하셨나요?
Hugo + GitHub + Cloudflare Pages 조합을 사용하면:
- 서버 비용 0원: 정적 사이트라 별도 서버가 필요 없습니다
- 무료 호스팅: Cloudflare Pages 무료 플랜은 대역폭 무제한입니다
- 자동 배포: git push만 하면 자동으로 업데이트됩니다
- 글로벌 CDN: 전 세계 어디서든 빠른 속도를 제공합니다
- 무료 SSL: HTTPS가 자동으로 적용됩니다
기존 플랫폼과 비교
| 비교 항목 | 티스토리/네이버 블로그 | Hugo + GitHub |
|---|---|---|
| 비용 | 무료 | 무료 |
| 커스터마이징 | 제한적 | 무한대 |
| 데이터 소유권 | 플랫폼 소유 | 100% 본인 소유 |
| SEO 최적화 | 플랫폼 정책 따름 | 직접 제어 가능 |
| 서비스 종료 위험 | 있음 | 없음 |
| 개발자 브랜딩 | 어려움 | 포트폴리오 활용 가능 |
| 난이도 | 쉬움 | 초기 설정 필요 |
Hugo를 선택해야 하는 이유
-
완전한 소유권: 내 콘텐츠, 내 데이터, 내 도메인입니다. 플랫폼이 종료되어도 영향 없습니다.
-
개발자 브랜딩: GitHub 프로필에 기술 블로그가 있으면 포트폴리오로 활용할 수 있습니다.
-
실무 기술 습득: Git, CI/CD, 마크다운 등 현업에서 사용하는 기술을 자연스럽게 익힙니다.
-
다국어 지원: 해외 독자 확보를 위한 다국어 사이트 구축이 쉽습니다.
이 가이드는 Hugo 공식 Quick Start와 Cloudflare Pages 문서를 기반으로 작성되었습니다.
기술 스택 한눈에 보기
세 가지 핵심 기술을 간단히 살펴보겠습니다.
Hugo, GitHub, Cloudflare를 조합한 무료 배포 파이프라인
Hugo: 정적 사이트 생성기
Markdown 파일이 Hugo 엔진을 거쳐 HTML로 변환됩니다
Hugo는 Go 언어로 작성된 세계에서 가장 빠른 정적 사이트 생성기입니다.
| 특징 | 설명 |
|---|---|
| 빌드 속도 | 수천 개 페이지도 1초 내 빌드 |
| 작성 방식 | Markdown으로 간편하게 작성 |
| 테마 | 수백 가지 무료 테마 제공 |
| 보안 | 데이터베이스 없음 = 해킹 위험 최소화 |
GitHub: 버전 관리 및 저장소
Git은 코드 변경 이력을 추적하고, GitHub는 이를 클라우드에 안전하게 저장합니다.
- 잘못 수정했어도 언제든 이전 버전으로 복구 가능
- 여러 기기에서 동기화하며 작업 가능
- Cloudflare와 연동하여 자동 배포 가능
Cloudflare Pages: 무료 호스팅 및 자동 배포
GitHub에 Push하면 Cloudflare가 자동으로 빌드하고 배포합니다
Cloudflare Pages는 GitHub 저장소와 연결하여 자동으로 빌드하고 전 세계에 배포하는 서비스입니다.
| 무료 플랜 혜택 | 내용 |
|---|---|
| 비용 | 완전 무료 |
| 대역폭 | 무제한 |
| SSL | 자동 HTTPS |
| CDN | 전 세계 엣지 네트워크 |
시작 전 준비물
| 항목 | 필수 여부 | 비고 |
|---|---|---|
| macOS / Windows / Linux | 필수 | 이 가이드는 macOS 기준 |
| 터미널 (Terminal) | 필수 | 명령어 실행용 |
| GitHub 계정 | 필수 | 무료 가입 |
| Cloudflare 계정 | 필수 | 무료 가입 |
| 코드 에디터 (VS Code 등) | 권장 | 콘텐츠 작성 시 편리 |
Hugo 설치하기
macOS (Homebrew 사용)
터미널을 열고 다음 명령어를 순서대로 실행합니다.
1. Homebrew가 없다면 먼저 설치:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
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
설정 파일 작성하기
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.png'
# 댓글 설정 (나중에 활성화)
[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에 업로드하기
1. GitHub에서 새 저장소 만들기
- GitHub에 로그인
- 오른쪽 상단 + 버튼 → New repository
- Repository name:
my-blog(원하는 이름) - Public 또는 Private 선택
- Create repository 클릭
2. 로컬 프로젝트와 연결
# .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로 배포하기
1. Cloudflare Dashboard 접속
https://dash.cloudflare.com에 로그인합니다.
2. 새 프로젝트 생성
- 좌측 메뉴에서 Pages 클릭
- Create a project → Connect to Git
- GitHub 계정 연결 (처음이라면 권한 허용)
- 방금 만든
my-blog저장소 선택
3. 빌드 설정
| 설정 항목 | 값 |
|---|---|
| Framework preset | Hugo |
| Build command | hugo |
| Build output directory | public |
중요: Environment Variables에서 HUGO_VERSION을 0.154.3 (또는 로컬 버전)으로 설정하세요.
4. 배포 시작
Save and Deploy 버튼을 클릭하면 자동으로 빌드가 시작됩니다.
몇 분 후, https://프로젝트명.pages.dev 주소로 접속할 수 있습니다.
마무리
이제 다음과 같은 완전 무료 환경이 구축되었습니다:
| 항목 | 비용 |
|---|---|
| Hugo | 무료 |
| GitHub | 무료 |
| Cloudflare Pages | 무료 |
| SSL 인증서 | 무료 |
| CDN | 무료 |
| 월간 총 비용 | $0 |
다음 단계
- 커스텀 도메인 연결 (예: myblog.com)
- 댓글 시스템 추가 (Giscus, Utterances)
- SEO 최적화
참고 자료
공식 문서
추가 학습
질문이나 피드백이 있으시면 댓글로 남겨주세요!