Blowfish 테마: 사이트 제목과 로고 설정하기

Table of Contents

Blowfish 테마 설치 후 가장 먼저 해야 할 일은 바로 블로그의 ‘얼굴’을 만드는 것입니다. 방문자가 사이트를 기억하게 만드는 가장 중요한 두 요소인 제목과 로고를 설정하는 방법을 알아보겠습니다.

사이트 제목(Title) 설정하기
#

사이트 제목은 브라우저 탭, 검색 엔진 결과(SEO), 그리고 로고가 없을 때 표시되는 중요한 텍스트입니다. 설정은 매우 간단합니다.

프로젝트의 config/_default/languages.en.toml 파일을 엽니다. 파일 내에서 title 변수를 찾아 원하는 사이트 제목으로 변경합니다.

# config/_default/languages.en.toml

title = "My awesome website"

로고(Logo) 설정하기
#

로고는 사이트의 시각적인 상징입니다. Blowfish 테마에서는 라이트 모드와 다크 모드에 따라 다른 로고를 표시하는 기능도 지원합니다.

로고 파일 준비 및 배치
#

먼저 사용할 로고 이미지 파일을 준비해야 합니다.

라이트 모드용 로고 (예: logo-light.png)
다크 모드용 로고 (예: logo-dark.png) - 배경이 어두울 때 잘 보이는 이미지로 준비하는 것이 좋습니다.

`assets` 폴더에 배치:
#

준비한 로고 파일들을 프로젝트의 assets/images/ 폴더 안에 넣습니다. assets 폴더나 images 폴더가 없다면 직접 생성해 주세요.

.
└── assets/
    └── images/
        ├── logo-light.png
        └── logo-dark.png

로고 설정
#

이제 Hugo에게 어떤 파일을 로고로 사용할지 알려줄 차례입니다.

languages.en.toml 파일 열기 프로젝트의 config/_default/languages.en.toml 파일을 엽니다.

[logo] 섹션 찾기 및 수정 파일 내에서 [params] 섹션을 찾아 아래와 같이 로고 파일 경로와 설정을 입력합니다.

# config/_default/params.toml

[params]
  displayName = "EN"
  isoCode = "en"
  rtl = false
  dateFormat = "2 January 2006"
  # 라이트 모드(기본)에서 표시될 로고
  # assets 폴더를 기준으로 경로를 작성합니다.
  logo = "images/logo.png"
  # 다크 모드에서 표시될 로고
  secondaryLogo = "images/logo-dark.png"
  # description = "My awesome website"
  # copyright = "Copy, _right?_ :thinking_face:"
...

설정 확인하기
#

제목과 로고 설정이 완료되었습니다. 아래 명령어로 로컬 서버를 실행하여 변경 사항이 잘 적용되었는지 확인하세요.

hugo server

웹 브라우저에서 http://localhost:1313으로 접속한 뒤, 사이트 헤더의 왼쪽 상단에 새로운 로고가 보이는지, 브라우저 탭에 설정한 제목이 올바르게 표시되는지 확인합니다. 다크 모드/라이트 모드 전환 시 로고가 바뀌는지도 테스트해 보세요.

이렇게 간단한 설정만으로도 사이트의 개성과 정체성을 명확하게 표현할 수 있습니다.

사이트 제목(Title) 설정하기#

로고(Logo) 설정하기#

로고 파일 준비 및 배치#

assets 폴더에 배치:#

로고 설정#

설정 확인하기#