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" />
이 생긴 걸 보실 수 있을겁니다.