hugo + github + cloudflare 조합으로 무료 blog 만들기

소개

Hugo, GitHub, Cloudflare pages 를 이용해 무료로 블로그를 만드는 방법을 설명합니다. 참고로, Github pages 로도 무료 운영이 가능하지만, 응답 속도가 조금 더 빠른 Cloudflare pages 를 이용하는 방법으로 설명합니다. 즉, 정적 사이트 플랫폼으로 hugo 를 사용하고, 블로그 콘텐츠를 github 에 저장한 뒤, cloudflare 를 이용해서 호스팅하는 방법입니다.

속도 비교 참고 : https://bejamas.com/compare/cloudflare-pages-vs-github-pages

준비물

hugo 설치

먼저 Hugo를 설치합니다. macOS 환경 기준이고, 다른 환경은 설치 문서를 참고해주세요.

혹시 brew 설치가 안 되어 있다면 Homebrew 를 설치하고 터미널에서 아래 명령어를 입력합니다.

1

brew install hugo

설치 완료 후 설치된 버전을 확인해봅니다. 버전이 표시되면 정상 설치되었습니다.

1

hugo version

블로그 만들기

원하는 폴더명(myblog) 으로 사이트를 생성하고 만들어진 폴더로 이동합니다. 사이트 설정 파일은 기본적으로 TOML 형식으로 만들어지는데 YAML 처럼 다른 형식을 원한 다면 –format 을 사용해 지정합니다.

1
2
3

hugo new site myblog --format yaml
cd myblog
ls -al

아래와 비슷하게 보이면 정상 설치가 되었습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

myblog/
├── archetypes/
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
├── hugo.yaml # 사이트 설정 파일 (YAML 형식)

테마 설치

저는 hugo-theme-stack 테마를 사용하고 있는데, 다른 테마도 설치 방법은 동일합니다. 더 많은 테마는 hugo themes 에서 찾아보세요.

혹시 Git 설치가 안 되어있다면 먼저 설치가 필요합니다.

1

brew install git

myblog 폴더에서 테마를 설치합니다

1
2

git init
git submodule add https://github.com/CaiJimmy/hugo-theme-stack themes/hugo-theme-stack

설치가 끝나면 설정 파일을 테마에서 복사 합니다.

1

cp themes/hugo-theme-stack/exampleSite/hugo.yaml .

첫 글 작성 & 로컬에서 확인

이제 첫 글을 써볼까요? 아래 명령어를 입력합니다.

1

hugo new post/hello-world.md

첫 글을 확인하기 위해 아래 명령어를 실행하세요. -D 는 draft(임시글)까지 모두 보여주라는 옵션입니다.

1

hugo server -D

이제 브라우저에서 http://localhost:1313에 접속하면 내 블로그가 보입니다!

생성한 콘텐츠는 myblog/conent/post/ 폴더에 위치해 있습니다.

GitHub 에 저장하기

Github 로그인 후 New repository 로 저장소를 생성합니다.

  • repository name 입력
    • myblog 처럼 원하는 저장소 이름
  • Choose visibility 선택
    • public or private 무관
  • ‘Create repository’ 클릭

로컬의 myblog 폴더를 github 원격 저장소로 연결합니다.

1
2

git init
git remote add origin https://github.com/계정아이디/myblog.git

저장소에 저장하지 않아도 되는 빌드 폴더나 파일을 .gitignore 파일에 추가합니다.

1
2
3

/public/
/resources/
.DS_Store

이제 모든 파일을 커밋&푸시하고, github 저장소에 파일들이 올라갔는지 확인합니다.

1
2
3
4

git add .
git commit -m "First commit: Hugo blog setup"
git branch -M main
git push -u origin main

Cloudflare pages 로 호스팅하기

Cloudflare 에 로그인 한 뒤 pages 를 생성합니다.

  1. 관리 홈으로 이동
  2. 컴퓨팅(Workers) > Workers 및 Pages > 생성 버튼 클릭
  3. Pages > 기존 Git 리포지토리 가져오기 > 시작
  4. github 계정을 연결하고, 저장한 레포지토리(myblog) 를 선택 > 다음 단계

빌드 설정 및 배포 화면에서 다음과 같이 설정 합니다.

  • 프로젝트 이름
    • 원하는 이름
    • myblog.pages.dev 처럼 URL 로 사용됩니다
  • 프레임워크 미리 설정
    • Hugo 선택
  • 빌드 명령
    • hugo –gc –minify 입력
  • 빌드 출력
    • public 입력

다음으로 ‘저장 및 배포’ 를 실행하면 자동으로 github 에 저장한 레포에서 코드를 받아서 빌드 후 위에서 설정한 url 로 호스팅이 바로 시작됩니다.

또한, 앞으로는 github 저장소에 push 만 하면 자동으로 cloudflare pages 에 변경사항이 적용되어 배포됩니다.

설정 및 기타

hugo.yml 파일을 열어 환경에 맞게 설정할 수 있습니다. 각 설정에 대한 자세한 정보는 stack 테마 홈페이지를 참고하세요.