Hugo 테마 선택 및 설치 방법
Hugo는 정적 사이트 생성기로, 다양한 테마를 통해 웹사이트의 디자인을 간편하게 변경할 수 있습니다. Hugo 테마는 무료로 제공되는 것부터 맞춤형 디자인까지 다양하게 선택할 수 있습니다. 이 글에서는 Hugo 테마를 선택하고 설치하는 과정을 단계별로 설명합니다.
Hugo 테마 선택
Hugo는 Hugo Themes 공식 웹사이트를 통해 다양한 테마를 제공합니다. 테마를 선택하기 전 다음 사항을 고려하세요:
- 용도에 맞는 디자인: 블로그, 포트폴리오, 문서화 등 사이트의 목적에 맞는 테마를 선택합니다.
- 기능 요구사항: 다국어 지원, 검색 기능, 페이지 네비게이션 등 필요한 기능을 제공하는지 확인합니다.
- 라이센스: 오픈소스 테마라도 상업적 사용이 가능한지 확인하세요.
Amethyst
사용자가 원하는 테마를 선택하는 것이 가장 중요합니다. 옵시디언의 연결성이 중요하다면 Quartz 기능이 내장된 Hugo Amethyst 테마를 추천합니다. Amethyst 테마는 Hugo에서 옵시디언의 연결 시스템을 활용하여 빌드할 수 있습니다. 하지만 기본 테마는 한글을 지원하지 않으며, JavaScript 코드를 약간 수정해야 하는 부분이 있고, 작은 오류가 있어도 사이트 빌드가 되지 않는 단점이 있습니다. 또한 CSS를 어느 정도 수정할 줄 알면 더 완벽한 사이트를 빌드할 수 있습니다.
Hextra
옵시디언의 연결성이 중요하지 않지만, 옵시디언 특유의 문서화 시스템이 중요하다면 Hextra 등의 Documentation 테마도 괜찮습니다. 그러나 Hextra 테마는 태그 시스템이 부족하기 때문에 이를 따로 수정해야 합니다.
PaperMod
단순히 블로그 스타일이 중요하다면 PaperMod 테마나 Stack 테마 등 다양한 옵션이 있습니다. 여러 테마를 살펴보고, 자신이 원하는 디자인인지, 필요한 기능이 있는지, 그리고 라이선스를 확인하여 선택하시기 바랍니다. 초보자라면 Git을 클론하여 한 번에 설치할 수 있는 스타터팩 패키지를 사용하는 것도 추천합니다.
Hugo 테마 설치
테마를 설치하려면 Hugo 프로젝트를 생성한 상태여야 합니다. 아래 단계를 따라 테마를 설치해 보세요.
테마 다운로드
-
Hugo 프로젝트 폴더로 이동합니다:
cd mysite -
Git을 사용하여 테마를 다운로드합니다:
git clone https://github.com/<테마-리포지토리>.git themes/<테마-이름>예를 들어, PaperMod 테마를 설치하려면:
git clone https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
테마 설정
-
프로젝트의
config.toml또는config.yaml파일을 열어 테마 이름을 추가합니다:theme = "PaperMod" -
테마별 설정 가이드를 참고하여 추가 설정을 진행합니다. (테마 리포지토리의
README.md파일 참고)
테마 미리보기
-
로컬 서버를 실행하여 테마를 확인합니다:
hugo server -
브라우저에서
http://localhost:1313에 접속해 결과를 확인합니다.
스타터 패키지
몇몇 테마들은 이런 불편함을 커버하기 위해 직접 스타터 패키지를 배포하기도 합니다. 초보 이용자라면 스타터 패키지가 존재하는 테마를 추천합니다.
3. 테마 커스터마이징
테마를 설치한 후 기본 스타일을 수정하거나 새로운 기능을 추가하고 싶다면 아래 방법을 사용할 수 있습니다.
CSS 수정
- 프로젝트 디렉토리 내
assets또는static/css폴더에서 스타일 파일을 수정하거나 새 파일을 추가합니다.
레이아웃 변경
themes/<테마-이름>/layouts디렉토리를 참고하여 원하는 템플릿 파일을 복사한 후,layouts폴더에 수정본을 저장합니다.
스크립트 추가
- JavaScript 파일을
static/js폴더에 추가하고, HTML 파일에서 이를 호출하도록 수정합니다.
테마 업데이트
Git으로 테마를 설치한 경우 최신 버전으로 업데이트하려면 아래 명령어를 사용하세요:
cd themes/<테마-이름>
git pull
결론
Hugo 테마는 정적 웹사이트의 외형을 쉽게 변경할 수 있도록 돕는 강력한 도구입니다. 목적에 맞는 테마를 선택하고, 필요한 설정과 커스터마이징을 통해 자신만의 웹사이트를 만들어 보세요.
댓글 쓰기