Vercel에 Hugo 사이트 배포하기

프로젝트 생성

우측 상단의 Add New를 누르신 뒤, Project를 선택하세요

우측의 Clone Template에서 Browser All Templates를 선택하세요.

Hugo를 검색한 뒤, Hugo Starter를 선택하세요.

Deploy를 누르세요.

레포지토리 이름을 원하는 대로 바꾸고 Create을 누르세요. 여기까지 했으면 Hugo 기반의 git 레포지토리와 사이트가 생긴 것입니다. 그런데 문제가 좀 있어요. 하나씩 해결해보겠습니다.

hugo 버전 설정하기

생성된 사이트를 소스 보기로 열어보면 <meta name="generator" content="Hugo 0.58.2" />가 있습니다. hugo 명령어의 버전이 v0.58.2라는 소리인데, 최신 버전이랑 멀어도 너무 멉니다. 그래서 버전을 올려보겠습니다.

우선 Vercel 대시보드에서 Settings -> Environment Variables에 접속하세요.

그런 뒤, HUGO_VERSION이라는 환경변수를 만들어줍니다. 전 값으로 최신 버전인 0.111.3을 사용했습니다. 이름 란에 HUGO_VERSION, 값 란에 0.111.3을 입력하고 Save를 누르시면 됩니다. 이렇게 하시면 다음 배포될 떈 최신 버전의 Hugo가 사용됩니다.

빌드 설정 바꾸기

Vercel의 hugo 템플릿 기본값이 드래프트 글을 보여주고, HTML등을 압축하지 않는 것인데, 이러면 좀 문제가 있습니다. 그래서 드래프트 들을 숨기고 압축을 사용하도록 설정하겠습니다.

Vercel에서 Settings -> General로 접속하시면 아래와 같은 화면이 나옵니다.

Build Command의 값을 수정해줘야합니다. 기본값은 hugo -D --gc인데요, 이 값을 hugo --minify --gc로 바꿔줍니다. -D를 없앤 건 드래프트 글을 배포하지 않기 위해서이고, --minify를 추가한 건 HTML 등을 압축하기 위해서입니다.

이제 Save를 누르시면 됩니다.

테마 파일 서브모듈로 분리하기

이건 필수는 아닌데요, 테마 파일을 서브모듈로 분리하면 테마를 업데이트할 때 편리합니다. 생성된 git 레포지토리를 clone 하신 뒤, themes/ananke 폴더를 지워하시고, 커밋해주세요. 그런 다음 아래 명령어를 터미널에 입력하세요.

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
git commit -m 'Configure theme'

각각 테마를 추가하고 커밋하는 명령어입니다. 이렇게 하시면 테마 파일이 서브모듈로 추가됩니다.

결과 확인하기

git 레포지토리에 커밋하신 뒤 푸시하시면 Vercel이 알아서 사이트로 배포해줍니다. 배포가 완료되면 사이트에 접속해서 소스코드 보기를 해보세요. HTML이 압축된 것과

<meta name="generator" content="Hugo 0.111.3" />

이 생긴 걸 보실 수 있을겁니다.