여러 Hugo 사이트에서 동일한 테마 디렉터리 설정하기 (themesDir)

로컬 PC에서 여러 개의 Hugo 사이트를 만들고, 그리고 공통 테마를 동시에 만드는 경우에 동일한 테마 디렉터리를 참조하여 개발할 수 있다.

여러 Hugo 프로젝트에서 동일한 테마를 참조하게 하는 방법은 다음과 같다.

  1. GitHub 등에 테마용 리포지토리를 작성하고, 그 리포지토리를 여러 Hugo 프로젝트에 clone을 한다.
  2. 각 Hugo 프로젝트의 themes 디렉터리를 공통 테마 디렉터리에 대한 심볼릭 링크로 바꾼다.
  3. 설정 파일(config.toml)에서 공통 테마 디렉터리를 참조하도록 설정한다.

첫 번째 방법이 제일 일반적인 방법이기 하지만, Git으로 각 사이트의 테마를 동일하게 적용 하는 경우에는 개발 단계에서는 조금 번거로울 수 있다. 그럴 때 추천하는 것은 두 번째와 세 번째 방법이다.

심볼릭 링크에서 공통 테마 디렉터리 지정

Linux나 macOS 등과 같이 심볼릭 링크를 만들 수 있는 OS에서는 공통 테마 디렉터리를 심볼릭 링크로 참조하는 것이 쉽다. 예를 들어, 아래와 같이 공통으로 사용하는 테마 디렉터리(hugo_themes)와 참조되는 3개의 Hugo 프로젝트( site1, site2, site3)가 있다고 하자.

.
├── hugo_themes (공통 테마 디렉터리)
│   └── mytheme
│       ├── archetypes
│       ├── layouts
│       ├── static
│       └── ...
├── site1  (Hugo 사이트 1)
├── site2  (Hugo 사이트 2)
└── site3  (Hugo 사이트 3)

각 Hugo 프로젝트의 themes 디렉터리를 hugo_themes 심볼릭 링크로 바꾸면, 모든 사이트에서 동일한 테마 디렉터리를 바라 볼 수 있게 할 수 있다.

$ cd site1
$ rmdir themes
$ ln -s ../hugo_themes themes

사용할 테마 이름을 설정하는 것은 반듯이 필요하므로, 각 Hugo 프로젝트의 설정 파일(config.toml)에 테마 이름을 설정을 해야 한다. site1/config.toml

theme = "mytheme"

설정 파일에서 공통 테마 디렉터리 설정

Hugo 설정 파일(config.toml)에 공통 테마 디렉터리를 설정하는 방법도 있다. 테마 디렉터리의 설정은 themesDir 라는 변수로 설정하는데, 이 디렉터리 경로에 Hugo 프로젝트보다 상위의 디렉터리의 경로를 설정할 수가 있다.
config.toml

themesDir = "../hugo_themes"
theme = "mytheme"

예를 들어, 각 Hugo 프로젝트의 설정 파일에서 위와 같이 설정하면 상위 디렉터리에 있는 공통 테마 디렉터리(hugo_themes/mytheme/)를 사용할 수 있다.

설정 파일을 사용하지 않고, 명령 hugo 옵션 --themesDir에서 테마 디렉터리를 지정할 수도 있다.

$ hugo server --themesDir ~/gitwork/hugo_themes

설정 파일의 themesDir 변수와 커멘드 라인 인자가 --themesDir 모두 지정되면, 커멘드 라인에 인수가 우선시 한다.




최종 수정 : 2023-05-14